Dave Woods - Freelance Web Design Warwickshire

The problems with using CSS frameworks

A CSS framework is a library of CSS styles which allow developers to reuse certain properties easily without having to code CSS from scratch. Initially when creating a web page they can save time but once you get involved in more complex designs, are they really all they’re cracked up to be?

If you’ve not tried CSS frameworks then YUI Grids is one of the more famous one’s but they’re popping up all the time with BluePrintCSS, Tripoli and Boilerplate are all worth taking a look at.

However, I’ve never personally understood why CSS frameworks are needed for projects as CSS itself isn’t an especially complicated language when compared to programming languages like JavaScript or PHP.

CSS frameworks are useful for creating quick, robust layouts and do prevent problems occurring especially in the cross browser department whilst for the most part have been thoroughly tested and will stand up to older browsers. But isn’t it better to understand CSS fully and what constraints some browsers have rather than relying on a framework to take care of any issues? How will a web designer feel about working on a project or debugging browser issues if they’ve been totally reliant on a specific framework for all their development projects?

Un-semantic naming conventions

If a web designer fully understands all the complexities of CSS and still decides to use a framework than that’s fair enough but I suspect that anyone that is experienced with CSS would just choose to create any code from scratch.

HTML and CSS work fantastic together because they separate the content from the presentation, however with the majority of frameworks this simply isn’t the case. Yes, they may well use class’s and ID’s appended to div and span elements but when you look deeper into how the code has been written, it’s no different to actually writing styles inline.

For example, take the following code:

class="column span-15 gutter-1"

Now assume that the column class is floated left, the span-15 class is 150px wide and the gutter-1 class applies a right margin of 10px. How is this any different to just writing the following?

style="float: left; width: 150px; margin-right: 10px;"

One does use an external stylesheet but whichever way you look at it, a designer is still going to have to go into the HTML code and change the class in order to alter the presentation, but isn’t this what CSS is supposed to be for?

Imagine if you’d created a site that had grown over the years to a 1000+ pages and you needed to tweak the width of one column? I’d much rather go into one CSS file and change the width of that ID or class rather than trawl through every page of the site and have to change the class in the HTML page.

Bloated CSS

When I’m creating CSS from scratch, I’ll only create CSS that I’m going to use. Sometimes I’ll also throw in an ID for generic messages like .error or .confirmation for example which I know may come in handy but the idea of CSS frameworks is that grids and presentational styles are created for a huge array of possibilities which in reality a web designer will never use on that project and therefore a large CSS file has to be served up to the end user despite only a fraction of it being used.

Summary

As you may have gathered, I don’t use CSS frameworks when it comes to web development and in the majority of cases believe that it simply increases the amount of code used and makes it harder for designers working on the project later to update and manage the code.

What do you think? Do you use CSS frameworks? Have they ever saved you time when developing websites or have they ever presented you with unexpected problems further down the line?

8 comments on “The problems with using CSS frameworks

  1. Jermayn

    Yeah I dont use them either, ive never been totally happy when using a framework or reset as I tend to spend more time fixing it to my liking than if I just created it myself.

  2. Paolo

    Yes I got your point and I agree
    Many of these frameworks are really too complicated and with many feature you don’t usually need in a project

  3. Stefan

    It’s true that class=”column span-15 gutter-1″ isn’t very sophisticated by itself. However, I especially liked the idea of generating those three classes dynamically to create really dynamic layouts. I’ve done a simple proof of concept with Apache Wicket (a component-based Java framework) and Blueprint CSS and it really worked great (Although I never used it for a serious project). With this Wicket-Blueprint-integration you could have done something like:

    Container container = new Container(…)
    container.add(new Column(…))
    container.add(new Column(…))
    container.add(new Column(…))

    The container would get a width of 24 (span-24), and each column a width of 8 (span-8). By adding a 4th column, all columns would automagically get a width of 6 instead.

    I never published or blogged anything about this hack yet. Maybe I should? 🙂

  4. Dave Post author

    Hi Stefan, I’d love to see a working example of that as it sounds pretty impressive, a definite one for your blog or I’d be happy for you to write a guest post here.

    I’m not totally against CSS frameworks if they’re used intellegently but my main pet hate with them is the fear that people who don’t understand CSS or HTML will use them as a fast track to creating layouts without understanding the trouble they may get into further down the line.

    You obviously understand them and much more so as long as designers are making an informed decision as to whether they’re going to use them or not then that’s fine with me 🙂

  5. Vladimir Carrer

    I agree that CSS Frameworks are not always good solution but they can save you time and testing.
    My framework Emastic http://code.google.com/p/emastic/ is less then 4kb(Bloated?).The naming convention is minimalistic dl20 (div left 20 em). Fluid and fixed columns. Optional you can use semantic naming conventions. And works well even on IE 5.5.
    Yes, I agree that is best to write your own code, but do we all have time and knowledge?

  6. JGM

    I think its another one of those, right tool for the job things. Would I use one while laying out a client’s public facing website? Probably not. But I like using them when throwing together a proof of concept or internal web application that is highly templated anyway. They can also come in handy for an application that has a very short time from concept to launch. Freeing up some time that would have been spent on design to be able to spend on QA or Development. Just one more tool in the swiss army knife of web development.

  7. planetmcd

    I second JGM’s response. I am a 1-man band designing internal web apps at a University and I could spend time designing my own CSS, but often enough, the browser tested CSS is good enough for web applications that need to be well organized, but not flashy. Anytime I spend working with the CSS is time I can’t spend on features, user interface design, or testing (or slashdot/digg/reddit/dzone).

    Don’t get me wrong, there are plenty of times where a framework is not the right call. But there are enough times where they are.

    As to your specific criticism about the layout and style being mixed, it’s a drawback to be sure. But how many times during a site redesign do you really leave the html untouched? And when your site gets large, why wouldn’t you be using a CMS with a template/layout. You’ve got other problems rather than hand written CSS or not.

    The other benefit is that a framework can let people who are technical, but not designers, develop decent looking, well laid out websites. Learning design is not the same as learning the semantics of CSS and a framework might help those that need design guidance on their feet quicker.