BEM css

I don’t really write BEM css.

Oh, in case you don’t know, BEM is a css structure/philosophy Google really likes. BEM philosophy was created to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.

Hey, shouldn’t every site should be developed quickly and maintainable for a long time? haha

B: Block

E: Element

M: Modifier

BEM focuses on organizing sections of an application/document into purposeful blocks, which are comprised of their functional elements. These elements are then manipulated by modifiers.

/* Block component */.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */.btn--orange {} 
.btn--big {}
<a class="btn btn--big btn--orange" href="">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>

For many years, long before this BEM came out, I felt that blocks shouldn’t depend on each other’s styles. I’ve always tried to write my css so that each block contains all styles necessary for its presentation. The overhead is minimal, but this ensures that I can move blocks freely within a page or even between projects without extra dependencies.

As for elements, they don’t need to be self-contained as they are guaranteed to stay within their parent block and, thus, inherit block styles accordingly.

So BEM is more of a reaffirmation of what I always believed in. I don’t think of BEM as a new css standard. Modularity, DRY, SRP, etc. is never a standard. They are traits of sound philosophy or a theory.

I’ve always written my css in a BEM sort of way; BEM just made sense to me from the beginning.

The reason I hate Bootstrap so much is because Bootstrap is the exact opposite of BEM philosophy. I feel that Bootstrap just wanted to see how deeply nested css can really become.

Not surprisingly, Necolas Gallagher (yeah, the guy who created Bootstrap) has no plans to ever use it. LOL