Making CSS/HTML readable — BEMIT it?

What’s BEMIT?

What’s BEM?

  • 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?

The Prefixes

  • 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!

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

The Suffixes

Is there anything else?

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

The Summary

One last thing:

/* Project Meta */

/* reset */

/* general */

/* typography */

/* grid */

/* header */

/* footer */

/* Page template A */

/* Page template B */

/* Media Queries */

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Nail your next Java dev interview

Dialogflow CX Webhook Tutorial 2022

Conversation is just a game.

Generating and Solving Mazes using Graph Algorithms

Introduction to Markdown

France driving license template in PSD format

Apollo GraphQL Subscriptions for latency sensitive communication — Part1

Hotfix (Patch Notes) Update — 18th of December 2020

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

More from Medium

And That’s a Wrap!

Practice Makes Perfect

Hello Bootstrap, my new best friend! (CSS in wk 2 of SheCodes Plus)

My first project at Flatiron School