: When should I use a CSS framework? What are the best practice scenarios for using a CSS framework? When is it better to "roll your own" CSS from scratch rather than using frameworks?

@Bryan171

When it solves all your needs. (This is based on the idea of tailoring.)

From the only book on frameworks? www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp. (Only linking because it's free and relevant here.)

Vote Up Vote Down

@Marchetta884

I use blueprint, for CSS.
CSS is, as everyone above says, really straightforward.

However, in reality, you have to consider the platform.

With CSS the rendering engine adds to the complexity.

Gecko vs WebKit vs Presto vs Trident... who wants to do all that stuff?

What a 'framework' gives you here, is the ability to write layouts that will most likely work on all browsers, so you wont have to go googling for the 'WTF-am-I-doing=-this-crap' IE 7 quirksmode fix, or something similarly ludicrous.

Frameworks will do 90% of the layout you want, and then you can always add in your own styles later.

So, to answer the question, I'd say pick any framework and see if it works for you. It just might. Then you are golden, and can get back to whatever you actually wanted to do. If not, then extend it, using css and change what did not work. That way you maintain the cross browser benefit, but still can customize.

As a small benefit, if you pick one and use it all the time, and then are taken ill, or get promoted and have to train your successor, you can say:

"Yes, I used framework ABC. Docs are here. Code is there. Training over. Good luck."

Vote Up Vote Down

@Looi9037786

If you’re actually implementing a design of your own, you’re going to write some of your own CSS (unless someone else happens to have written the exact design you want).

Assuming you are writing some of your own CSS, “frameworks” can be useful when you’ve got styles that are:


used in more than one place; and
complicated enough to break off into their own classes


For really simple styles, it’s better to use classes to indicate what something is (e.g. class="navigation"), and then define its look by applying style rules to that class in your stylesheet.

But for more complex styles that aren’t necessarily tied to any one element (e.g. layout-related styles, the kind that frameworks gives names like .span3 to), there’s nothing wrong with putting them in a class, and applying that class in the CSS. You can use both approaches together.

In bigger, more complex sites where elements are likely to be combined in unpredictable ways, a framework-like approach can really help keep your code manageable.

I would say that you might as well write your own “framework” though. I put “framework” in quotes because CSS really isn’t that big a language. You could read CSS: The Definitive Guide (Eric Meyer) in a day, then read all the code in e.g. Blueprint (a CSS “framework”) and pretty much understand what’s going on. You might need to research the IE workarounds a bit, but we’re talking at least an order of magnitude less complexity than e.g. jQuery here.

Vote Up Vote Down

@Alves908

I also recommend using a reset.css from Eric Meyer, but I think that CSS "frameworks" can be beneficial for layout. Blueprint, YUI grid, and 960-grid can help you achieve some highly complicated layouts without writing the css yourself.

While there are drawbacks that have been mentioned, the same could be said about building a website off a CMS instead of rolling custom code for example, but they can still be useful and for many sites the benefits gained outweigh any extraneous css or performance issues.

Vote Up Vote Down

@Kristi941

Just avoid them, they are nothing but annoying.

Especially this one.

* { margin:0; padding:0; }


My biggest complaint is that if you inherit/maintain a site that uses a reset and/or a framework you must learn that framework before being able to modify the site.

When I add a h1 tag I expect certain things. Most resets take away all the padding, margin, block, etc. so that a h1 tag no longer acts as it should by default. So I have to go back and add everything that was there in the first place.

Generally (in my experience) its people who do not understand css that use the resets and frameworks, and it causes more work for the people who do.

Vote Up Vote Down

@Ann8826881

It is my opinion that the only service a CSS Framework provides is a starting point for those who are not very familiar with CSS.

Vote Up Vote Down

@Bryan171

CSS frameworks are a bit tricky because are not really frameworks to me. They are simply predefined classes. But, this is not your question.

CSS frameworks are great for mock-ups and wire-frames. I would not recommend using them on a live site because they add meaningless classes to your markup. ".span3" doen't tell me anything about the content, only the design.

However, blueprint does have some cool tools that help your combine its framework classes and your semantic ones once your done.

I always roll my own CSS.

Vote Up Vote Down