Markup structure tied to selectors

Another practice to avoid when authoring CSS for scale is using type selectors; selectors that relate to specific markup. For example:

aside#sidebar ul > li a {
    /* Styles */
}

In this case we need to have an a tag inside an li which is a direct child of a ul inside an aside element with an ID of sidebar - phew!

What happens if we want to apply those styles to a div somewhere else? Or any other markup structure?

We've just unnecessarily tied our rule to specific markup structure. It's often quite tempting to do this, as it can seem ridiculous to add a class to something as (seemingly) trivial as an a or span tag. However, I hope once you reach the end of this book you'll be convinced to avoid the practice.

We want CSS that is as loosely coupled to structure as possible. That way, should we need to introduce an override (a more specific selector for a particular instance) we can keep things as vague as possible...