Prefix syntax for class naming

prefix.markdown

A simple alternative to BEM

Project

Choose a prefix for your project. If your project is called "The XY Project", for instance, choose xy-.

Components

Prefix them with your project prefix. Simple as that. Component classes are never lengthened.

/* Specifity: 0 1 0 */
.xy-button {
  /* button styles... */
}

Traits/Modifiers

Prefix traits/modifiers with t- (or m- if you prefer). Avoid defining traits globally, unless they should be in a global context, such as t-strong.

/* Specificity 0 2 0 */
.xy-button.t-small {
  font-size: 85%;
  /* other small button styles... */
}

/* Global trait */
/* Specificity 0 1 0 */
.t-strong {
  font-weight: bold;
}

State

Choose another prefix. How about s-? Or even is-?

/* Specificity 0 2 0 */
.xy-button.s-active {
  /* active button styles */
}

Nested Components

Don't add new classes! Just have the parent component own the styling of the small component, and avoid general sibling/descendant combinators. Specificity has your back.

/* Specificity 0 2 0 */
.xy-modal > .xy-button {
  /* Modal-specific button styles */
}

Specificity

The specificity of modified and unmodified components is normalized instead of completely flattened. All components have specificity of 0 1 0, and all modified components have specificity of 0 2 0, which makes sense since they have more specific styles.