By Harry Roberts CHAPTER 1A far better selector would have been:.button--secondary {}
This can now live anywhere without us having to touch (and bloat) our
CSS. All selectors should be as free to move as possible. You might never want
to move them, but there is no benefit in tying them down unnecessarily.
Portability
We just covered how we can move our DOM elements about more freely
without descendant selectors, but we can also increase what DOM ele-
ments we can apply selectors to. Take, for example:
input.button {}
This looks like a fairly inconspicuous bit of CSS, right? Wrong! We
shouldn’t qualify our selectors with elements.
Imagine we wanted to apply the .button styling to a link. It wouldn’t
work because we have tied our selector to an input element.
By omitting this leading qualifying selector, we instantly open up the
possibility of applying the class to a wider array of HTML elements. Any
time you see anything like the following:
ul.nav {}
div.header {}
p.comment {}
a.button {}
...and so on, aim to rewrite them as:
.nav {}
.header {}
.comment {}
.button {}