Skip to main content

Posts

Showing posts with the label CSS

Best Practice for css naming conventions and BEM rules

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 the HTML and CSS in a given project. Here’s an example of what a CSS developer writing in the BEM style might write: /* Block component */ .btn { } /* Element that depends upon the block */ .btn__price { } /* Modifier that changes the style of the block */ .btn--orange { } .btn--big { } In this CSS methodology a  block  is a top-level abstraction of a new component, for example, a button:  .btn { } . This block should be thought of as a parent. Child items, or  elements , can be placed inside and these are denoted by two underscores following the name of the block like  .btn__price { } . Finally,  modifiers  can manipulate the block so that we can theme or style that particular component without inflicting changes on a completely unre