BEM – CSS naming convention

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project.

Great reference article about BEM: https://css-tricks.com/bem-101/

/* Block component */
.btn {}
/* Element that depends upon the block */ 
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

Desktop space image

Leave the first comment

Related posts

  • Font Smoothing

    October 7, 2022
    Here is how to get smooth like butter font on your websites.
  • CSS reset basic

    October 6, 2022
    Here is a stripped-down CSS reset code to start the front-end HTML layout. This is just for quick development; otherwise,…
  • How to style data-value attributes with CSS

    October 9, 2022
    Here is a great way to style any data-attributes using CSS properties. Here is the article source courtesy of CCS-Tricks.