CHAPTER 1 Modern CSS Architecture and Front-End Development
Lines 1–3 — the whole block — is called a rule set. Line 1 is our (compound)
selector. The whole of line 2 is a declaration, made up of float, which is a
property, and left, which is a value. .baz, the final selector before the { is
our key selector. If selectors represent much of the key to scalable CSS, the
key selector definitely holds the key to selectors in general.whiCh SeleCToR(S) ShoulD You uSe?
The answer to this is actually fairly straightforward: the short version is
classes. They offer granularity, low specificity and reusability, they can be
combined, they’re (obviously) very well supported and they’re great!
If you split code into smaller, single-responsibility-principle-adhering,
Lego-like, modular chunks, then it only makes sense that your style sheets
will be made up, predominantly, of classes. I can’t think of a selector that
lends itself better to the ideals of low specificity, reusability, portability
and explicitness better than the humble class. As the acronym goes: “keep
it simple, stupid.” Classes are a straightforward, simple, tried-and-tested
selector that fit the needs of a CSS architect perfectly.iDs
Anyone who’s seen me speak — or read any of my articles — will immedi-
ately be able to guess what I’m about to say next: do not use IDs in CSS.
The problems with IDs are manifold. First, they cannot be reused. Only
one instance of an ID should exist on any given HTML page: to do other-
wise is invalid. Interestingly, however, your CSS will still match and style
all occurrences of a repeated ID, but JavaScript will only match the first ele-
ment it finds, and then stop. This is why IDs in JavaScript are nice and fast.
Now, it may well be that you never want anything more than once on
a page, and that you don’t need a reusable selector at all. This is all well
and good, so an ID might be appropriate here, but as we’ll see, there are far
greater downsides.
The second — and far biggest — problem with IDs is their specificity. If
you aim to write a more painless, more extensible, often larger front-end,