CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don't talk a whole lot about is the sheet part of the language. So let's give that lonely second "S" a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.


The latest ways to deal with the cascade, inheritance and specificity

The cascade is such an intrinsic part of CSS that they put it right there in the name. If you’ve ever needed to use !important to affect specificity in the cascade, you’ll know that it can be a tricky thing to deal with. In the early days of CSS, it was common to see highly specific selectors like this:

#sidebar ul li {}

We’re all much better at managing specificity nowadays. It’s a widely accepted best practice to keep specificity low and flat—to shun ID selectors, to make liberal use of classes, and to avoid unnecessary nesting. But there are still plenty of situations where a more specific selector will be useful. With the introduction of a newly proposed pseudo-class, more support of the shadow DOM, and the use of the all property, we will soon be able to handle inheritance and specificity in new and exciting ways.


8 simple rules for a robust, scalable CSS architecture

I don't disagree on any particular point on this thesis by Jarno Rantanen.

This is the first I've seen this particular naming convention, which seems fine to me, but I'd add that any well-considering naming convention works.

Also, there is this:

Cascading styles will ruin your day, eventually.

A sentiment shared by many these days, and the likely culprit for all the peter-griffin-adjusting-the-blinds.gifs out there in the world. Again I don't entirely disagree, but, there are styles I gotta imagine even hardened CSS module aficionados would allow to cascade. For instance: why wouldn't I let the body copy font-family cascade?