Are CSS frameworks evil?

21 September 2010, in CSS, HTML, Tools | 75 comments »

CSS frameworks have a tendency to be dismissed by many CSS authors; code bloat and non-semantic class names are usually at the top of the list of reasons why. Even without ever using one, I shared the same opinion, but that might have changed after trying a few of them out while doing some research recently…

Existing frameworks

There’s an abundance of CSS frameworks out there, from the simpler ones that only provide layout solutions to ones that include forms, typography and fluid layout modules.

From what I can tell, designers and agencies that work with frameworks on a regular basis tend to use either Blueprint CSS or 960 Grid System (often abbreviated to 960gs). Yahoo!’s YUI Grids is also a popular one. These were the three frameworks I experimented with.

Preconceptions

I had frameworks all figured out: they were for CSS authors who wanted to go with the easy solution and not create their own CSS foundations, or for those who didn’t really want to understand how CSS works — basically, anyone looking for an easy solution.

If there is one thing I dislike it is purists who aren’t open to other people’s ideas and that never change their minds. I love CSS and I can be a purist in some cases, but I also understand that not everything can be perfect and sometimes stylesheets are messy. We all aspire to create beautiful, clean code, that is semantic and valid, but when working on real projects, that keep being updated, where more than one person at different times edits the CSS, each one with their interpretation of ‘perfect’ and with their own different level of expertise and experience, efficiency usually takes precedence over the purity of the code.

But I digress. What I mean to say is that sometimes we can use the odd non-semantic class name and no puppies will die. This is what frameworks are often criticised for. Class names like ‘grid_16‘ or ‘span-8‘ are far from being ideal, but given the need for being adaptable to any kind of project, they make sense (in most cases at least).

These non-semantic class names can be paired with better ID names (like ‘class="span-8" id="aside"‘) or, when using HTML5, with semantic element names.

While I was trying these frameworks out, I asked a few questions on Twitter (mainly complaints, to be fair), and, even though this is not scientific, most people seemed to reprove the use of frameworks. I seem to remember someone even saying they are ‘useless’, and many more negative comments. Two or three people said they used them though, and were very happy about that (opinions diverged on which one).

Wireframing

I always had the idea that frameworks would be quite useful to create wireframes on the browser, so that was what I decided to replicate with Blueprint, 960gs and YUI 3 Grids, using a very simple layout.

Blueprint

The Blueprint CSS framework was created by Olav Bjørkøy and released in August 2007. It is usually considered to be the most comprehensive CSS framework, since it caters not only for grid-based layout creation but provides, and has, a solid typographic foundation, considering aspects like vertical rhythm. It also provides a reset and print stylesheet, and basic styling for forms.

The framework uses by default a 24-column layout (each column spans 30 pixels and has a right margin of 10 pixels) but you can create different layouts by using the compressor included in the files.

Using Blueprint is as easy as including a wrapper with a class of “container” surrounding the remaining blocks on the page. Depending on the width of each of the internal containers, you need to use a class of, for example, “span-24”, for a div that spans across the entire width of the page, or “span-8”, for a block that spans across 8. If the container is the last one within a particular container or column, it should also include a class of “last”. The HTML for a the layout above would look like this (I have omitted the content, of course):

<body>
	<div class="container">
	
		<div class="span-24 b">
		</div>
		
		<div class="span-6 b">
		</div>
		
		<div class="span-18 last">
		
			<div class="span-15">
		
				<div class="span-15 last b">
				</div>
				
				<div class="span-9 b">
				</div>
				
				<div class="span-6 last b">
				</div>
				
			</div>
			
			<div class="span-3 last">
			</div>
			
			<div class="span-18 last b">
			</div>
		
		</div>
	
	</div>
</body>

I’ve also added a class “b” (pardon the presentational name) to the divs that have content so that I could add a light background and some bottom margin to preview the wireframe better (we’re just doing a quick example here, so it’s OK to include this directly in the head):

.b { background:#d4d4d4; margin-bottom:10px; }

Here’s a screenshot of the completed wireframe:

This took me less than 10 minutes to make (I know it’s pretty basic though), including having a quick read through the Getting Started guides.

960gs

The 960 Grid System CSS framework was developed by Nathan Smith and was released in March 2008. This framework was developed with a strong focus on the grid; even though it provides basic typographic styles, its main purpose is to deliver a cross-browser foundation (it has full A-Grade browser support, as defined by Yahoo!) that allows for many variations of the most common grid-based layouts.

For 960gs I’m going with an even simpler layout — the main idea here is to show the differences between class naming and nesting from framework to framework.

The framework works, by default, on either a 12 or 16 column grid. We need to add a container surrounding the inner blocks with a class of “container_16” (or “container_12”); the inner containers should have classes of “grid_16”, “grid_14”, etc., depending on how many columns they span. Here is the final HTML markup for our simple layout:

<body>
	<div class="container_16">
		<div class="grid_16 b">
			Header
		</div>
		<div class="grid_4 b">
			Sidebar
		</div>
		<div class="grid_12 b">
			Main content
		</div>
		<div class="grid_16 b">
			Footer
		</div>
	</div>
</body>

And this what you should see:

As with Blueprint, there are several tools online that allow you to configure the framework to your needs. Fluid 960 Grid System is based on the original 960 Grid System, but allows for fluid and fixed layouts, and includes basic styling for elements such as navigation, tables, forms, articles and typography.

YUI 3 Grids

The YUI 3 Grids framework is part of the Yahoo! User Interface Library (YUI). The library includes JavaScript resources as well as CSS (YUI 3 CSS also incorporates reset and typography stylesheets). It works in a similar way to the other frameworks presented in this chapter, with a difference: there is no predefined width for the main container, only predefined “units” in which a container can expand within another container.

In this case, we need to add the desired width to the body element of our page, as such:

body {
  	 margin: auto;
  	 width: 960px;	
}

The “margin: auto” property will centre our content on the page. Next, as with the other frameworks, we need to include a wrapper container with the class “yui3-g”. The containers within it will take class names based on the percentage of the width they should fill (or “units”). So, for example, if the sidebar takes up one third of the total width, it should have a class of “yui3-u-1-3”, and if the main content area takes up two thirds of the total width, it should have a class of “yui3-u-2-3”. YUI comes with a set of predefined unit classes (which are listed in the framework’s website).

The final example would have the following HTML:

<body>
	<div class="yui3-g">
		<div class="yui3-u-1 b">
			Header
		</div>
		<div class="yui3-u-1-3 b">
			Sidebar
		</div>
		<div class="yui3-u-2-3 b">
			Main content
		</div>		
		<div class="yui3-u-1 b">
			Footer
		</div>
	</div>
</body>

Looking like this:

Notice that YUI doesn’t have gutters between the columns — I see that as a downside.

My favourite

For me there’s a clear winner and it’s Blueprint. The guide was clear, it provides lots of tutorials and examples from within the front page of the website, and the fact that it provides a good typographic foundation is a major advantage.

Another advantage of Blueprint is the community behind it, which is constantly creating and releasing new plugins, themes and other tools that can be used in conjunction with the basic framework.

I felt 960gs‘s logic a lot harder to understand; it took me more than 30 minutes to figure out how the framework worked and finish the layout. If I’m going to use a framework I will be doing it to save time, so I didn’t find that experience very nice. Also, contrary to Blueprint’s website, 960gs’s didn’t have a clear ‘getting started’ tutorial, so I had to look for articles outside of the site to ‘get started’. I do like the Fluid 960gs framework, but I’m not sure if there isn’t something similar for Blueprint.

Most people that I’ve talked to while doing this little experiment mentioned that they didn’t really appreciate frameworks, but the ones who did, swore by 960gs, so it might have been that I just wasn’t introduced to it the right (or simpler) way. There are beautiful websites built on top of this framework (a quick look at its website is enough proof), like the gorgeous Black Estate Vineyard:

The fact that YUI is adaptable to any width is a major plus, but the reduced amount of unit combinations made it a little uncomfortable to use, and I felt somewhat restricted as to what I could do with my layouts. If this is incorrect, I’d love it if someone would let me know, I couldn’t find a way around it easily in the getting started guide.

Conclusion

I’ve mentioned above that I believed CSS frameworks to be ‘the easy solution’. I still think that’s true, but I don’t see it as a bad thing: why spend hours creating perfectly hand-crafted CSS layouts when there are excellent foundations that we can build upon already out there? Life’s not just about coding (really) and there are better things that I can be doing with my time than creating problems for which there are solutions already.

This doesn’t mean, however, that I believe everyone should be using existing frameworks in their projects. Ideally, you’d be working with your own framework or template, adapted to your needs. It just means that I don’t think CSS frameworks should be treated like a bad thing and they can definitely be useful in some cases, or even as a base or inspiration for creating a custom framework. And I will certainly not condemn any designer or agency that uses out-of-the-box solutions, like Blueprint, because the benefits that you get from using those can surpass the downsides like verbose stylesheets and non semantic class names.

Don’t get me wrong: I thrive on a good piece of semantic HTML and CSS, and like most of you I also wanted to throw up the first time I looked at the non-semantic classes that these frameworks use. I will look at you sideways if your navigation is a paragraph rather than a list and I may unfollow you on Twitter if I know you’ve ever used class names like “redLink”. I still believe that the non-semantic class names are the least desirable feature of frameworks; ideally we shouldn’t have classes like that in our stylesheets, but I also think there are times when we need to be flexible and adapt ourselves and accept that things like this will happen.

Maybe they are a good solution for quick or low budget projects, or prototypes (although prototype code will often move on to production, so beware if you’re especially lazy, like me). I just thought this would be a good topic to discuss, and I guess I don’t mind saying that I like stuff people usually get repulsed by, so here.

My verdict: no, frameworks are not evil.

So my question is, have you ever used a framework? Do you agree that they are a great tool, or have I gone crazy? I’d love to hear your thoughts.

There are 75 comments:

  1. Great article, as always. If nothing else these are all great frameworks to get ideas from for your own framework. Your own framework would only include code that you actually need, and that bypasses the biggest downside of a framework available publicly, in that it needs to be everything to everyone.

    I think in these instances the semantics of the class names is really a non-issue.

    I don’t trust anyone who uses underscores in their class names though…

  2. Andrew Fox says:

    Have you taken a look at Less (the other Less) http://lessframework.com? Seems less rigid than the others.

    How’s that book going?

    • inayaili says:

      No, I haven’t. I will, one day.

      The is, er, going. Slowly (this research was actually made for the book).

    • Reda says:

      edit: sorry i thought you were talking about Less compiler (never heard of the less framework before! )

      Less (Lesscss.org) is not a css framework but a css compiler (or generator). I actually use it with a “Lessified” version of blueprint, so i can have semantic class names and hide the “spans” “pushes” and “pulls”. This combo works great for me.

      • Andrew Fox says:

        Someone made a really crappy decision when they thought it was a good idea to call their framework Less. If these were companies a lawyer would be getting quite excited right now.

  3. Cisco says:

    “.. when there are excellent foundations that we can build upon already out there? ” Excellent?
    I have never seen a bad code like code maked by css framweworks.


    04
    Header
    05

    06

    07
    Sidebar
    08

    09

    10
    Main content
    11

    12

    13
    Footer
    14

    Madness! Ecellent solution?
    I can understand the utility of a framework, i’m in love with Rails, but hey, we’re talking about CSS, not a server-side language, OOP, or any hard to understand language.

    It’s embarrassing!

    Totally wrong markup and you don’t have any idea how it works.

    Header

    Sidebar

    Have to spent other words?
    Excuse me, this articles chrun to me :P

  4. James says:

    To be honest, the extra classes really annoy me. Granted, the layout is pretty solid but I’d rather code it myself.

    As Cisco says, people might not have any idea as to how different elements are reacting when they use a framework.

    It’s horses for courses but I’d go with coding something yourself. At least then you learn about how things react together (floats etc) and also the many funny little bugs (IE6 I’m looking at ya!) adding loads of fun to the mix!

    That’s just me though :)

    • inayaili says:

      “people might not have any idea”, just as people might not have any idea how JavaScript works before using jQuery, that’s each person’s choice, I suppose.

      I prefer to do things myself too, but I guess it’s just good to acknowledge that in some instances using a framework is not the end of the world.

  5. The major benefit to me of frameworks are the speed of rapid prototyping and deployment. I work in a sector that doesn’t allow for a huge amount of thinking and contemplation time, it basically has to be built as soon as I start working on it. Frameworks let me mark up a cross-browser solution very quickly.

    I’ve always favoured 960.gs over the others you outlined, mainly due to personal preference.

    The LESS framework is certainly interesting too, I will be adapting it into my workflow for mobile enabled sites.

    Frameworks: A great bunch of lads.

  6. Cisco says:

    @inayaili
    wait: css are not js. No objects, no if then. no function. Is totally different.

  7. Jamie Newman says:

    Good overview, however I think that while CSS frameworks may not intentionally be evil, bad things will still happen because of their existence.

    I can see how they can be useful to quickly construct layouts, but worry that by being around they will create a wave of “front-end developers” who don’t really understand CSS layout or cross-browser/device nuances.

    We’ve seen the same thing with those who call themselves JavaScript developers, when they really only know jQuery and don’t actually get the language, quickly becoming unstuck when they have to do more than configure a plug-in.

    CSS frameworks should be a tool for developers who understand what happens behind the frameworks to quickly mock up a layout, and not for non-developers to write front-end code with little/no understanding of how things actually work behind the scenes.

    As for the non-semantic class names, they make me nauseous and I won’t be using them for that sole reason :)

    • inayaili says:

      I completely agree with you, Jamie.

      Have you tried using a CSS framework though? I guess it’s an acquired taste. Like caviar. And some people have a stronger gag reflex than others.

      See you at the boat?

      • Jamie Newman says:

        I haven’t, but I’m worried I’ll like it and fall into bad habits.

        I’m pretty certain I’ll be on the boat, catch up with you then.

        • Diegomonzon says:

          I think CSS frameworks are not enough to make a web design. I use Blueprint to make the main layout , but I end up making my own classes. So I have to understand CSS anyway. not like a jQuery plugin

  8. Cole Henley says:

    Good introduction to grid frameworks Inayaili.

    I’ve personally only ever used/had to use the 960.gs. Agreed not the most intuitive at first but once you get the basics you can’t go very wrong. Encountered front-end developers who refuse to use them but if they want to lost time/money on jobs creating their own bespoke layouts that’s fine with me – as you rightly point out the examples on the 960.gs site show that there are plenty of beautiful sites out there built on grid frameworks that don’t look formulaic, rigid and off-the-shelf.

    You mentioned “the fact that YUI is adaptable to any width is a major plus”. It is worth noting that the 960.gs website has two invaluable links at the top of the page that can often be overlooked: a custom CSS generator (customisable by columns, gutters and width) and a snazzy layout generator based on the framework.

    Now you’ve touched on grid frameworks I’d defo be interested in a follow up article on typography frameworks!

  9. Cisco says:

    @@Robert Stringer
    seriously talking about speed: debug the code came out from the framework take more and more time instead your own code. Because the classes and id have no sense. Did you really saved time? No. it’s an initial illusion. When you have to make changes, or debug, or insrt your own components (and always happened, always) the time spent increase exponentially.

    • No. The framework’s structure is the same from project to project. As outlined in the examples above, you can quickly mark up a site, pour in content and then style to match the client’s expectations.

      Rewriting CSS each time is only going to add to your project overhead. With 960, I don’t even have to think about my mark up process.

      Once you become familiar with class names, you use them. If you don’t want to use them, then don’t.

  10. Cole Henley says:

    Certainly agree with those comments saying that frameworks can be dangerous in the inexperienced. There is a lot to be learnt from building your own layouts and these should really be used as tools overlying a basic understanding of CSS layouts.

    Saying that, since using grid frameworks in our builds the amount of time spent browser testing has been significantly reduced which is no bad thing (although that might just be a reflection of my coding ability).

  11. Rob Winters says:

    Long time reader first time poster :)

    I dont like making changes to my carefully crafted HTML to meet the demands of a CSS framework. But I also completely agree with you that in a fast paced working environment, purism needs to (sometimes) take a back seat. So frameworks definitely have a place. My only experience is with YUI which I’ve used for rapid prototyping.

    JS frameworks on the other hand very rarely make demands on markup so come the revolution I’ll let them live.

    Great post as always.

  12. James says:

    Nice article. I’m sure there is a lot of divide in this subject. I dont get on with frameworks as i prefer pretty, clean and semantic code, however I do use the 960 psd’s for design which are marvelous!

    As I say each to their own, as long as it works, does not consume too much time and the dev is happy then it does not matter really.

  13. “CSS frameworks should be a tool for developers who understand what happens behind the frameworks to quickly mock up a layout, and not for non-developers to write front-end code with little/no understanding of how things actually work behind the scenes.”

    Nail on the head there Jamie.

    My Front-End Dev career is pretty young (approx. 1 year professional), but I’ve purposely steered clear of frameworks (for now). Not because I’ve got a disliking for them, but because I realised they were a shortcut that I would later regret. Instead, I’m writing bespoke CSS, and although it takes longer, at least I’m doing it knowing I’m learning browser / device quirks from the core; and not through the eyes of a framework.

  14. Hi,

    I’m a web developer but by no means an expert in CSS. I usually code Ruby on Rails, HTML and JS and get the stylesheets handed over together with the markup or markup templates..

    I think any tool in the hands of the unexperienced can be dangerous: PHP, Ruby on Rails, jQuery, CSS frameworks…

    In the case of CSS frameworks, I also don’t like the fact that the markup includes non-sematic classes. It just doesn’t feel right.

    That’s where compass fits in: http://compass-style.org/

    It’s built on top of SASS (http://sass-lang.com/) and it enables you to remove those non-semantic classes from your HTML and put that info in your SASS code, by porting the CSS frameworks to SASS and implementing the functionalities of the framework as mixins.

    Example:

    Let’s say you want the sidebar to span over 4 columns.

    In 960.gs you would have to do something like this:

    Sidebar

    Using compass + 960.gs you could do something like this:

    HTML:


    Sidebar

    SASS:

    .page{
    @include grid-container(12)
    }

    .sidebar{
    @include grid(4);
    }

    So with compass you can effectively separate layout information from yhe markup. If someone decides that the sidebar should span over 3 columns, rather than 4, they update the SASS code and you are done. No need to go over all the HTML templates for all the views and change the markup which would be a pain in the ass.

    Another advantage of using Compass is that you can just use a part of a CSS framework. You can just import the grid functionality of Blueprint gor instance, thus keeping you CSS footprint small, using just what you need.

    To find out more about compass: http://compass-style.org/docs/

    I hope you find this info helpful.

    Cheers!

  15. Ok, I’ve given up including HTML markup in the comment.

    Please find the example in this gist: http://gist.github.com/591505

  16. No problem, Yaili, I should have used a gist from the beginning. :)

  17. I tried them for a while but my big issue was that any framework I used just lengthened development time by causing me to think about the project in a way that was unfamiliar. I have my own ways of doing things and thinking in someone else’s way can disrupt your understanding of a project.
    The one part I have kept from one framework for all projects, though, is a good stylesheet reset to begin with.

    • inayaili says:

      I agree, and that is why I had problems with 960gs. The thing is that if you’re working within a large team you have to adapt yourself to other ways of writing code, there’s no choice. Having a framework in place (be it bespoke or an existing one) helps remove part of the problem.

  18. Jayphen says:

    Using a CSS framework in this way is terrible for anything outside of prototyping. You may as well be adding inline styles to all of your markup, because it’s essentially the same thing. Unfortunately, many front-end developers are abusing these frameworks without any forethought. Maintenance will become a nightmare further down the track. It seems some people are too quick to forget the reasons we separate markup from behaviour and style in the first place.

    As mentioned above, SASS & Compass solve the issues with semantics as well as offering a range of other extensions to the language (variables, mixins, nesting, inheritance).

  19. Matt says:

    Off the shelf CSS Frameworks like other frameworks can cause unnecessary bloat by leaving lines of unused code. The solutions to this are simple – either cut down to size (Before or after development with a little efficiency help from Firebug) or create a lightweight project specific grid; there are plenty of services that do this (My favourite – http://www.spry-soft.com/grids/).

    I don’t agree to comments about grids not being semantic as layout (divs and spans) is not semantic (ignoring HTML5 as it isn’t finished) and adding extra classes – maybe to WAI-ARIA spec – soon remedies that if you have any issues.

    If you’re an efficient programmer with an interest in quality a grid can really speed up the development of HTML flats.

    • Jayphen says:

      If you want efficient development, try tables.

      Oh wait, there was a reason we moved away from that way of developing. Can anyone remember why…?

  20. Mal says:

    I have only really tried the YUI framework and also found it to be clunky, so will check those others. It seems like everything is becoming abstract, whether it’s server side languages, Javascript or CSS. The tricky part is selecting a framework that is popular enough to avoid being stuck in a rut, yet flexible and light enough to speed up the implementation (which is often the new, obscure ones).

    It’s quite a mindset change, giving up so much control to a framework – especially on the server side, but the benefits far outweigh the initial pain. Like others have said, it’s troubling that people are starting their careers by developing on frameworks, rather than learning the underlying technologies. Let’s hope their frameworks of choice don’t fail them.

  21. David Turner says:

    I got introduced to the 960 Grid System about 2 years ago. I found it to be a great tool for getting a site layout put together quickly and easily.

    I don’t have a problem with Grid Systems, they definitely have their place in the toolbox, but I have really grown to dislike all the extra classes. I know them well and I understand why they’re there, but they irk me.

    I’ve found that making use of LESS, which you’ve looked into before, along with some a handful of mixins affords me the best of both worlds. I can define a width of my own choice and can also apply the element dimensions directly to the elements I want without the need of any extra classes. I’ve found that this gives me all the capabilities of the framework I know, all the flexibility I could want and completely removes a huge chunk of CSS so it improves loading times too (due to less to load).

  22. shadowhand says:

    I’m surprised that Bluetrip ( http://bluetrip.org/ ) was not mentioned at all. I find it combines the best aspects of Blueprint with better styles for forms and typography.

    • inayaili says:

      Like I said, I only tried the ones that are used by the majority of people. It doesn’t mean these are the absolute best.

    • Tom Hermans says:

      Indeed, Bluetrip brings a very versatile toolkit, prefer it over 960.gs and the rest.

      About the frameworks, normally you use the reset (which you used anyway) and the easy columns provided and a few clearfix-rules.

      Extra css-code you don’t need, you just throw out.

      The use of a css-framework doesn’t mean you don’t have to know css, or you don’t have to write your own id and class-selectors anymore.

      Like said, the framework is just a little bit of solid foundation..

      People who write their own stuff also borrow all kinds of hacks or code solutions they’ve seen to make the site work in the different browsers… the same thing, only they call it “their” work..

      T.

  23. Amy Haywood says:

    I started using Blueprint 3 years ago when the company I was working for started asking “How can we do things smarter (and faster) not harder?” I continue to implement it (or at least some variation of it) in every site I build.

    The selling point for me was the amount of time it cut down in cross browser testing.

    I think the system will eventually need to change, though, as more thought is put behind cross platforms and responsive web design.

  24. I’m author of several layout CSS Frameworks Emastic http://code.google.com/p/emastic/, Malo http://code.google.com/p/malo/, The Golden Grid http://code.google.com/p/the-golden-grid/ and 1 line CSS Framework http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html.

    1) CSS Frameworks are bloated. Not true! Malo is about 0,25 kb and The Golden Grid is less then 1kb. And you can build hundreds of grid combinations.

    2) CSS Frameworks have non-semantic class names. What is semantic anyway? Semantic = meaningful or to give mining. How you can build 12,16 or 24 grid meaningful naming system? Here is my naming system(Emastic) dl20 = div left 20em, maybe it is not beautiful naming system but is meaningful ( or in Greek = semantic) and keeps HTML and CSS short. Shorter HTML and CSS = shorter download speed.
    Shorter download speed = happy user.

    3) Yes it is true.You can’t do miracles with CSS Frameworks. And you shoud adapt to there way of coding.

    4) The benefits from CSS Frameworks are that there are the best and the smartest way to organize your CSS code. Imagine that with only 1kb of CSS code you can build hundreds of possible layouts and with the traditional CSS code writing you need at least 10 kb.

  25. Good post!

    I am trying out a framework for the first time (960) and there are things I find appealing about it – like everything being perfectly measured for me. I can build my own easily, I know my CSS. The problem is time. I have to build 2-3 complete sites in a work week (from slicing psd to finish)…I need speed.

    For those that are the purists, I have a question. Do you think the HTML5 Boilerplate is crap too? It’s basically a starting point framework. It just seems silly to me on not wanting to speed up your development time. Where do you draw the line? “I must…write… everything myself.”

    I certainly can, but I’m not going to create my own reset stylesheet when E. Meyer has an awesome one already set to go. This goes along with what level of abstraction are you comfortable with?

    I am going to assume that some of the comments above also think js libraries are garbage too? Basically the same thing as a framework.

    If a client comes to 2 developers with the same amount of skill, but 1 can do it in half the time because he uses a framework, which, I wonder, will the client choose? He/she won’t be able to tell the difference. Other developers who view the source will, but not the guy paying the bills.

    I love what I do, but I am in it for the money. If something can make my dev time faster, I am willing to check it out.

  26. If one can call Drupal’s themes a CSS framework, then yes, I’m using it constantly at work :)
    The beauty of overriding CSS in Drupal is implemented very easily and the choice of themes (CSS frameworks to say so) is impressive!

  27. Reda says:

    I think that CSS frameworks shouldn’t be used as is (at least for the semantic reasons).
    I see the future of these as written in compiler syntax (like Sass Less…etc) then the compiler would spit out “production” CSS.
    These compilers will rule until future CSS versions are more behavioral.

  28. Hi,

    Before all…. Congratulations, its’ a really nice article.

    About CSS frameworks, I really never use it. Not because I don’t think they aren’t good. I also don’t believe that they are evil.

    It’s just need look to a framework like jQuery or mootools and see what they did with the use of javascript in the websites. Like js there’s out there another bundles of frameworks for PHP and so on…

    The real truth is that I think that people start to notice about CSS few years ago, I don’t know perhaps 4 or 5 years and now it come to be a mainstream (that doesn’t mean that isn’t a good thing) concept on websites. That’s the reason why CSS frameworks are appering.

    For me I just don’t use any because I think that I would lost more time learning how the framework works that making job done.

    I also want to mention about a framework of CSS3 and HTML5 that it’s called 52 framework, do you know him already?

    http://52framework.com/

    I think will try to use and learn when I realize that I got more time.

  29. Mark Perkins says:

    Just a minor point of note on your statement that “These non-semantic class names can be paired with better ID names” – the only slight issue with this approach is that the spec states that user agents can infer meaning from class names but not from ids, so having semantic ids is of less use (no use?) than having good, semantic class names.

    However when paired with one of the new HTML5 elements (as you mention) this may indeed be a moot point.

  30. kureikain says:

    I think CSS frameworks are evil!
    They are not semantic at all! Such as when you need change something about layout, you must change html code!

    If you did it correctly, you just need to change css!

    Thing such as span_1 span_2 ….is dumb!

    • I think the author should add a note somewhere advising of the possibility to use Compass or Less or nLess to avoid having to use classes such as span_1 in your html markup, thus getting rid of comments like the one above.

      Cheers!

  31. Martin says:

    I always thought that those frameworks mentioned in the article though are just css grid frameworks, while Compass will save you time and effort when you have some experience with it.

  32. Martin says:

    By the way, what do you mean by semantic class names anyway… it’s up to you

  33. Henrique says:

    It’s designing with tables all over again…

    Designers finally figured a way around using CSS with semantic markup. The wrong solution always wins! :P

  34. Rvision says:

    I really don’t understand your decision: that blueprint markup is so crappy – I have no idea what content goes where and why… a lot of classes and bloated markup.

    Tried 960gs and loved it. I have my own CSS grid generator with naming convention from 960gs and I am using it for site widths other than 960px.

  35. cpinto says:

    Chiming in from another camp (programmer), these frameworks are time savers. TBH I don’t understand the differences between each other much, but I don’t really care either, it’s all po-ta-to vs. po-tah-to to me. And no, a few extra CSS classes do not bloat the code of your otherwise pretty standard website, certainly not for your browser, nor your internet connection or your server so… it’s a moot point.

    My gripe with these is that they only deal with layout (well, except for Yahoo’s), so the accurate name is grid framework not CSS framework. A framework should provide a bit more, in my opinion. That way one can just reuse the standard framework widgets (think nice buttons, etc.) + layout features, tweak some colors and launch a site. Those are the benefits of a nice framework.

  36. The web should be fully redesigned in CSS – all the legacy table based layouts need to be destroyed and we need to start over! Who’s with me? Wait.., i’m not even with me. =)

  37. Matt Sweeney says:

    YUI 3 Grids is designed for maximum flexibility with minimal overhead. There are no longer default gutters due to user feedback regarding the challenges of undoing hardcoded gutters.

    In general, styling the content of units is preferred over styling the units directly, allowing borders, padding, and margins to be grouped with background and other styling. Move the “b” class in the example above to a container inside of the unit and apply a right margin for gutter spacing.

    This examples demonstrates a basic layout with gutters:
    http://developer.yahoo.com/yui/3/examples/cssgrids/cssgrids-fixed_source.html

    This one has a gutter on the right column only, and also demonstrates horizontal and vertical alignment, one of the advantages of inline-block over float:
    http://developer.yahoo.com/yui/3/examples/cssgrids/cssgrids-align_source.html

  38. drixie says:

    There is something about frameworks.

    After building one or two sites with them, you realize you need to do some extra-customization to suit your taste… and after that, you end up with your own custom framework.

    Frameworks are what they are… frameworks. They are meant to provide a solid foundation for further customization. People with no social life, who really dont like to see the sun can spend all day building everything from the scratch. People like us want to code and also enjoy life, so we use frameworks.

    On more thing. I use a customized version of Blueprint. After the first project, I stopped using the grid system for the next 6 projects (thats where the non-semantic class names are). When I get a news-website project in the future, I’ll definitely pick up the grid system. Stuff should be used when appropriate. People should stop hating for hating sake.

  39. Marcio BDA says:

    Good point about CSS frameworks. I still dislike them. But Im using html5 boiler plate since last week, and Im loving it. Have you tried yet?

    • DRoss says:

      HTML5 boiler plate is MUCH different than a css framework. It’s showing you good practices to use while building an HTML site. The css they suggest is not a framework but is more to resolves cross-browser issues rather than create divs and crap all over the place for you that you probably won’t need with a css framework.

  40. Jesse says:

    I think frameworks are a great tool to have in your toolkit, because they save you time. I personally prefer the Bluetrip CSS framework; it’s a mix of Blueprint and Tripoli and it has some great pre-baked icons.

    Still, whatever floats your boat.

  41. DRoss says:

    CSS frameworks are for the lazy or beginners. An experienced front-end developer has no need for a framework and it actually adds to the amount of time you’d spend building a site if you just know how to build a site yourself in the first place.

  42. I’ve been honing a mashup framework for myself. I like Bluetrip, except for all the extra grid classes. Then I moved to Baseline because it appeals to the old designer in me. Plus, it’s HTML5-ready.
    Recently, HTML5 Boilerplate was released. I’ve mashed up this HTML5 framework, with my own tweaked Baseline mashup for an ‘unstyled’ starter package.
    Since I’m a Typekit fan-girl, my font-stacks are very simple so I can override my base CSS w/client-specific kit.
    I also like to keep classes and IDs to a minimum, preferring descendent selectors when possible.
    Less.app makes this all easy peasy!

  43. Sven says:

    to me, this is perfect http://binarybonsai.com/code/lessgrid/
    add the HTML5Boilerplate on top and your good to go.

  44. Have anyone tried EZ-CSS Framework http://www.ez-css.org/

  45. adnan zulkarnain says:

    dislike css framework..

  46. Effectively sums up why CSS Frameworks are unnecessary and overly-generalized, and you’d save time in the long run build from scratch.

  47. Pedro Moraes says:

    CSS frameworks are really usefull. I use linhaframework.com (portuguese) and love it, for now.

  48. Black estate vineyard is looking attractive… Nice usage of typography on it.

  49. Brendan Rice says:

    Nice article Inayaili, looks like you have touched a nerve going by the number of comments.

    I use 960 Grid System and hand rolled CSS before that. For me it is quicker using 960 GS and that is why I will be stickign with it.

    Purists are always going to disagree but when doing fixed price work time matters.

  50. frank says:

    Thank you for sharing.
    It is always a delight to feel what I believe – that information is inspiration

  51. I think CSS frameworks are very useful. Someone said you don’t know how they work…Well, read documentation first. I started using CSS frameworks some months ago, after mastering my CSS skills. I could do my own framework, but why doing some extra work?

    Frameworks are a good way to save time…

  52. As great as framework is I always find there is no greater framework then the one you right yourself.

  53. Jacques says:

    Thanks for this post – always good to ‘compare’.

    Wrote a case-study here: http://troisj.com/design/blueprint-jquery-case-study

    I chose BP as I had read about it before – no preference over any of the other ones – I looked at the tutorials, got it to work, which is why I kept using it.
    Mainly, as the site (intended for) is in tables (I know, we all messed up in 2001…) – I need a solid cross-browser framework – nothing much fancy, but it gives me flexibility (columns).

    To make your life even easier: http://toki-woki.net/p/Boks/

    As a non-CSS-purist I selected it for its robustness and practicality.

    PS – I’m not on Twitter, so you can not unfollow me there :-)

  54. Good review of many of the big frameworks available :)

    I can’t say I’ve been able to get into using any of these frameworks (though I have played with 960gs quite a bit). Your comment on creating your own framework is seems very important.

    One thing that has sped up my personal design process was setting aside some time to create several frameworks/templates that used semantic identifiers. Prototyping pages with those frameworks was a breeze (even if the dimensions weren’t spot on), and going back to modify the layout itself is pretty straightforward.

  55. Tony says:

    I know this is an old post, but whatever! :)

    In general, I find these most useful for team-based projects. I find that a lot of people who dismiss them do not think about that aspect.

    If the team agrees on a single framework then we all know what to expect as things are handed off. There’s no major differences in the way we’ve coded and styled things because we’re all forced to follow the framework’s core styling before adding anything new to it.

    I think the overall code is generally far more bloated than what I would like to do myself, but for the sake of group simplicity it’s a good compromise.

    A good example of this is at my work currently. I absorbed a project someone else was already working on and he’s not accessible whatsoever for questioning. While I certainly need to spend time understanding what he did, the fact that this is based upon a general framework and grid system allowed me to pick it up significantly more quickly.

    For stuff I do on my own, I really don’t see a need for it. I feel that I can code more quickly and easily for my own use, it doesn’t save me time or frustration at all.

  56. Dave Doolin says:

    Thanks for this overview, it’s very well-written and quite helpful. I like Blueprint quite a bit, and have considered checking out 960.

    Thing is, semantic is all relative. For me, something like class=”span-3″ is a perfect piece of semantic styling… within the context of laying out pages. It’s a like the semantic description of the “virtual graph paper” for the layout. Obviously, as you note, all such need a little more specification with respect to the content in the container, viz., semantic markup as usually understood.

    I expect sometime in the next few years, we’ll see css compiler which will take all the stylesheets, all the content pages, and emit an optimized single stylesheet. I’m hoping so, in any case.

    Thanks again.

  57. Kristof Vandommele says:

    Where I work, we use our own, custom grid system. While it’s a little more bloated then I’d like, it has some major advantages:
    1. Very quick blocking out of the main layout-structure.
    2. Time saving on repetitive work. There’s some demo-files/code of systems we tend to use again and again (navigations, sliders, modals…)
    3. We have 3 people coding front ends. When using the same gridsystem, we can quickly dive into a frontend build by one of the other frontenders: all 3 of us use the same html- &css-structures, so we quickly feel ‘at home’ in someone else’s project. Which was the main reason why I started building our system 4 years ago: to accommodate teamwork in frontend-development.

  58. Mike Duclon says:

    does anyone know of a simple way, without hard coding height to provide equal column height to any of the frameworks mentioned above?

  59. Depends on the framework. Bootstrap is pretty bloated but there are customizations to remove modules you won’t be using.

    Foundation is one of the most advance web design frameworks out there but has not support for ie 8.

Leave a comment: