Pets vs Livestock: Making the Move from Unique Creatures to Commodities


An analogy that caught the industry interest recently is a comparison of IT delivery styles with how we treat pets versus cattle.*  In a nutshell:

I was feeling pretty good about myself for proposing moving to commodity servers, until I realized I am guilty of the same thing.

In my CSS files, I often write a quick patch for a specific use, and name it with something that seems relevant at the time.  I sometimes ignore the larger applicability of the style, or flexibility within SCSS, or neglect to migrate these larger style patterns to common repositories.  These styles are pets, and lead to anarchy and redundant CSS.

Going forward, we are adopting the BEM standard for CSS naming. BEM stands for Block, Element, Modifier. It is a method used to construct CSS class-names so they are consistent, isolated, and expressive.  The naming convention follows this pattern:

.block {}

.block__element {}

.block--modifier {}

.block represents the higher level of an abstraction or component.

.block__element represents a descendent or dependent of .block that helps form .block as a whole.

.block--modifier represents a different state or version of .block.

This standard focuses us on global uses for styles and makes it easier to find a style than guessing what unique name was chosen at a given time.

A few good resources for learning more about BEM methods are:

• CSSWizardry

• CSS-tricks

• Smashing Magazine


*This analogy was developed by Bill Baker at Microsoft, and expanded on by presenters at CloudScaling and CERN