BEM

In frontend-land we use BEM notation to name our classes.

Don't forget to use overall REM instead of PX (maybe for "box-shadows" and "borders" properties if you don't want them to scale.)

Short for Blocks, Elements and Modifiers.

A Block — represents a standalone entity.
A Element — represents a part of a block semantically tied to its block.
A Modifier —represents a flag on a block or element which can change its behavior.

First off, wait… Are your telling me the symbols -- and __ have a different meaning in BEM?

.block
block__element
block--modifier

Example Card:

In this example, we have a block called “card,” which contains a content element and a button element. The button element also has a “primary” variation, which acts as a modifier. The HTML code defines the structure of the card component, using a div with a class of “card” as the main container.
The card represents a block. Inside the card container, there are various other elements, such as a content area and a button. Each of these elements has a class name that starts with “card__,” which indicates that they are children of the “card” block. The class “card__content” is applied to the content area. The class “card” is used to style the main container of the card component and all its children elements.
The modifier is added as a class to the button element, following the BEM naming convention. The class name “card__button–primary” indicates that it is a variation of the “card__button” element. The CSS code uses this class to style the primary button differently from the default button.

html

<div class="card"> 
  <div class="card__content"> 
    <h3 class="card__title">Card Title</h3> 
    <p class="card__text">Card text</p> 
  </div> 
  <button class="card__button">Button</button> 
  <button class="card__button card__button--primary"> 
    Primary Button 
  </button> 
</div>

Example Form:

The form block is represented by the class “form“. This is the main container for the form and it is used to apply styles that affect the entire form.
The labels and inputs are elements of the form block, they are represented by the classes “form__label” and “form__input” respectively. These elements are used to apply styles that affect only the labels and inputs of the form.
The submit button is also an element of the form block and is represented by the class “form__submit“. It is used to apply styles that affect only the submit button of the form.
The submit button also has a modifier called “disabled” which is represented by the class “form__submit–disabled“. This modifier is used to apply styles that change the appearance of the submit button when it is disabled.

html

<form class="form">
  <!
  <label class="form__label" for="name"> 
      Name: 
  </label> 
  <input class="form__input" id="name" type="text" placeholder="Enter your name">

  <label class="form__label" for="email"> 
      Email: 
  </label> 
  <input class="form__input" id="email" type="email" placeholder="Enter your email">

  <label class="form__label" for="password"> 
      Password: 
  </label>
  <input class="form__input" id="password" type="password" placeholder="Enter your password"> 

  <button class="form__submit form__submit--disabled" type="submit" disabled>Sign Up</button> 
</form>

✨ Well done! You now know all about BEM notation If you have any questions don't hesitate asking your colleagues!

Introduction

OnboardingRead me