Because, sometimes you have to.
CSS preprocessors offer alternative syntax but compile to basic CSS. Things like selector nesting, loops, mixins, and interpolation are just some of the many features they offer. In terms of basic features they're all at pretty much the same level (although, I haven't done an in-depth feature comparison). Looking at just the GitHub repos, Less has 10k followers while Sass has just 4k. However, Sass boasts 5600 commits and nearly 150 tagged releases. Less has about 1800 and 30 respectively. Real usage statistics are hard to come by, but in my experience Sass the most popular, followed by Less. Stylus is only a minor competitor (although it does have nearly 4500 stars and 3400 commits).
It has two syntax variants: .scss
which looks very much like CSS (i.e. it has braces and semicolons everywhere), and .sass
which does away with extraneous punctuation. It seems like .scss
is more popular, for some bizarre reason. Sass is written in Ruby. The Compass gem provides a huge set of Sass mixins for dealing with vendor prefixes, positioning, etc.
Less is the main competitor to Sass. It's written in JavaScript. The Bootstrap framework is written in Less (although it does now have an official Sass port). The .less
syntax is pretty similar to .scss
.
The .styl
syntax is about as minimal as it gets. Forget semicolons and braces; you can even drop the colons too. Further, Stylus is less picky about syntax — you're free to keep using punctuation if you want. Stylus is written in JavaScript.
Shoot, I dunno. Maybe these will help:
Frameworks provide a foundation upon which you can build your project's visual style. They also provide features like built-in responsive grids, which are tricky to implement from scratch. Most frameworks are built on either Sass or Less, which makes customizing them pretty painless, since you can jump into the source files and change variables easily, then recompile.
Bootstrap is the most starred repo on GitHub by a massive margin. It gives you a quick way to start building a nice-looking page with very little overhead (aside from looking up the proper class names in the docs). However, in a serious project that will involve lots of custom CSS, Bootstrap can be a nightmare. Overriding styles is a tedious exercise in selector specificity. Further, the popularity of Bootstrap means that sites that use it heavily don't really stand out. They just look like everything else. Bootstrap covers just about every element you'd conceivably use, and as such, is quite large — around 100KB minified.
Foundation is the most prominent Bootstrap competitor. Other CSS frameworks include Pure, Gumby, and Blueprint.
I've found that the best way to keep CSS light an manageable is to not use a framework. You'll probably want to start with a responsive grid system and build out from there.
Object-Oriented CSS applies some of the principles of object-oriented programming to CSS design and structure. The goal is to write modular CSS that scales well.
I feel like whenever someone tries to define exactly what constitutes "Responsive Web Design" they get torn to pieces. So, uh, basically, your site or web app should look good on all devices. In the context of CSS this means, basically, media queries. Read the docs for your responsive grid system, and use them. If you want to go the extra mile, implement some responsive typography.