Name classes for what the element is

How to do it

A class named after a look lies as soon as the look changes, and then every template using it must change too. Start with the module prefix from Give every module its own class names, then name the part. Looks belong in tokens and variants, as Name tokens by purpose describes for custom properties.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

JavaScript example

const LOOK_WORDS = /(^|-)(red|blue|green|yellow|black|white|big|small|left|right|bold|round)(-|$)/;
const UTILITIES = new Set(['visually-hidden']);
const offenders = [...css.matchAll(/\.([a-z][\w-]*)/g)].map(([, name]) => name)
  .filter(name => LOOK_WORDS.test(name) && !UTILITIES.has(name));
offenders.forEach(name => console.log(`FAIL .${name} is named after a look`));

Python example

import re
LOOK_WORDS = re.compile(r"(^|-)(red|blue|green|yellow|black|white|big|small|left|right|bold|round)(-|$)")
UTILITIES = {"visually-hidden"}
offenders = [name for name in re.findall(r"\.([a-z][\w-]*)", css)
             if LOOK_WORDS.search(name) and name not in UTILITIES]
for name in offenders:
    print(f"FAIL .{name} is named after a look")

HTML example

<!-- Avoid -->
<p class="big-red">Overdue</p>
<!-- Do -->
<p class="invoice-status">Overdue</p>

How to check

A script finds 0 class names, outside the utilities list, that contain a word from a fixed list of look words. The list holds colour names, big, small, left, right, bold and round.

Related rules

• Give every module its own class names in Website
• Name tokens by purpose in App interface