BEM X Utility

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

Naming things is tough. The complexity compounds when you add Term (duration of project) or Scale (Size of project or personel) or both.

Using systems like BEM or The Single Responsibility Principle might help us manage both term and scale.

Single Responsibility Principle

The Single Responsibility Principle (SRP) dictates that a class should possess a singular task or responsibility. Each class or utility within the library serves a distinct, well-defined purpose. By building them up together we can achieve sophisticated UI that is easy to read and maintane through time. Basically just building on what Bootstrap 3.4.1 has already established.

Important note

Do want to think of this from the css file to the ui and not from the ui to the css file?

If we are to build a card of sorts, and lets say that it is rather unique in terms of seasonal color, radius, padding, etc... we could pack all of the style elements into a single class and properly name it (abstracting it away). Or, we could build it up one element at a time with in line style (more code).

I like building it up one piece at a time. It is easier for me to read. And, in the end, you will probably always have some kind of additional change that needs to be made for example, "hidden", on something that toggles would need to be built in as a single purpose class and not tucked away into the abstracted class.

BEM Convention

Blocks

Blocks are standalone entities that represent a meaningful piece of UI. They form the base structure for components. They are named using lowercase letters and hyphens to separate words.

Example:

.block {
  /* styles for the block */
}

Elements

Elements are parts of blocks and cannot exist without their parent block. They are named using double underscores (__).

Example:

.block__element {
  /* styles for the element */
}

Modifiers

Modifiers are used to alter the appearance or behavior of blocks or elements. They are named using double hyphens (--).

Example:

.block--modifier {
  /* styles for the block modifier */
}

.block__element--modifier {
  /* styles for the element modifier */
}

Pros / Cons:

• BEM can lead to longer class names.
• I tend to think the block, the element, and the modifier is typically already implied - a bit redundant.
• BEM assumes that you know ahead of time what is a Block an Element and a Modifier or you need to refactor.

Proposal

I propose that we use the Single Responsibility Utility Principle over everything!