Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

6 Answers 6

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."

share|improve this answer

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:

  1. used in more than one place; and
  2. 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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
1  
Eric Meyer and the web developers at Yahoo understand CSS and they use CSS resets. In my experience they save a LOT of time and headache when trying to achieve cross-browser consistency. - CSS frameworks are lame though. –  jessegavin Jul 9 '10 at 15:22
    
When I add a h1 tag I expect certain things.. unfortunately you need to expect different things from each browser.. and, hence, the need for css reset (not frameworks) –  Gaby Jul 10 '10 at 11:02
    
h1 is quite a bad example, because browsers tend to use different margins and so on. Personally I prefer a "set" to reset - i.e. instead of resetting everything to 0, just set it in your own stylesheet in the first place! –  DisgruntledGoat Jul 22 '10 at 10:55
    
* {margin:0; padding:0;} is the most important CSS reset of all. It removes margin-top/maring-bottom under all tags even the p tags so after you won't see a huge space between each line. Even this website is probably using p {margin:0;} otherwise the browser would live a huge space between each line. I'm wondering how you can say they are annoying. –  Marco Demaio Mar 4 '11 at 15:28

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.

share|improve this answer

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.

share|improve this answer
4  
I am with Thorn007 on this one. CSS is pretty darn simple when you get down to it. Just use a good CSS reset and roll your own. –  jessegavin Jul 9 '10 at 15:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.