BEM

Some of my first tasks at Planning Center involved updating the blank-state illustrations throughout the Check-Ins product, where the lead illustrator would provide me with a new image, and I would go in and swap it with the old one. I would generally need to add additional styling to the image so that it would display correctly.

Since now I was adding additional CSS styling at this point, Check-Ins designer Jonathan Suh gave me the short-and-sweet regarding CSS naming - specifically, he introduced me to Block-Element-Modifier (BEM), - specifically, he introduced me to Block-Element-Modifier (BEM), a widely used naming convention for CSS. BEM outlines a clear and readable naming strategy for CSS classes.

Here’s a breakdown of BEM:

1. Block: This is the item that has inherent meaning. It can be named with letters, numbers, or dashes

   .piano

2. Element: This is the item that is part of the block. It is named by combining the block name with two underscores and a name of its own that describes a part of the block.

   .piano__keys

3. Modifier: This changes the attribute of a block entity or element. It is named by combining either the block name or a block name and element name with two dashes and a name of its own.

   .piano--black
   .piano__keys--black

Here’s a link to an article about BEM naming comventions.

Obligatory css-tricks.com link here.