CHAPTER 1 Modern CSS Architecture and Front-End Development
Anything you can do with an ID, you can do with a class, and more. If
you want to use a component once on a page, you can do that with a class. If
you want to use it a thousand times on a page you can do that with a class.
Classes have all the same benefits of an ID but none of the drawbacks.KeeP YouR SeleCToRS ShoRT
When I say keep your selectors short, I do not mean the names themselves,
I mean the size of the compound selector. A compound CSS selector is a selec-
tor made up of smaller selectors, for example:.a-css-selector {}
#a .compound .css [selector] {}Avoid compound selectors wherever possible. There are a number of
reasons why this makes sense.location Dependency
Nested or compound selectors most likely use a lot of descendant selectors,
selecting a thing that lives inside another thing. For example:.sidebar .button {}One problem here is that the .button style can now only be used in your
sidebar. There may come a time when a client wants to use the same button
elsewhere, but they can’t. To do that you would need to write some more CSS:
.sidebar .button,
.footer .button {}This might not seem too bad initally, but it’s clearly not a very maintain-
able, scalable or future-proof solution; you will have to keep adding more
and more CSS to achieve your goal. This is far from ideal. Tying selectors to a
location reduces their scope for reuse.