New Perspectives On Web Design

This level of granularity will soon balloon and become a total night-
mare to maintain. Your CSS will be too granular and incoherent. Both your
CSS and your HTML will become much harder to look after.

wheRe To DRaw The line

Unfortunately, it is very difficult to identify the points at which to start
using more or to stop using so many classes in our HTML. My own little
litmus test is that if something has to do N things, it should have N hooks
applied to it. As with the single responsibility principle, you can take away
different aspects of a component just by removing the corresponding
classes. Let’s take an example:

<a href="" class="btn btn--purchase btn--full js-button"
id="js-purchase-button" data-user-id="2893348">Purchase

We can really quickly and clearly see this markup does a few things.
First, it’s a link () and it’s styled like a button (.btn), specifically a full-
width (.btn--full) purchase (.btn--purchase) button.
Second, we can also see that we’re binding to it via JavaScript because
it’s a button (.js-button), and also because it’s specifically the purchase
button (#js-purchase-button). Finally, we can see that the button has a
data attribute (data-user-id="2893348") which holds some data about
the user. This markup does look very verbose, but it’s only as verbose as it
needs to be.
We could probably have written that markup like this:

Purchase