Web development has come of age. No longer a new industry where vendors can get paid to figure it out as they go along, clients and managers expect rapid, efficient, and clean code from their developers on a wide variety of products and solutions. Most of us have swallowed our “I roll my own” pride and adopted many time-saving tools of the trade. One of the most important of those is the CSS framework. 

There’s a bit of a confusion as to exactly what a CSS framework is and what it does, and I hope to clear up most of that here. But be wary, fellow web developer, not all CSS frameworks are created equal and they can vary widely in what they do and for what purpose.

Yes, but what is a CSS framework?

Unfortunately, there isn’t a true consensus on what exactly a CSS framework is. Generally, it’s a starter set of (usually several) stylesheets ready for you to customize for your project. While some come close to being a true boilerplate or sandbox starter for your front-end markup, others are merely frameworks with a collection of classes that allow you to style your sites’ structure (columns, sidebars, etc.) by applying classes inline to your markup. This distinction is important since for the first time it allows you to essentially structure your new project while writing your HTML, nearly eliminating the structural styling step in your CSS.

For example: Before, you might have written some basic markup like so:

<div id=”wrapper”>
      <div id=”header”></div>          
      <div id=”content”></div>    
      <div id=”sidebar”></div>
      <div id=”footer”>
</div> </div>

Then you would create styles for each of those IDs to set their widths, floats, and relationships with each other. Markup with a CSS framework in mind is actually not much different than the above, but your widths, floats, and relationships are already included and can be added via a class or several classes like so:

<div id=”wrapper” class=”container_12″>     
     <div id=”header” class=”grid_12″></div>     
     <div id=”content” class=”grid_8″></div>
     <div id=”sidebar” class=”grid_4″></div>    
     <div id=”footer” class=”grid_12″>
</div> </div>

The above is an example from the first (and most minimal) CSS framework I used: the 960 grid system  The CSS that comes with 960.gs takes into account common layout problems with floats, gutters, and relationships, so that your prototyped sites and even production sites built using the framework are already robust. After only a short learning period of the class names, one can code up websites almost willy-nilly to near wire-frame perfection in a matter of minutes!

Types of CSS frameworks

The 960 grid system was my “first love” of CSS frameworks. It allowed me to structure a site quickly, but didn’t get in the way of my design and styles. It created a grid and that was about it. Since then, I’ve noticed new frameworks popping up all over the place. Most are variations on the 960 grid with some modernizations and boilerplate cross-browser fixes here and there. But others do a lot more than just structure your site; they start to delve into dictating your design styles as well and even adding common JS libraries.

The two CSS frameworks I’ll be diving into are commonly used here at Emerge: YAML4 (not to be confused with the non-market language of the same name) and Twitter Bootstrap. Which one you “should” use and how they compare is well-detailed in this article, but I’ll go over some additional differences and uses here.

YAML is a CSS framework we use quite a lot here at Emerge. To the uninitiated, it may seem bloated but as you work with it you realize the creators and surrounding community have thought of most of the things you will think of later; it’s already done already! YAML also comes in a variety of flavors already set up: fluid grids, column style, even a port of the 960 grid system! With YAML4, very well done responsive hooks were added and some of the code bloat was reduced resulting in a very workable out-of-the-box framework ready to style to your client’s or designer’s spec.

Twitter Bootstrap is what all the “cool” kids are raving about these days. At first, this may have been because “it’s what Twitter uses and Twitter is cool,” but with version 2, Bootstrap has earned its own reputation as a great web application developer and prototyper. With the LESSified version, it’s modularized, fast, and lean. What is perhaps its main drawback is that most Bootstrap sites look like Bootstrap sites (e.g., Twitter). This is because the style and design are not as well separated from the mark-up as they are in YAML4. While this doesn’t matter very much for prototyping and rapid web application development, it creates a hurdle when it’s time to bring your prototype into production.

Both of these frameworks have their advantages, disadvantages, and times when they’re the best fit, which is why we tend to use both here at Emerge, depending on what a given project needs. But in addition, the advantages of one can sometimes be used to address the flaws of the other. For example, Bootstrap is massively modular with LESS files, while YAML is not as much. The easy fix is to LESSify the YAML CSS files and create a base stylesheet that includes each module as needed, just as Bootstrap does. Another example is Bootstrap’s treatment of buttons and button styles. The markup is clean and intuitive but relies heavily on CSS3 gradients and styles which do not degrade well in older browsers, which is often a project requirement. Some work can be done to make these more flexible and divorced from design to give them greater flexibility to meet the needs of the project.

One flaw I’ve noticed with Bootstrap compared to YAML4 that some Bootstrap fans might see as an advantage is the absence of designating the framework’s classes with a prefix. YAML4 prepends all their class names with “ym-“, which at first seems bloated and is probably why Bootstrap doesn’t do this. But I’ve notice that the prefix allows the developer, especially one new to the framework, to distinguish between framework classes and classes set for specific project styles. This allows you to know which modular CSS or LESS file to check to make alterations and it also keeps the framework vanilla so as not to undo all of the work that’s gone into it.

Just because you own a calculator doesn’t mean you know math

My dad used to always tell me this and it certainly holds true for CSS frameworks as well. While they save time and provide robust foundations of code, CSS frameworks must still be understood to be utilized properly. Both YAML4 and Twitter Bootstrap allow for a very tempting startup to a website; just install and you’re done! But complaints of code-bloat, generic design, and inflexibility are clear indications of a lack of understanding. Knowledge of both CSS/HTML markup and the theory behind how these frameworks function is important to making them work for you—and your projects!

– See more at: http://www.emergeagency.com/whats_new/blog/2012/10/how_i_learned_to_stop_worrying_and_love_css_frameworks#sthash.VnqvxgKk.dpuf