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:
- Pets are owned in small numbers, uniquely named, hand reared and lovingly cared for — they are, by all considerations, members of the family. When they get ill, you nurse them back to health.
- Cattle are owned in large numbers, tagged using a standard system, identical, managed in herds, and bought and sold as a commodity — they are, in effect, food. When one gets ill, you replace it with another one.
- Many traditional IT departments are pet owners. Servers and applications are designed from an enterprise perspective — services are tightly coupled, relying on scale-up systems and relational databases. They are lovingly and expensively cared for, with great attention and affection.
- Modern commodity server users are cattle ranchers. Applications are designed to require little maintenance, to handle failure and to scale out. Services are loosely coupled and stateless. If a server fails it is easier to replace than fix — there is no emotional attachment. Moving from pet owners to cattle ranchers would allow us to be more nimble and focus our efforts more on writing application code that makes us different.
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