DEV Community

BEM - A CSS Naming Convention

Charissa Johnson on July 10, 2020

What is BEM? BEM is an acronym for Block, Element, and Modifier and is a methodology for creating reusable CSS. BEM works by providing a...

Read full post

Charissa Johnson • Jul 10 '20

You're not wrong, the modifier is just the -- at then end of the name though. I just used simple class names for the purpose of demonstration. The listItems are still elements, just elements with a modifier.

Salvador Hernandez • Jul 10 '20 • Edited

I like BEM because it makes CSS feel more like you're working with Classes and Inheritance even if its just for syntax purposes. I prefer using Sass with the SCSS syntax because it feels better organized as well. Below is how CSS would look like using SCSS

.nav {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;

    /* Element */
    &__ul {
        background-color: white;
        color: #fff;
        padding-right: 12px;
        padding-left: 12px;
        margin-right: -10px; /* realign button text padding */
        font-weight: 600;
        background-color: #333;
        opacity: 0.4;
        border-radius: 5px 0 0 5px;
        }

    &__li {
        /* Modifier */
        &--blue {
            color: blue;
            font-size: 28px;
            padding: 10px;
            font-weight: 400;
        }

        /* Modifier */
        &--red {
            border-color: #0074d9;
            color: white;
            background-color: #0074d9;
        }

        /* Modifier */
        &--hover{
            &:hover {
            border-color: #ff4136;
            color: white;
            background-color: #ff4136;
            }
        }
    }
}

Charissa Johnson • Jul 10 '20

I actually plan to have a future post with SASS and SMACSS!

johanna • Jul 10 '20

👏👏👏👏

𒎏Wii 🏳️‍⚧️ • Jul 10 '20

Nice description, but it sure makes me wonder why people are constantly fighting CSS instead of just using it the way it handles best. What's the appeal of writing HTML like it's 2000 again?

Sharvilak • Jul 11 '20

Not sure what did you mean here by What's the appeal of writing HTML like it's 2000 again?. Could you please elaborate?

𒎏Wii 🏳️‍⚧️ • Jul 13 '20

In the early days of HTML, when CSS was not a thing and, later on, when CSS was very new and unreliable and developers were just not used to it yet, the way to style your website was through HTML tags. The advantage of CSS is that you can pull styling out of the HTML into a different document and set up axiomatic rules for how things should look on the whole website. These days, however, developers have gone back to the old style, but they've replaced tags with classes. All the styling is put in the HTML document and only some generic rules are described in CSS, effectively making for a more verbose version of what we already had in the past. I'm wondering why that is. There's clearly some appeal to this very explicit styling aproach of telling each element what it should look like, but I fail to understand what could possibly outweigh all of the benefits of a mostly axiomatic CSS structure.

emmaliefmann • Jul 10 '20

This makes a lot of sense, definately going to implement it in my next project!

Charly S. • Jul 11 '20

Great I love a naming convention, CSS can be actually madness with a zillion classes out there. I honestly feel the double underscore a little too much but I might get used to it.

Branko Stancevic • Jul 11 '20

Inuitcss + bem = perfect combination. :D

Mitesh Kamat • Jul 10 '20

Good description