By Harry Roberts CHAPTER 1Takeaway: Break your code down into smaller, more discrete parts which
can then be added, removed, combined and layered in a common-sense
order.
CSS Selectors
One of the simplest ways to make your CSS more scalable and suitable
for bigger, modern front-ends is to simply pay more attention to your CSS
selectors. It really is a surprisingly quick win. The bite-sized guideline for
decent CSS selectors is basically: keep them well-named, as short as possi-
ble, and keep specificity low at all costs.
CSS selectors, such as IDs and classes and so on, are one of the first
things you learn when entering the world of front-end development. The
ability to match something like
opment 101. Simple stuff, I’m sure we’d all agree.
However, CSS selectors, as humble as they are, hold one of the biggest
keys to writing scalable, modular, extensible and fast UIs. CSS selectors all
impact, in some way:
- Location dependency
- Code portability
- Robustness
- Specificity
- Selector intent
- ...and even efficiency
anaToMY of a CSS SeleCToR
Before we continue, we should familiarize ourselves with the anatomy of a
CSS rule set. I won’t go into loads of detail, but let’s take the following:
.foo .bar .baz {
float: left;
}