OOCSS, SMACSS and ITCSS

BEM is not the only way to keep order. Other approaches appeared before and after it, and each has its own main idea. Knowing them is useful: in someone else's project you will recognize familiar techniques, and in your own you can combine them.

OOCSS: structure separate from skin

OOCSS (object-oriented CSS) suggests separating a component's "skeleton" from its "skin". One class sets the layout, another sets colors and borders, and they can be combined in any way:

<style>
  .media { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
  .media__image { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: plum; }
 
  .skin-light { padding: 8px; background: whitesmoke; }
  .skin-accent { padding: 8px; background: lavender; border-left: 4px solid rebeccapurple; }
</style>
 
<div class="media skin-light"><div class="media__image"></div>Anna left a review</div>
<div class="media skin-accent"><div class="media__image"></div>A new message from Ben</div>

The media object — image on the left, text on the right — is the same, but the skin differs. This example also shows that OOCSS ideas are perfectly expressed with BEM names.

SMACSS: five categories

SMACSS splits all styles into categories and marks them with prefixes:

Category	What it holds	Example
Base	default tag styles	`body`, `a`
Layout	large areas of the page	`.l-header`, `.l-sidebar`
Module	components	`.card`, `.menu`
State	states	`.is-active`, `.is-hidden`
Theme	color themes	`.theme-dark`

The is- prefix for states caught on in BEM projects too: an is-open class is often added by a script instead of a modifier.

ITCSS: the inverted triangle

ITCSS describes the order in which to include layers of styles: from the most general and weakest to the most targeted and strongest. Drawn out, it is a triangle pointing down:

██████████████  Settings     variables: colors, fonts
 ████████████   Tools        reusable Sass snippets
  ██████████    Generic      reset, box-sizing
   ████████     Elements     tag styles: h1, a
    ██████      Objects      layout skeletons: .container
     ████       Components   buttons, cards
      ██        Utilities    .hidden, .text-center

Each next layer affects fewer elements and comes later, so it wins over the previous ones without stronger selectors. With @layer cascade layers this order can be fixed right in CSS.

Comparison

Approach	Main idea	How it helps
BEM	block, element, modifier names	no name conflicts, flat specificity
OOCSS	structure separate from skin	less repetition
SMACSS	categories and prefixes	clear where to look for a rule
ITCSS	layer order from general to specific	the cascade works for you

The approaches do not exclude each other. A common combination: files are arranged by ITCSS, components are named by BEM, states use is- classes.

Common mistake

Mixing approaches without an agreement: card__title in one component, cardTitle in the next, card-title in a third. The code becomes no better than with no methodology at all. Choose the rules together with the team, write them down in the project README and follow them everywhere.

Thanks for reading!