Markup CityISSUE #23 of 39

classes · reusable hooks

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysA class is a reusable label you put on many elements so CSS and JS can target them as a group.

Add class="btn" to any number of elements and a single CSS rule .btn { … } styles them all. An element can carry several classes separated by spaces: class="btn btn-primary".

Classes are the workhorse hook of CSS. They're reusable (unlike ids), composable, and the basis of every CSS methodology from BEM to utility frameworks.

Power-ups you unlock

class="name" — reusable across many elements
CSS targets classes with a dot: .name { … }
Multiple classes allowed: class="a b c"
Classes are the primary styling hook

The Unclosed Tag attacks — common mistakes

Using an id for something that repeats (ids must be unique)
Spaces inside one class name (that creates two classes)
Over-specific class names that describe looks ("red-text") not purpose ("error")

Boss battleGive two buttons the class "btn", style .btn once, then add a second class "btn-primary" to just one of them and style it differently.

Example code

<!doctype html>
<html><head><meta charset="utf-8">
<style>
  .btn{font:inherit;padding:8px 16px;border:1px solid #2a1d4a;border-radius:3px;background:#0c081a;color:#e6e0ff;cursor:pointer}
  .btn-primary{border-color:#b388ff;color:#b388ff}
</style>
</head>
<body style="background:#06040d">
  <button class="btn">default</button>
  <button class="btn btn-primary">primary</button>
</body></html>

▶ Open the interactive comic issue

‹ Div · The Generic Container Ids · Unique Handles ›