What is the difference between a utility and a component in Nicolas Gallaghers' frontend methodology?

Question

In Nicolas Gallaghers' write up about HTML semantics, he outlines a method of structuring html and css in a modular way (influenced by the BEM architecture). He gives an example, which I don’t completely understand:

/* Utility */
.u-utilityName {}

/* Component */
.ComponentName {}

/* Component modifier */
.ComponentName--modifierName {}

/* Component descendant */
.ComponentName-descendant {}

/* Component descendant modifier */
.ComponentName-descendant--modifierName {}

/* Component state (scoped to component) */
.ComponentName.is-stateOfComponent {}

• First, what I don’t understand is: what is the difference between a utility and a component?
• And where does the difference in notation between these two come from (the utility classname is prefixed with a “u-”)?
• Last; what is the difference between a state and a modifier (they both have separate notation)?

He does not explain this in depth in his article, and I would still like to understand. So I hope someone can answer this.

Answer 1

The utility classes are essentially presentational classes in that modify one presentational aspect of an element. These are useful because they are broadly applicable. You may apply a utility class to a variety of components. Since it isn't specific to a particular component, it isn't necessary to create it as a component modifier.

State classes are a little different from modifier classes in that state is often added, changed, or removed through JavaScript. So the state classes are just a convention that helps keep straight what classes need to be shared between your stylesheet and scripts. You wouldn't normally want to access your modifier classes in your scripts because this starts to unnecessarily couple them to a specific presentation or component.

Answer 2

Ok, so I've looked at his sourcecode, and it looks like the utilities are classes that "do" something, instead of "being" something. So a utility would be something like ".u-textAlignLeft", and a component something like ".EnormousHeader".

This however raises a new question: what is the exact difference between a component state and a utility? If I had to define it it would be that a utility "does" something (.u-textLeft) and a state "does" something that only makes sense in the scope of its component (.is-Disabled for example).

Hope this rambling is of use to anyone!