Should we use a CSS framework ? Are they worth it?

Question

CSS frameworks have nice styles inbuilt and ask you to focuses on the grids but still there is a bit of dependency and lack of freedom it provide.. If I need to generate a webpage by looking on a PSD based mockup screen ..either i will use the classes provided by the framework but if that actual measurements does not exist I need to again specify my own rules that will add upto my CSS filesize and if performance is a constraint as always it is...you need not a big size file..though its in kb but every drop counts.

Any comments and suggestions to use the framework in a best possible way.

Leaseback

I can't recommend the accepted answer in this question enough: #203569 - I think it nails it. – Mortality

Answer 1

Css frameworks are not like the regular code frameworks/libraries that provide functions that allow you to do your work faster.. it is more like having a starter file, that saves you the time of writing css that you use in all your projects.

Saying that, I really do believe the best way to use a css framework is to look at what css you use more often and create a homegrown css framework. Personally i use the same reset and typography rules for the majority of my projects. I do have a collection of different grids, but really that differs based on the type of project. Not all designs will work with a grid.

Before when I tried to use a pre-built framework, I found myself wasting time removing styles or working around some of the styles from the framework. That is just from my experience with frameworks, I do know people that love working with Blueprint and swear by it.

Inofficious

homegrown's are great for individual projects with 1 developer that never shares code. Otherwise the benefits of community known tools that you don't have to 'learn' should not be underestimated. learning a framework, including a home-grown one can be compared to learning a new computer language in that it takes some time! – Chagrin

Answer 2

I think a style reset is great - but a framework is too limiting. You are forced to use their classes etc.

This could result in some inconsistent class names, like for example if you have a site that separates words with a hyphen (-) and then you use a grid that uses the underscore (_).

You also have to buy in to that framework, as in adopt it for your whole site (if the main template is using it).

See UnobtrusiveCss for a laugh :).

Rizal

It should work now - I think they were updating it as soon as I posted it! @shog9 - Aw I thought it might work, the cached version! – Rizal

"but a framework is too limiting". Sigh. So write everything from scratch, learn and deal with dozens of different browsers and versions, use your own 'best practices', create a system model that other folks have to learn from? Sign. Alex, I appreciate that with 80,000 points you are hypersmart. Personally I do not feel that the suggested answer here will work for the 99% of regular developers. imho and my 1/50 of a dollar of course :) – Chagrin

@MichaelDurrant I am the 1% ;) – Rizal

+1 Just visited the link to UnobtrusiveCss. I always +1 for humor :) – Chagrin

Answer 3

I think it is a question of using the right tool for the job.

I use BluePrint CSS a lot and it really helps me to create standard web sites very quickly. Most of the time that is just what my clients want. If I need to dig deeper - I'll roll my own CSS, for that job - but it makes the site more expensive and takes a wee bit longer to develop and test.

I don't think CSS frameworks are an alternative to learning CSS, they just help you do standard things quickly and easily.

Hope that helps?

Presbytery

Answer 4

CSS Frameworks are my favourite tools for designing a page, take a look on 960er.gs a nice grid framework.

Ok you're limited somethines about the sizes, but you are able to design your pages much faster, after a week you know all classes.

Viviennevivify

Isn't 960 gs more like a pattern than a framework? (sorry it's here but can't make comments yet) – Peltier

Answer 5

So the moral of the story is use css reset and for visual aid for debugging a grid image in body will do the necessary. Pic lens addon will surely help for matching pixel. Thanks all for your encouraging response

Leaseback