Object Oriented CSS
Object Oriented CSS
|
|
“How do you scale CSS for millions of visitors or thousands of pages?” This is the question that Nicole Sullivan tried to answer in her presentation at Web Directions North in Denver. Entitled Object Oriented CSS (OOCSS), the concept has since then garnered overwhelming response from the community.
OOCSS is more than just a tool, it is a way of thinking. There are many advantages to adapting this concept. Primarily:
- It allows you to write fast, maintainable, standards-based front end code.
- It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
OOCSS is governed by two main principles:
- Separate structure and skin
- Separate container and content
Take time to check out the Object Oriented CSS presentation. There are 64 slides, but it is definitely worth going through. If the text is hard to read, try viewing in Full Screen mode.
Similar Posts
- Documents
- Client files
- Copy
- Proofs
- Staged/Development area (folder for a “clone of the site” where you can make changes and get sign off)
- Downloads
- reset.css
- main.css
- structure.css
- typography.css
- print.css
- helpers.css
- More consistant rendering due to reusing ideal CSS techniques
- Easier editing and maintenance as you can better recall what names mean
- The start of code that can be saved and reused every time
- A class that floats an image left / right and gives it some margin
- The structure for an unordered list navigation
- The structure for a form
- external link, pdf and download icons
- clearfix
- png fix
- Typeography baselines and hierarchies
- etc…
- Font sizing (all normal text is 12px, featured text is 14px bold)
- Margin’s (normal margin is 10px between elements, margin between two content blocks is 40px, etc…)
- All navigation tabs will have 15px height and 13px font
- etc…
- AJAX application that allows visitors to enter their own responses, and generates a graph that shows where the respondent is in relation to others
- Quick summary that shows the highest and lowest result per question
- AJAX application that allows visitors to filter, sort, and sift through the data
- Side-by-side comparison of 2008 and 2007 data
I previously blogged about CSS optimization and mentioned that one way to achieve optimization through the use of CSS optimizers.
Styleneat is a similar tool that focuses on reformatting CSS Stylesheets, simply making it more readable. This tool can pretty much take care situations wherein CSS code was developed by different people, re-organizing everything to take on a unified, organized code structure.
The author claims to have tested the tool on “several websites with huge and complex stylesheets” and it has not broken layout. Does it live up to its claim? Give it a spin and share your thoughts.
Build Custom Frameworks Easily with CSS Classes
Generally speaking, I consider full-fledged CSS frameworks to be overkill on all but the most absolutely complex projects or, on the other end of the spectrum, rapid proof-of-concept prototyping. Most people only use a few of the classes that any one CSS framework provides, but then still require their users to download the entire, and largely unused, stylesheet.
However, I still think that the foundation on which CSS frameworks are built — the concept of using classes to simplify layout and standardize design across similar elements — is very much worth investigation. But instead of relying on a one-size-fits-all (snuggie-esque?) solution, I’d encourage you to take a few minutes and build a custom, simplified framework that does exactly what you need it to do.
The Back Story
I recently built a website based on a fairly regular, consistent grid. The content area was 780px wide and would contain six “columns” of content with 12-pixel gutters between each of the columns, though various elements could span one or more of those columns.
Because of the general flexibility of the content combined with the rigidity of the columnar structure, my mind immediately jumped to frameworks as a way to get this design pushed out in a hurry. But in the end, I just couldn’t justify all that overhead, even to create a flexible six-column design. So instead, I decided to write my own mini-framework to do only what I needed.
The Custom Framework
Here’s the basic CSS I ended up writing:
.col {
float: left; }
.gutter {
margin-right: 12px; }
.span1 {
width: 120px; }
.span2 {
width: 252px; }
.span3 {
width: 384px; }
.span4 {
width: 516px; }
.span5 {
width: 648px; }
.span6 {
width: 780px; }
.clear {
clear: left; }
Pretty simple stuff, right? All it contains is nine classes that I can arbitrarily assign to my structural divs to determine how the page will lay out. The first class, “col”, gets assigned to any div I want to behave like a column.
Then each column is given one of the “span” classes (using the benefit of multiple CSS classes to great effect) to determine its width — or as I thought of it at the time, the number of columns the div would span… just like using “colspan” in old-school table layouts.
Next up we have the “gutter” class, which I add to any column that should have a gutter along its right edge (which would be true for all columns except those along the very right edge of my content area). And finally, there’s a “clear” class, just to ensure that my divs behave themselves even if I didn’t entirely fill up the previous “row” of divs.
The XHTML Structure
There’s not much to the XHMTL structure for my custom framework. Essentially, it’s a bunch of divs given two or more of my nine classes to determine its behavior. For example, to create the 4-2/2-1-3 structure I highlighted in the image above, this would be the structure:
<div class="col span4 gutter">Four columns</div> <div class="col span2">Two columns here</div> <div class="col span2 gutter">Two cols and a gutter</div> <div class="col span1 gutter">Only 120px!</div> <div class="col span3">Three columns.</div>
If you’d like to see this sort of custom framework in action, it’s running on the website for the Woodsmith Shop TV show.
One Size Doesn’t Fit All
Now, I’m not saying my framework is the end-all CSS framework and that you should just copy it wholesale into your own project and expect it to work perfectly. The idea here is to take this concept and come up with a custom framework that works perfectly for your needs.
The real take-away lesson here is that for most projects, you don’t need dozens of classes and hundreds of lines of CSS just to create a flexible grid structure. I created mine with just nine CSS classes and it was sufficient to power my six-column grid. I’d be interested to see what other people (namely, you) have come up with along these same lines. Share a link in the comments!
8 methods to bring your front end coding to rockstar levels
There are a lot of good front end developers out their right now. If you fancy yourself as a front end editor then you really should be looking at how you can differentiate yourself from the rest. Yes there are lots of “good” front end developers, but there are not a whole lot of excellent front end developers.
1. Improve Your Semantic Names
If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like “box”, “wrapper”, or “container.” While you may think that these naming conventions or “semanitc enough” none of them describe the content that is inside them. Instead consider using HTML5 spec’s such as “content-sub”, “section”, “content-aside” or “content-sup.”
You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of “box.”
Read more about semantic naming from Andy Clarke and A List Apart.
2. Improve the Organization of Your Files
I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc…). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)
I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc…
There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:
The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.
3. Use Commenting in Your XHTML
Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.
To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.
<div id="header" class="section">
<div id="header-logo">
<h1>HTMLiZER</h1>
</div><!--/#header-logo-->
</div><!--/#header-->
If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc…)
4. Segment Your CSS
For small 4 – 5 page brochure sites your CSS will be pretty manageable even if you don’t spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design “modules” you should make sure that you organize your CSS in way that is easy to manage.
I recommend splitting your css into logical different files for better organization, such as:
This way you don’t have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.
5. Create a TOC With Comments in Your CSS
Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using “find” rather than scrolling for that one area that had the CSS you are hoping to modify.
EX
/***********
TOC:
=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio
****************/
/* ********* =1: HEADER *********** */
#header { … }
6. Compress and Combine Your CSS files
Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.
Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc… that is unnecissary when the site is live.
There are several handy tools to do this including this online version.
7. Create your own framework (or improve on another one)
As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:
Chances are that you end up rewriting the same type of code over and over again, simply because you don’t have it stored somewhere. Some examples may be:
Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.
8. Develop your CSS to be modular or “object oriented”
You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:
This way you don’t have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.
Some call this object oriented css, it is worth looking into for rockstar like front end coding.
SlickMap CSS Lets You Create Beautiful Visual Site Maps Easily
Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.
Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.
SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”
The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.
What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.
It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.
In the README file:
SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.
The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.
It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!
Hottest "css" Questions – Stack Overflow
… make div and css based pages work in … Object Oriented CSS: Catchy Buzz-phrase or Legitimate … revision: 2689. Stack Overflow works best with …5 Ways To Optimize Your CSS
Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.
Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.
For example, the code below:
<p class="someClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
Can be rewritten this way:
<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
But what if our code looks like this:
<p class="firstClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
We can take advantage of CSS by rewriting HTML this way:
<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.
This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.
Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.
Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.
Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.
Compare the example longhand its equivalent shorthand below.
Original longhand:
#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Shorthand version:
#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }
The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.
Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.
The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.
Use Google Code to Speed Up Development
Web development has gotten more complicated.
You’ve got to worry about a plethora of new issues that you’ve never thought about when you started doing this business: data asset management (DAM), you’ve got to build and code websites in no time fast, competition is fierce & everybody has their own web development company, you’ve got to keep your costs to a minimal, etc.
We’re here to give you one of those ideas that’ll do all of those things all at once. It’s pretty easy to do. It took me forever but i’ve finally discovered how to use SVN via TortoiseSVN (TortoiseSVN seems to be the easiest way to do SVN. Update, commit, merge files are easily executed with 2-3 clicks). If you do not have the pleasure of owning a windows machine there are many other SVN alternatives for MAC. Such a syncrosvn and versions.
What’s TortoiseSVN?
TortoiseSVN is just a open source program that manages file versions. At 3 Point 7 Designs, we discussed some methods to collaborate and keep our files updated so redundancy didn’t happen. At much of my discovery, we discovered that we can use this to also host some of our template files that we use to speed up development.
We decided that we’d host and feature our companies css/xhtml boilerplate to foster collaboration and version tracking on Google Code (code.google.com). In addition to this beautiful solution, it allows google to host our redundant files that we use for every project. Google hosting has got to be the best hosting on the internet. You can’t beat anything faster than google; they practically run and own the internet.
We just link the files to the google code repository and voila we are up and running.
Featuring 3.7 Designs Boilerplate!
We’re big fans of css frameworks. CSS frameworks are great providing quality control. It provides us the ability to get our job done quickly, efficiently and more consistently.
The 3.7 Design Boilerplate contains the file structure and the files needed to quickly start coding. It might take a while to get a hang of our id/class usages. Nonethless, it’s pretty KISS and makes sense.
Folders Structure
The following are some folders and they’re pretty self explanatory
/css – CSS files
/images – Images
/js – Javascript Files
/clientfiles – PSD, .ai, etc files go here
/concepts – concepts – currently and eventually will be moved to client files
/copy – contains word documents or text for the content of the website
CSS Files Explained
Reset.css – Some things that we commonly practice is resetting stylesheets so that they’re all at a beginning point. This is something that Eric Meyer’s blogged about.
Grid.css - We’ve added a set of grids that you can use. It’s actually a gride from 960.gs. You’re welcome to switch out any grid stylesheet here.
helper.css – This file gives you a running start if you’re prototyping a page. You can quickly using classes move block elements around with margins or padding. An example class : “ml-5” adds 5px of padding to the left side. “mh-10″ adds left and right padding. “padr-5” provides 5 px of padding on the right side, etc.
This file also contains the very important class: clearfix. If you’re not familiar with it it just primarily solves the problems of container div’s that don’t totally addup the total height of all of the child containers.
main.css This file allows is to create a base file from the reset to provide some type of consistency and legibility to the type. Often after type is reset the type is too small to read.
style.css This last file you’ll have to use locally because it’ll be key and important in customizing your website. All the other files you can link from the google code repository. This file is the file that will contain your site specific and context specific css code.
Download Boilerplate: Latest 2.0.zip
Put it all together
With all these things put together we are providing you with a starting point. If you don’t like the way we do things; that’s totally understandable. We’re hoping to inspire others to create their own or contribute to our project.
The best part of hosting your css files is that once you add more or append to your files it’ll effect all the websites that might be linking to your files.
Hope this has been most helpful.
MaKo 4 CSS – CSShark’s Tutorial on CSS and CSS-P
Cascading Style Sheets (CSS) – a FAQ web site with tutorials about … Tutorial Positioning with CSS – the ultimate separation of structure and presentation. …CSS Center For Social Sciences
About Us. Director’s Message. History. Organization Structure. CSS Board. Academic Personnel … Presentation 2002 © 2008 CSS. All Rights Reserved. Privacy …Survey For People Who Make Websites 2008 Results Out
Back in 2007, the staff of A List Apart and An Event Apart conducted a survey and presented 37 questions to 33,000 web professionals, providing “the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide” (ALA 2007 results). The results were compiled into a downloadable PDF file.
In 2008 they did it again, the results of the 2008 Survey For People Who Make Websites are now out for public consumption. The survey had less respondents compared to the one held in 2007 down to 30,055. Data analysis is provided by Alan Brickman and Larry Yu. The results speak can be overwhelming for some. Thankfully the findings are presented in a friendly, easy to read article with clear and beautiful CSS Charts.
ALA has generously shared the raw data with the community, which is available as tabbed text, CSV, and Excel spreadsheet. RAW data is a powerful thing, and I just have a couple of suggestions how it can be used:
All in all, big props to the ALA team for the tremendous effort spent on this endeavor. It is a great contribution to the web community. Looking forward to the 2009 survey!