The Right Frame of Mind: Applying the Lessons of CSS Frameworks

Notice: This is a discussion thread for comments about the SitePoint article, [url=]The Right Frame of Mind: Applying the Lessons of CSS

Great article Alex. I’ve never really used CSS frameworks in the past with the exception of the Eric Meyer reset code. Frameworks, for me, are always one of those things that I need to force myself to get into. The learning curve is higher than just writing my own code but once I’m into it I can easily reuse the code. Do you recommend any CSS framework over another?

I have a css framework in my own library and this is giving me some new ideas thanks for that. There is one thing I would love to see as part of css and that is variables. I think it would be great if at the top of your css file you could set certain values that could be used throughout the file for example you could do something like

$titlecolor: #F00;

h1,h2 { color: $titlecolor; }

this would make it even simpler to make design changes than it is currently. I would love to get some peoples thoughts on this issue.

@potsed, there are server-side frameworks that let you do that: you write a “pre-css” sheet in a markup language (which can use variables and other enhancements), and the server processes it to spit out CSS generated from that.

For example, SASS for Ruby:

Thanks for the informative article. I’ve never given CSS frameworks much thought, simply because I was happy with how I currently wrote CSS, but as you highlight, the two main benefits of CSS frameworks (Resets and Baseline Styles) are simply helpers you can plugin into any project which create a clean and predictable canvas to construct your design on top of. I’ll definitely be using Resets and Baseline style in my future projects. Thanks again.

I just wrote a lengthy comment but lost it on submit because apparently an invalid thread was specified?

Even the Eric Meyer reset does not cope with the font nonsense that Opera produces. Is there any reset that makes my design look, in Opera, as it does in all the other major browsers?

You hit the nail on the head. CSS frameworks are absolutely useless all you need is the frame of mind they TRY to teach. A year of working with CSS (full time) will teach you all you need to know as well. CSS frameworks are not needed. They don’t mean anything, you only need to structure your own code. I’ve been working with CSS for 10 years, the thought of a CSS framework is beyond ridiculous, way beyond. The language is too small to bother and could never be general enough for most cases or flexible enough. Frameworks are for programming languages. Next there you fools will be trying to sell a HTML framework.

Great stuff Alex, there are definitely plenty of options and factors to consider!

Thanks Jeff, I think the key point to take from my article is that if you know how to produce your own CSS, the need for frameworks as structural aids is rather moot. I don’t use CSS frameworks nor do I recommend them for general purpose use, what I do recommend is more people take away some lessons from them because as unrequired as they are, they do in-fact serve a real world purpose and have a lot more care lavished on them than most of us care to-do. Using the right selector for the right job and tightening the bolts will increase your productivity, and that by far is a great lesson frameworks teach us. :slight_smile:

I also recommend selectors being used wisely, we tend to underestimate the value of the DOM, specificity and inheritance within the box model, being able to balance the need for new properties and values against the chance to cut out a few by inheriting existing style can really improve the quality of your work and help reduce the overall size of those stylesheets. Plus if you end up recycling components (such as dropdown menus), the pre-scripted style can increase your productivity.

I think calling them useless is a bit harsh, if they teach more people to pay attention to their code and to spend extra time learning to structure what they write, they may serve the lesson well and perhaps the future will lead to less reliance on today’s cut and paste philosophy… a very worthy cause. :slight_smile:

Thanks matty! I’m pretty excited that my first ever published article has been here (as I spend so much time posting in these forums), hopefully it’ll get people opening their minds to the possibilities of CSS and we’ll see more exciting innovations in the future… I know from experience that CSS experimentation is fun! :wink:

I think calling them useless is a bit harsh, if they teach more people to pay attention to their code and to spend extra time learning to structure what they write, they may serve the lesson well and perhaps the future will lead to less reliance on today’s cut and paste philosophy… a very worthy cause.

Good structure: a good book or a good teacher should be doing that though (or a co-worker), not a framework. You still have to copy and paste reset code. I don’t think CSS is like JavaScript where you can copy and paste any old brown code and tada you have a clock counting down. CSS is very touchy when it comes to playing with other styles. You have to treat CSS with respect (unlike JavaScript) and I don’t think frameworks are the answer. I’ve seen some nasty CSS code from noob coworkers, I mean, nasty, the kind that makes you sad deep down. But I take their hand and show them the light… in a sense.

Once you’ve done like 15 - 20 websites, you’ve done them all. Occasionally you come across something but it is so unique no framework can help you.

While I agree with you, the unfortunate situation is that not everyone has a good book or teacher… or anything else, the point of this article isn’t to highlight frameworks as some kind of “Unicorn” (or silver bullet), it’s to point out that if you look under the hood, their just a bunch of selectors applied loosely, and if you spend time with your code, you can do the job just as well without having some 3rd party crutch holding your site together. I would much rather people examine the CSS code of others (even if it includes frameworks) to get an understanding of how things work, than run blissfully ignorant of what’s going on and just use them to save time (as is what’s happening widely). Like you said, education is the key, and I’m just showing CSS frameworks for what they are. :slight_smile:

CSS frame work have lot’s of code which we don’t need in our page, so it’s make heavy.I think we need to select light weight CSS frame work like “MALO”. I am using this.It’s very light want no more unwanted code.

I like the tone and the structure of this article, Alex, as well as the content. Nicely done!

I had a quick look at the two frameworks you mention in the first paragraph, and there’s a lot of good stuff there. I think we all develop our own sort of framework as we go along, borrowing from others and from our own successful implementations. I also spend significant time simply stripping away anything and everything in my CSS that is redundant or unneeded, which is the opposite of the “frameworks” concept although each has its place.

I just wanted to put in a word for liquid layouts and those of us who use them and love them. In a quick search, I found two frameworks that emphasize liquid layouts. Here are links for more information:
Emastic css framework
Elastic CSS framework

Thanks again, Alex!

Alex, Awesome post! Of the frameworks that you mentioned above, is there one you would recommend the most?



Not too shabby, Alex. Good job and very helpful. :.)

Thanks for the feedback the.peregrine, I’ve encountered ElastiCSS and Emastic (I include this one in the article), though a few of them got dropped during the writing process as many of them pretty much replicate those principles I put forward in the post. You pretty much hit the nail on the head that we do tend to produce our own frameworks! The ability to refine our code and perhaps take that step to make things more fluid and portable is precisely what the article is aimed at. After all, when we control our own CSS we hold the power to take away the downsides those libraries of code hold over us. :slight_smile:

Thanks :slight_smile:

Great article. Thanks! I wasn’t aware of the power of these frameworks… Can you give us your opinion of which framework is the best. Cheers.

hairybob, I think you missed the point of the article, it’s not about what framework you should be using, it’s the opposite. No framework can ever compete with a solid foundation knowledge of CSS and some sensible coding practices, looking at how their constructed can help you improve the flexibility of your own code. :slight_smile:

Great article Alex,
I found myself revisiting @stubbornella 's Object Oriented CSS again recently.
At first I was not convinced at all - They were structuring the css in quite a different way to what I was used to and putting less semantics into the classes to acheive greater code re-use.
I actually quite like the concepts now, it really can keep the size down by grouping specific types of styles together and using multiple classes.
The concepts in CSS Frameworks do solve specific particular problems.

Off Topic:

I really like your website too, very unique.