The problem with CSS solved

CSS is not well suited for the purpose it serves. It is not flexible enough to meet the needs of web developers. The problem is that it represents a one-to-many mapping between selectors and styles. Ex:

<div class="navigation">The navigation goes here.</div>
<style type="text/css">
.navigation { color:#af0312; width:100px; }
</style>

In order for a set of different HTML elements to have the same set of styles, the trivial solution is to duplicate the CSS style value, but this is not recommended because if you change the color "red" you have to change it everywhere. Don't do this:

<div class="navigation">The navigation goes here.</div>
<div class="navigation-footer">The navigation in the footer goes here.</div>
<style type="text/css">
.navigation { color:#af0312; width:100px; }
.navigation-footer { color:#af0312; }
</style>

The better solution, and the one usually used, is to assign the same classes to each selector that needs that specific property. So you can have something like:

<div class="navigation red">The navigation goes here.</div>
<div class="red">The navigation in the footer goes here.</div>
<style type="text/css">
.navigation { width:100px; }
.red { color:#af0312; }
</style>

The three main problems I've identified with CSS are:

1. Flexibility / organization

The decision about which classes each HTML element has is obviously made in the HTML but the decision about which styles these classes have is made in the CSS. This is generally not much of a problem when the developer has control over everything. However, a lot of the time a designer is given the task of "styling" a website. Sometimes they only have access to the CSS files and images and often, even if they have access to modify the HTML code itself, much of it is built programmatically and it is difficult for them to change. This is why there is a need to make CSS more flexible.

2. Compatibility / browser bugs

In addition to this problem, we still have the good old compatibility problems. It is clear that there are some browsers that have strange CSS behaviors and even actual CSS related bugs *cough* IE *cough*. One solution is to compensate for them by adding "hacks" to every CSS rule that would cause a bug. The other is to have a separate CSS file for different browsers. These are not very elegant solutions and add overhead to the development process.

3. Browser specific properties

In addition to this, there are a number browser-specific classes that do the same thing but have different names. For example, rounded corners require the following styles to render in all browsers:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

There are a number of different solutions that address all of these problems. They are referred to as CSS pre-processors. They solve the previously described problems as follows:

1. Variables can be used for colour schemes. Selector inheritance can be used to apply the same set of styles to multiple elements with only slight additions/modifications.

2. Compatibility libraries! (I'm not sure if (m)any exist, but if not, I'm sure they will soon)

3. Mixins let you reuse a set of CSS properties.

Ideally, you should have a divs with classes describing what your HTML elements are rather than how they should look. That was the point of CSS in the first place.

There are other nice features that come with using a CSS preprocessor too. For example, when writing CSS we often get lazy to write a long and detailed selector because it takes up half of the line. With inheritance, which is supported by all of these pre-processors, one can nest selectors and make a lot cleaner looking rules.

Some examples of CSS pre-processors include:

SASS - http://sass-lang.com/ - has all the features described above
LESS - http://lesscss.org/ - bonus features: operations and more
Stylus - http://learnboost.github.com/stylus/ - most flexible and is my favorite

I think that everyone should use these more because they remove all the tediousness of writing CSS manually.