Loading...

#fiveminutefriday

Why I use the BEM naming convention for my CSS

36,044 views

Loading...

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Nov 9, 2018

If you've watched any of my recent videos, you'll know that I use the BEM naming convention for my CSS classes. In this video, I explore why I use it, and why I think you should, at the very least, use some sort of naming convention.

BEM stands for Block, Element, Modifier, and it presents us with a way to make more organized and readable CSS.

I like BEM (mostly, I'm not super strict with my use of it) and think it's a great methodology for naming my CSS classes, but there are many others such as OOCSS, SMACSS, Atomic, and many others. BEM isn't the right answer, it's simply one possible answer. I strongly suggest you read up on the others as well and try to adopt one that you think makes the most sense.

BEM: http://getbem.com/introduction/
OOCSS: http://oocss.org/
SMACSS: https://smacss.com/
Atomic CSS: https://github.com/nemophrost/atomic-css

#fiveminutefriday
---

I have a newsletter! https://www.kevinpowell.co/newsletter

New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

---

Support me on Patreon: https://www.patreon.com/kevinpowell

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell...
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

Loading...

Advertisement
When autoplay is enabled, a suggested video will automatically play next.

Up next


to add this to Watch Later

Add to

Loading playlists...