Re-Cycling CSS : A Look At CSS Frameworks
Thursday, May 20th, 2010 By NikhilRe-Cycling is Buzzword and In Web Development it means no different. It conserves energy, in terms of effort!
Over years of writing CSS and creating HTML from designs, I have followed a few best practices, in pursuit of saving time and energy in what we commonly term as “Re-Inventing the Wheel”. Time and time again, I have told myself, that I must create a few templates , some standard re-usable CSS that I would use OUT OF THE BOX in my future work. Though not completely but I did manage to achieve some of goals.
In furthering, Re-Use of CSS , I had a look at the few CSS frameworks that are commonly available to us and decided to put them to use, as these are tried and tested and created by much experienced developers , than myself . More importantly “AVOID RE-INVENTING”.
Though common knowledge to veterans, I have tried to pen some key concepts/best-practices/thoughts that has gone into creating these frameworks, to make RE-CYCLING of CSS possible. Hope this will help some CSS developers who are just about to and recently boarded the CSS bandwagon!
Keys Re-cycling of CSS :
Use Naming Conventions
This has to be the most important factor in making the CSS/HTML re-usable. Giving consistent names to page elements enables re-use of page components and their styles with little or modifications. In line with this argument, Even HTML5 , in a major change change over its predecessors , is to introduce some structural tags viz. <article>, <section>, <header>, <aside>, and <nav> [What will HTML5 bring?]. Even with HTML 4(or lower), it is best to name standard sections of your page consistanly like in the simple example below…
Remember, Most pages on your project , end up having the same core structural elements. Identify these common core page elements ….
<div id="container"> <div id="header">...</div> <div id="nav">...</div> <div id="sidebar">...</div> <div id="footer">...</div> </div>
Reset Default Styles ( CSS Resets) : Whether you use a framework or write your own , you must provide CSS Resets [What are CSS Resets?], as they reduce or sometimes eliminate visual inconsistencies that occur between various browsers. In simple words the CSS Reset Mechanism sets the styles of HTML Element to zero or null values, thus overriding any browser default values they may poses. This provides a clean slate to set the properties of these elements void of any User-Agent Defaults [CSS2.1 User Agent Style Sheet Defaults]. All the CSS frameworks do have of reset mechanism. If you are writing you own CSS Resets, a word of caution is that if you happen to forget to reset a key property, It could lead to cross-browser issues, that are very difficult to debug. Remember, Keep a copy of the reset styles and drop them into each new project you create.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, textarea, p,blockquote, table, th, td { border:0px; margin:0; padding:0; }
Set Defaults (Baseline Styles) to Elements :
After you have set ( to zero or null) the default Values of certain attributes of certain HTML Elements, It is necessary to apply some styles across every instance of these elements. These default setting could vary as per the design or according the best practices you follow.
Most CSS frameworks, always introduces some new defaults, in addition to resetting default browser styles.
These defaults being void of the User-Agent Defaults( stripped away by the CSS Reset), these will be consistent across browsers .
Remember, Baseline styles are used to set styles that are going be used design-wide. eg .
html { font-size: 77%; font-family: Arial, sans-serif; } strong, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
Abstract Styles for Common HTML Components and Common Classes :
Most project consisting of several pages will have common HTML elements used across the site, for e.g. Some sort of forms, alerts and errors , Custom Popups, LightBoxes etc. Since such components are used over again across projects, It will be useful to provide a set of classes associated with predefined styles for these components and you can save yourself a lot of time.
Apart from defining reusable styles definitions for the common HTML Components , we could abstract styles classes pertaining to typography, color or even layout. I myself tend you use … common classes like Clearfix, Font08, FontGrey, AlignL, DisplayB etc.
form input{ border:0px; background:#ffffff; padding:0px 10px; _padding:0px 0px; height:26px; color:#000000; line-height:30px; font-size:1.1em; } form textarea{ border:0px; background:#ffffff; color:#000000; font-size: .9em; line-height:1.5em; overflow:visible; } .fbold{font-weight:bold; color:#cccccc;} .fgrey{ color:#666666;} .flightgrey{ color:#bbbbbb;} .clearfix {clear:both;} .divider{border-top:1px solid #647B06; border-bottom:1px solid #9CC00A; height:0px; } .displayb{display:block;} .displayn{display:none;} .alignr{text-align:right} .alignc{text-align:center} .floatr{float:right; } .floatl{float:left;}
Fixes to common browser quirks
Various browsers implement CSS code and provide varying level of support for the CSS specifications. The result of this …. “Browser Quirks”, that we developers are left to tackle. Especially, IE6 haunts most CSS coders with a deadline to meet. The good news is experience has brought together possible REUSABLE fixes to these issues ( Often termed as CSS Hacks) .
Remember , Keep these hacks/fixes handy
/* The following zoom:1 rule is specifically for IE6 + IE7. */ * html .clearfix, *:first-child+html .clearfix { zoom: 1; }
Keep Refining Your CSS
- The habit of re-cycling will not come to you in day. It has to developed. So plan your Re-Cycling . Bear this in mind that you could abstract defaults styles, typography definitions, Layouts , HTML Element Styles etc. Try to think ahead.
- Also look back at your past projects, it will help identify styles that you tend to use often across porjects. Abstract it.
- Remove any unused styles. This practice will keep your CSS framework from a common symptom called “Bloating” -
- Remove repetitive styles .
- Build a set of styles that are flexible enough to port it across projects.
A Look At CSS Frameworks
Finally. If you are inspired and intend to use one or more of the CSS frameworks, Heres is quick list of a few popular ones ….
- 960 Grid System : The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are three variants: 12, 16 and 24 columns, which can be used separately or in tandem. Thought nothing that you cannot create one for your own easily enough, The framework provides grid templates for print in PDF format, that one can use to sketch your page designs.Bet , It would make a professional impression , if you carry a few sheets when you go to a client for UI requirements gathering. It also provides basic grid templates for popular design software like Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc. providing a “starter for ten” to begin your design work.
- Blueprint : Blueprint provides distinctly classified CSS files for Resets, Grids, Forms, Print, Typography , Plugins for buttons, tabs and sprites etc. It also provides support for IE as a separate include.
- SenCSs : Unlike the above two, SenCSs ( pronounced Sense) , doesnt have CSS definitions for Layout. It does include fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.
- BlueTrip : Its original claim to fame was that , it was a combination of the best features provided by other others frameworks like Blueprint, Tripoli … from where it gets its name. Its feature set includes 24-column grid, typography styles , orm styles, print, buttons etc.
- YUI Grids : Brought to you by the Yahooo Developer Network , supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. As you can see , Its technically just the layout Components. YUI also provided HTML/CSS sets for other page elements
- YAML (Yet Another Multicolumn Layout)
- Emastic
Remember , using CSS frameworks doesn’t imply that you are lazy to create one of your own … It implies that you are smart to learn from others experience & mistakes , SAVE TIME and INCREASE PRODUCTIVITY!!!!

