- Clean HTML.
- Clean LESS/SASS.
- Reduce HTML size since it's not cacheable.
- Prevent cross selector for depended elements.
Provide each parent element (block) with a unique class with no separators (- nor _).
.element
<!-- Html -->
<div class="element"></div>Any inside element should be precedded by a dash (-), except content sectioning elements (section, article, aside, h1..h6, header, footer, ...).
.element h1
.element-description
.element-items
.element-item
<!-- Html -->
<div class="element">
<h1>Title</h1>
<p class="element-description">Description text.</p>
<ul class="element-items">
<li class="element-item">Item 1</li>
<li class="element-item">Item 2</li>
<li class="element-item">Item 3</li>
</ul>
</div>Adjectives should be started with an underscore (_) without being attached to the element, sub-adjectives should be separated by a dash (-)
.elemt-item._active
.elemt-item._primary
.element-description._color-black
<!-- Html -->
<div class="element">
<h1>Title</h1>
<p class="element-description _color-black">Description text.</p>
<ul class="element-items">
<li class="element-item _active _primary">Item 1</li>
<li class="element-item">Item 2</li>
<li class="element-item">Item 3</li>
</ul>
</div>Full CSS
/* CSS */
.element {}
.element h1 {}
.element-description {}
.element-description._color-black {}
.element-items {}
.element-item {}
.element-item._active {}
.element-item._primary {}
/* LESS/SAAS */
.element {
h1 { }
&-description{
&._color {
&-black {
}
}
}
&-items {}
&-item {
&._active {}
&._primary {}
}
}<!-- HTML -->
<!-- ----------------------- -->
<!-- Using BEM -->
<form class="form form--theme-christmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>
<!-- Using Angry Monkey -->
<form class="form _theme-christmas _simple">
<input class="form-input" type="text" />
<input class="form-submit _disabled" type="submit" />
</form>/* CSS */
/* ----------------------- */
/* Using BEM */
.form {}
.form--theme-christmas {}
.form--simple {}
.form__input {}
.form__submit {}
.form__submit--disabled {}
/* Using Angry Monkey */
.form {}
.form._theme-christmas {}
.form._simple {}
.form-input {}
.form-submit {}
.form-submit._disabled {}
/* LESS/SAAS */
/* ----------------------- */
/* Using BEM */
.form {
&--theme {
&-christmas {}
}
&--simple {}
&__input {}
&__submit {
&--disabled {}
}
}
/* Using Angry Monkey */
.form {
&._theme {
&-christmas{}
}
&._simple {}
&-input {}
&-submit {
&._disabled{}
}
}Do
/* CSS */
.element._adjective { }Don't
/* CSS */
._adjective { }Do
/* CSS */
body > header {}
body > footer {}
/* LESS/SASS */
body {
> header {}
> footer {}
}Don't
/* CSS/LESS/SASS */
header {}
footer {}Recommended
<!-- Html -->
<div class="element">
<ul class="element-items">
<li class="element-item">Item 1</li>
<li class="element-item">Item 2</li>
<li class="element-item">Item 3</li>
</ul>
</div>Not Recommended
<!-- Html -->
<div class="element">
<ul class="element-items">
<li class="element-items-item">Item 1</li>
<li class="element-items-item">Item 2</li>
<li class="element-items-item">Item 3</li>
</ul>
</div>Recommended
<!-- Html -->
<body>
<header>
<nav></nav>
</header>
</body>/* CSS */
body > header nav {}Not Recommended
<!-- Html -->
<body>
<header class="header">
<nav class="header-nav"></nav>
</header>
</body>/* CSS */
.header-nav {}Recommended
<!-- Html -->
<div class="element">
<h1></h1>
<p class="element-description"></p>
</div>Not Recommended
<!-- Html -->
<div class="element">
<h1 class="element-title"></h1>
<p class="element-description"></p>
</div>Recommended
/* LESS/SASS */
main {
.element {}
.form {}
}Not Recommended
/* CSS/LESS/SASS */
.element {}
.form {}