Re-Cycling CSS : A Look At CSS Frameworks

May 20th, 2010 by Nikhil

Re-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!!!!

Tags: ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


2 Responses to “Re-Cycling CSS : A Look At CSS Frameworks”

  1. Thibaut Allender Says:

    Thank God I was not drinking anything while reading this, would have spitted it out.

    How come can you recommend using class names like “thatcolor” or “stuffright”?

    Don’t you remember style sheets were created to separate content from presentation? What’s a class name? Content. Is it right to put a position or a color in it? Nope. You separate thing to re-entangle them another way.

    One day the “floatr grey” block will turn to red and go to the left. Then you’ll ask your “Why the hell did that developer name his class “grey” and “right” while this block is red and on the left?

    Convinced? I Hope so ;-)


  2. polar f4 Says:

    This post is impressive! I’m gonna put this in the bookmarks before I lose the link I don’t believe I’ll ever find my way back here again otherwise


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter