You can try to reduce the horribleness of a CSS file, but the language simply doesn't provide the tools needed to do the one thing all programmers need to manage complexity: abstract away the common part of two specific processes into a reusable component.
I'll never forgive the designers of CSS for not at least providing immutable constants, if not variables.
So what if CSS doesn't have variables? We can add them. CSS is the format it has to reach the browser in, it's not the format we have to write in though. There are multiple projects out there for writing CSS at a higher level, which "compile" to CSS but let you use variables and things like that.
HTML tags provide structure. Structure means less complexity. Using only DIVs will get you into CSS trouble.
Edit: A good tip: your website will look more consistent and clean when you try to build your pages by only declaring HTML tags in your CSS at first. Only when there is no other solution declare classes and IDs. And even then remember you can use multiple classes in your class attribute. Things like: class="width50perc floatLeft textAlignRight textColor1" are very handy.
At that point, how is this any different from just using inline styles? The whole point of CSS is to separate presentation from content, you've done gone and thrown a bunch of presentation back into it.
<link rel="stylesheet/less" type="text/css" href="styles.less">
Then you take a look at some of the additional goodies - fadeout(), desaturate(), etc - that have been included in the most recent release, and you wonder how you ever kept your color palette organized before.
Less has prevented me from wanting to claw my eyes out during a recent round of frontend work - just for that, I'm incredibly grateful.
And what? I’ve just checked out the minified version of less.js and it clocks in at 32kB. Seriously?
Souders estimates that around 80-90% of a site's slowness has to do with the time it takes for the browser renders the page, js slows that down.
I'm still building, but it look like I better give this a second look.
I'm also in the education space, so where there are crappy machines there are also likely crappy networks.
See Nicole Sullivan's Object-Oriented CSS approach: https://github.com/stubbornella/oocss/wiki
Any good stackoverflow answers for that? Making people who think "code" is a side-product take pride in that part of their work too?
* Partition into sections for fonts, colors+images, positions+spacing, text, and specials.
* Refactor for minimal property duplication, instead of selectors. For example text-weight:bold; will be mentioned only once, but the "#content a" selector multiple times.
* Use a CSS reset.
* Make an extra file per browser+version for hacks. Do not use hacks, which make sure they get triggered in IE7, but not 6 or 8, for example, but use ie6.css, ie7.css, and ie8.css. Duplicate code for this if necessary.