I wrote a little scripts that shows [some stats about the frameworks](http://juliankrispel.github.io/css-specificity-benchmark/]
##Twitter Bootstrap Size: 16KB Bootstrap seems to be the default for many developers and startups. And I can see why. It has a boatload of fully designed, fully functional components (Not only CSS, also Javascript). It's biggest strength is however also its biggest weakness. Because Bootstrap is so fully featured and so 'designed' already, by picking it you are buying into their way of doing things. Although they vastly improved in their 3.0 release, Bootstrap still struggles with a high rate of specificity which make it hard to extend.
The new version of bootstrap has major advantages over 2.3.2. They shaved off 30% of it's codebase without feature-reduction and is 14% less specific than its predecessor.
Bootstrap is a responsive framework but only in part. It scales down adaptively until it reaches mobile-screen-width, then its grid becomes fluid. As we all know there are new devices coming out constantly with different screen-widths, so a fluid grid rather than adaptive one is a big win.
###Pros
- A lot of ready-made components
- Quick for prototyping as there is a design already in place
- Highly popular CSS Framework so a lot of people have worked with it
- Extensive Documentation with examples
###Cons
- High Specificity
- Hard to extend and no documentation on how to extend
- Part responsive part adaptive grid
- Huge
##Pure CSS Size: 5KB
Pure CSS is YUI's new CSS framework and it's quite nice to see a CSS framework that isn't based on a CSS preprocessor. It has extensive documentation and also documents ways to extend the framework. It is very small (9kb minified)
The Grid system in Pure is using display: inline-block instead of float: left for columns. Although this has the convenience that you don't need to clear the floating columns it bears disadvantages. An element that has display: inline-block; set is treated by the browser like a normal character. That means that any surrounding spaces or pseudo-elements in your html will have dimensions. To remove those spaces around your inline-block, you need a containing element that sets font-size: 0 and the inline-block has to reset the font-size to what it was font-size: 16px. That breaks inheritance! Inheritance in CSS lets you define a font-size on an element i.e. body and all containing elements inherit from it. So if you want to adjust your font-size for mobile screens, all you need to do is change the font-size of body and your whole page adjusts, but because the inline-block container is resetting the font-size, everything inside it will ignore the inheritance chain and you'll end up writing more code to get the job done.
###Benefits
- Small
- Low specificity
- Extensive Documentation (Includes information on conventions and how to extend)
- CSS Styleguide
- No preprocessor
###Weaknesses
- Not configurable because it's just CSS
- using inline-block for columns which removes inheritance chain
##Inuit.CSS Size: 4KB
Inuit.CSS is the brainchild of Harry Roberts, the frontend-lead at BSkyB. The design philosophy behind Inuit is inspired by BEM, SMACSS and OOCSS. It doesn't come with a pre-existing design and has no Javascript components. It's focus is on modular, scalable architecture. It has conventions and sticks to them and is divided into small modules that can be excluded/included. Every CSS rule is documented.
Although inuit is very small it is full of features and makes lots of re-use of classes (It has only 246 rules but 602 selectors)
###Pros
- Small
- Very low specificity
- Highly extensible
- Highly modular (Built in way of only including modules you need)
- Commented Code
- Both Sass and Less port available
###Cons
- No predesigned assets so not great for prototyping
- No documentation on homepage, but in github wiki and code comments