DEV Community

Discussion on: What is BEM and why use it to name your HTML classes!

View post

Replies for: I've seen this many times before, and still don't understand why this is at all useful. If I want to target the hero__img img, I'd have to select ...

Collapse
 
damsalem profile image
Dani Amsalem • • Edited

The reason BEM is great is because CSS is read right to left by your browser. Check out this two paragraph article css-tricks.com/why-browsers-read-s...

I also was struggling trying to understand why BEM, but understanding the right-left concept helped. Essentially, all elements are given a class and because they are specific to that item or type of item, your browser doesn't have to do as much work to apply styles.

In addition, I use the SCSS preprocessor and BEM is a-mazing when the two are combined.

Instead of repeating my selectors like this:

.main {}
.main__title {}
.main__text {}
.main__text-special {}
Enter fullscreen mode Exit fullscreen mode

I can nest them using the ampersand selector:

.main {
  &__title {}
  &__text {}
  &__text-special {}
}
Enter fullscreen mode Exit fullscreen mode

If you want some more detailed breakdowns of BEM, I suggest checking out Kevin Powell's YouTube video explaining it youtube.com/watch?v=SLjHSVwXYq4