By Harry Roberts CHAPTER 1A machine would not struggle with this at all — a machine’s only duty
is to match and style the classes. What does get awkward, however, is when
humans (that is, developers) start working with this code. It is confusing to
see a class of red which actually makes something blue. This is not a sensible
class, one that has little longevity and that won’t always make sense.
A far better option would be:
$99.99
.special-offer {
color: blue;
}
It doesn’t matter if the special offer is red, green, blue or purple — that
selector will always make sense to a human. It is a sensible, though not
semantic, class.
Sensibleness is about ease of maintenance, longevity and how much
sense something makes to a human being, because humans are the only
things to take any amount of meaning from class names.
The SePaRaTion of ConTenT anD STYle
Traditionally, the separation of content and style refers to splitting the
markup and styling of content into distinct languages. It does not refer to
keeping the two languages physically separate.
Way back when, we wrote HTML like Foo.
The issue here is that HTML both marks up and styles this content, when
we should use a distinct language for each. This is why CSS was born: to
separate these concerns. The separation of content and style refers purely
to using separate and independent technologies for each role, not to avoid-
ing presentational classes in your markup.
The previous example displays a lack of separate content and style; the
following example has its content and style separated perfectly: