BEM, What is that!?

stories_of_ren profile image ⚡️Ren⚡️ ・2 min read

BEM, What is that?

One of my favorite things, as well as one of the more frustrating things about being a self-taught developer, is that you are constantly learning. This quality is great because I love learning and gaining new knowledge. It is frustrating, because when there is always something missed and when it’s brought up then comes the imposter syndrome (well at least for me it is).

I tend to work in Frontend development when it comes to my software engineering teams, not to say that I’m not able to work full-stack I just understand visuals and designers better than others. In my past, I achieved a Masters in Fine Art, so the Frontend development work really does just make sense to me. So in a recent project when my naming conventions for classes were brought up for not following BEM Standards…

I was like what is that️!? So now that I know, let me tell you about it!

BEM is Block, Element, Modifier

It is a standard naming convention when creating your Class names for CSS styling practices.

Block is a page component, of which can be nested in other blocks or placed independently. The block holds within it a full scale of power, including but not limited to behavior, templates, styles. Blocks can often be reused throughout the code.

Block example

An Element is a part of the Block. It shouldn’t be used outside of the block. In class names, there can be a generalized form of an element to use in a global instance.

Element example

Modifier is a descriptor entity. Its job is to define the appearance and behavior of a block or element.

Modifier example

Having this in my tool belt is something that is going to make me a better programmer and a produce cleaner code.

Happy Coding!

Posted on by:

stories_of_ren profile



Self taught Software Engineer. I have a preference for frontend.


Editor guide