Making CSS/HTML readable — BEMIT it?

What’s BEMIT?

Woah there, let’s do BEM first.

What’s BEM?

Woahhh there… just kidding.

  • Block is a thing
  • Element is a thing in a thing
  • Modifier is a thing of a certain type required to be displayed differently
  • A Block in our YouTube example would be the card.
  • An Element in this example would be the image or the details.
  • A Modifier in our example is whether it is a video card or a channel card or maybe a small card or a big card.
/* in CSS file */.block {}
.block__element {}
.block--modifier {}
.card {}.card--video__image {}
.card--video__details {}
.card--channel__image {}
.card--channel__details {}
.card {}
.video {}
.channel{}
.image{}
.details{}
.card {}
.car-channel {}
.car-video {}
.card-channel-image {}
.card-video-image {}
.card-channel-details {}
.card-video-details {}
  • Does applying the naming convention here actually help understand where it is?
  • Will this styling be used in other places?
  • Is the styling unique?

Right so BEMIT?

BEM is so 2013. Essentially people have criticised BEM for only showing relationships between parents and child (blocks and elements). It doesn’t actually show what is reusable. This has become a more prominent as frameworks like React have gained popularity as they are designed to rely heavily on building code like lego pieces — having small reusable elements of code that work together to build bigger bits.

The Prefixes

The prefixes focus on understanding what function the element has:

  • c- stands for Component — potentially made from objects or just used occasionally
  • o- stands for Objects — reusable and commonly used (think a button design)
  • u- stands for Utilities — generally applied CSS
  • is- \ has- stands for State — I am not going to get into .this.
  • _ stands for a hack
._c-footer--mobile {
height: 80px;
}

See from that example you already know that someone has hacked together a component for the mobile footer. We are learning!

Back to business. The hack notation.

  • js- stands for …(*drumroll*)… JavaScript

The Suffixes

I said there were two parts to BEMIT. I know it is long. I am sorry.

Is there anything else?

Yeahh, if you use a text editor with autofill, this consistency in naming will become baked in and it will start suggesting things that will help structure your class names more consistently.

[class^="c-"],
[class*=" c-"] {
outline: 5px solid cyan;
}

The Summary

So BEMIT is BEM plus a few other things. BEM is essentially labelling. BEMIT is essentially more labelling.

One last thing:

In my travels reading up on this I found this which I will be using from now on to structure my CSS:

/* Project Meta */

/* reset */

/* general */

/* typography */

/* grid */

/* header */

/* footer */

/* Page template A */

/* Page template B */

/* Media Queries */

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ACGoff

ACGoff

Focused on climate: treemeals.co ; time: everyhour.xyz for your life balance