Page 137 - CSS

Examples are disabled, highlighted, checked, fixed, size big & color yellow

The goal of BEM is to keep optimize the readability, maintainability and flexibility of your CSS
code. The way to achieve this, is to apply the following rules.

• Block styles are never dependent on other elements on a page
• Blocks should have a simple, short name and avoid _ or - characters
• When styling elements, use selectors of format blockname__elementname
• When styling modifiers, use selectors of format blockname--modifiername and
blockname__elementname--modifiername
• Elements or blocks that have modifiers should inherit everything from the block or element it
is modifying except the properties the modifier is supposed to modify

Code example

If you apply BEM to your form elements, your CSS selectors should look something like this:

.form { } // Block
.form--theme-xmas { } // Block + modifier
.form--simple { } // Block + modifier
.form__input { } // Block > element
.form__submit { } // Block > element
.form__submit--disabled { } // Block > element + modifier

The corresponding HTML should look something like this:

<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>

Read CSS design patterns online: https://riptutorial.com/css/topic/10823/css-design-patterns

https://riptutorial.com/ 115