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 saving our time: everyhour.xyz for your life balance; tree-meals-a-day.earth for our food emissions and compairbnb.info/hello for booking airbnbs.

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

Recommended from Medium

Generic Data Sources in Swift

7 Reasons you should learn Python now

Problem statement- Palindromes

What is … Configuration Management?

ECS vs. OOP by example

Starting a build a game a week type challenge.

Securing your credentials and environment variables with AWS

Automate deployment with CloudWatch Events and Lambda

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 saving our time: everyhour.xyz for your life balance; tree-meals-a-day.earth for our food emissions and compairbnb.info/hello for booking airbnbs.

More from Medium

JavaScript Coding Language

Just a couple of useful HTML tricks that no one told you about…

How SASS, SCSS is making our life easier

Coding principles and JavaScript