May
06
2010
As Web designers we tend to believe that we work best in a chaotic format. We speed through the design process placing objects where we think they need to be placed and then rapidly modify and tweak their appearance until we are pleased with the outcome. During this design process rarely do we take a step back from our work and ask ourselves if this is the most efficient method or if can we can reorganize and help with future management of our code?
CSS management tends to be very difficult as projects grow in size thus becoming a point of lesser value in our overall development process. This can prove to be detrimental to our projects as we update them and add new features in the future. When we gloss over the fine details and fail to refactor our code we reek ourselves havoc by building in inconsistencies and duplicating lines of code.
Cascading Stylesheets are relatively new as a concept and there are many different ideas behind how they should be properly handled many of which vary a great deal in comparison with one another. However, organization and management of CSS can all be boiled down to a few simple guiding principles:
- Consistent Naming Conventions
- CSS Comments and Stylesheet Organization
- Consistent Stylesheet Structure
- Refactor, refactor, refactor, and then refactor, and then refactor again
1. USE CONSISTENT NAMING CONVENTIONS - And stick to them! Develop a naming convention that is specific to structure and not design. When developing your page markup be sure to name CSS classes with generic names such as "container" or "wrapper" that are not design specific like "red-border" and "right-column." It is good practice to build out page structure independent of design so that we are free to control our designs strictly from our CSS. It would make little sense if we named an object "right-column" and then later we change it to just become an additional content area at the bottom of the page by telling it not to float all the while it still contains the name "right-column."
2. USE CSS COMMENTS TO STRUCTURE YOUR STYLESHEETS - Break your stylsheets into sections defined by css comments and then be sure to properly place your rule sets in the correct sections. I tend to define a region for the "header", "footer", "main content",etc. and my comments typically look something like:
/**********************************************************
Header BEGIN
**********************************************************/
Styles go here
/**********************************************************
Header END
**********************************************************/
3. USE A CONSISTENT METHOD TO STRUCTURE YOUR CSS - Follow patterns like listing your style rules in alphebetical order or indenting rule sets when refering to elements that are nested inside of previously styled containers or both. For example, when styling an object with { font-size: 12px; background: red; display: block; } you would put them in this order { background: red; display: block; font-size: 12px; }. This makes it easier to not only stay consistent but to easily navigate to any specific rule in any rule set. Also if you had a div tag with a class="container-inner" inside of a div with a class="container" you could structure them in your css like:
.container { font-size: 23pt; }
.container-inner { background-color: red; }
This helps us to quickly navigate through blocks of CSS code with a glance and can make it easier for us to debug issues.
4. And finally - REFACTOR, REFACTOR, REFACTOR, AND THEN REFACTOR, AND THEN REFACTOR AGAIN - CSS constantly needs to be refactored during the design process. Many times during development we put styles in place only to remove or rearrange their markup rendering the CSS useless. It takes constant self discipline to remove styles as they are not needed and combine them as necessary but it can significantly reduce stylesheet file size and line count while also easing CSS management due to fewer redundant lines of code.
Just a few thoughts on CSS structure and organzation, now go clean up your code!