What Is the Best CSS Framework and Are They Worth the Effort

What is the best CSS Framework and are they worth the effort?

CSS 'frameworks' are completely missing the point.

CSS is not like JavaScript, where you can include a base library/framework and then call functions and objects from it to do higher-level work. All a CSS framework can give you is declarative rules: some default browser-rule-reset stuff, some class styles to be forced to author your page to, and layout rules using 'float' and 'clear'. You can write that in a few lines of CSS yourself rather than pulling in the bloat of a hundred framework rules.

The 'grid layout' stuff in particular goes back to the bad old days of mixing your presentation into your markup. 'div class="span-24"' is no better than a table, you'll have to go back in there and change the markup to affect the layout. And all the frameworks I've seen are based around fixed-pixel floated boxes, making it impossible to create a liquid layout accessible on a wide range of window sizes.

It's backwards authoring, of use only for someone too scared to write a CSS rule.

Is it efficient to use css frameworks? If so, which one is best? Or any comparison comments?

Really it depends on your individual skills, preferences, and work style - for some people, it's faster to just work from scratch rather than trying to conform to someone else's design methodology; for others having a basic framework in place speeds things up tremendously. You really just have to try it both ways and see which works out better for you.

The "best" question is rather subjective, I don't think there's a single answer for that.

Are CSS Frameworks Really Worth Using?

The main use I have for CSS frameworks is that they tend to force you to think about how you're going to organise you code rather than provide you with indispensable tools for your day to day tasks.

For that reason, I'm a fan of boilerplate rather than things like blueprint as boilerplate tends to focus on how you structure your css stylesheets and imports rather than providing you with a collection of semantically confusing helper classes.

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

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.

What is the best Approach for CSS framework of an Enterprise Cloud application?

File sizes

My first point would be that when dealing with an enterprise level application the actual total quantity of css when measured in megabytes is slightly less important, even for slow internet connections. It's important that the pages you load into an empty cache of a potential conversion that just clicked your pay per click ad for the first time are as tight as you can possibly make them, but for an app that a user is paying for and is intending to invest their time and effort, priming a cache every release, even with a megabyte of css is less of a problem. You could load it all last on the login page so it's all sorted while they put their credentials in.

Furthermore, you'll have the time to investigate some other techniques, such as loading critical 'above the fold' css in it's own, optimised file first; and splitting the css files up so that the common stuff is loaded on the first page view but any page specific stuff is loaded per page, as it's visited (for the record, this can be very good for the aforementioned PPC targets).

CCS Tricks goes into more detail here and here.

Complexity

One of the bigger considerations of enterprise cloud applications is the maintainability of the css. You're probably going to have a team of developers and a complex user interface. These things can quickly turn into a maintenance nightmare if the wrong decisions are made concerning the approach to css.

It's all very well if you users can load a page in 0.1s less, but if it takes you 30mins more to make every simple css edit then you're in trouble.

My recommendation

You want a combination of both. You should strive for semantic, context free css selectors in order to hit maximum re-usability (and low file size) and maximum maintainability. This allows for effective file size management and effective, scalable development.

For example:

.blue-box

.header-login-box

.contact-form-submit .green-button

bad: not semantic, or too context specific. I'm assuming that .blah pretty much falls into this category, judging by the phrase 'do this for each element'.

.login-box

better: easier to re-use, semantic, but still too contextual

.box--highlighted

.button

.button--standout

even better: really re-usable because of complete decoupling from page context, but still clearly semantic, making it easier to maintain.

With the final examples you break your app UI designs down into modules which are defined and re-used wherever they are needed. It's conceivable that you may use more than one per HTML element, but you won't have ten.

It's also OK to use utility classes, such as .pull-left in fact, Harry Roberts at CSS Wizardry, a successful consultant whose done this stuff in the wild for real clients recommends it.

Three further avenues of investigation

There are currently three organisational / naming strategies for scalable css architecture that try to tackle the problem, you might want to look at them in more detail:

BEM: docs introductory article

OOCSS: docs introductory article

SMACSS: docs and introduction

All three will help maximise re-usability and minimise file sizes while giving you rules to follow to keep things tight and help with new members of the team.

Which css grid system should I learn?

I've used YUI Grids on several sites and found it, in combination with the Fonts and Reset components, to provide very high quality cross browser compatible sites. It's design satisfies different goals to 960.gs and a quick look at your site's storyboards will indicate which is more appropriate.

YUI Grids can be nested achieve subdivison of elements and generally I find it easy to work with.

I'd say that use of a reset css is crucial, and work with whatever grid system you find most comfortable.

What css framework should I use if I just want to make my website responsive

The non-opinion-based, objective bit

Installing most grid systems on top of your website will likely break some aspects of it. You can't really just plop one in and just use it when you need it, you need to start the design with it and carry it all the way through.

If you want to make it responsive without having to rewrite from scratch, look into media queries, because that's the magic of it.

A CSS framework uses a lot of media queries for the responsive design bit, then bundles lots of stuff on top of it. If you just want the responsive side of things, you can implement your own media queries (common breakpoints are 0-640px for mobile, 641-1024px for tablet and 1025px+ for desktop.

The bit that can get opinion-based if you're not careful (but hopefully isn't, here)

There are a lot of popular frameworks for responsive design (and the whole mcguffins that goes along with them), with two of the most popular ones being Twitter Bootstrap and Zurb Foundation. I'm not promoting discussion of them here, because SO isn't for opinions, I'm just saying that they exist and are widely considered "robust enough" for production work if you want to go look at them. There are many others which are also robust enough.

Is there any common CSS library?

I think you mean CSS framework: there are tons of them. Just to name a few:

Blueprint
BlueTrip
Boilerplate
Content with Style
Elastic
Elements
Mollio
960 Grid System
1KB Grid
SenCSs
Tripoli
Typogridphy
YAML
YUI Grids

Everyone and their mother has a CSS Framework: there is no best one, and they all have their own interpretation of what constitutes "best practices". it really depends on what one fits your own use.

Also see bobince's answer on What is the best CSS Framework and are they worth the effort? for why CSS Frameworks are really unnecessary.

What Is the Best CSS Framework and Are They Worth the Effort