If you've spent time working with CSS, you will know the pain and heartache suffered when working with CSS—and all in the pursuit of creating that perfect site! Those who are still somewhat new to working with CSS will, at some point, fall foul of some of the limitations of CSS, which include:
CSS is heavily dependent on browser capability—it is impossible to display the same content in every browser in the same way. We can get around this, but not without the expense of having to add vendor-prefixed statements. This can lead to pages with a lot of repeated code, making them slow and difficult to maintain, where even the smallest change requires a lot of effort.
Not every browser supports every feature within CSS—this is particularly true of CSS3. This means we need to implement some form of graceful fallback for the affected browsers if we are to maintain some form of visitor experience.
The advent of CSS made a functionality such as columns on a magazine website much easier, although it is still not perfect. To achieve perfect columns, we will require JavaScript or jQuery to tweak the code, which makes the page less accessible (for example, making it harder for those using screen readers). It also has an effect on the use of progressive enhancement, where content should be enhanced using a functionality, such as CSS3 or jQuery, and not reliant on it.
It is impossible to target specific ranges of content, without altering the markup to include placeholders; should these placeholders change, then the associated CSS must also change.
We can't include a rule from one CSS style in another, nor can we name a rule—the latter of which could be used by client-side scripts, even if the selector that is being referenced changes.
By now, you're probably thinking that it is all doom and gloom when using CSS; fear not, we can fix this with the help of CSS preprocessors to help make our development more effective.