html BEM - 块元素修饰符

Posted 2021-05-11

<!-- non-BEM -->

<form class="site-search  full">
    <input type="text" class="field">
    <input type="Submit" value ="Search" class="button">
</form>

<style>
.field { } /* specificity: 1 */
.button { } /* specificity: 1 */
.site-search { } /* specificity: 1 */
.site-search.full { } /* specificity: 2 */
.site-search .field { } /* specificity: 2 */
.site-search .button { } /* specificity: 2 */
.site-search.full .field { } /* specificity: 3 */
.site-search.full .button { } /* specificity: 3 */
</style>

<!-- BEM -->

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field field">
    <input type="Submit" value ="Search" class="site-search__button button">
</form>

<style>
.field { } /* specificity: 1 */
.button { } /* specificity: 1 */
.site-search { } /* specificity: 1 */
.site-search--full { } /* specificity: 1 */
.site-search__field { } /* specificity: 1 */
.site-search__button { } /* specificity: 1 */
.site-search--full .site-search__field { } /* specificity: 2 */
.site-search--full .site-search__button { } /* specificity: 2 */
</style>

<!-- BEM with Sass -->
<!-- the “multi-class” pattern is preferred, though, so what's above is best. -->
<!-- It does not mean that because Sassy CSS allows it that it is best. -->

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>

<style>
.field { } /* specificity: 1 */
.button { } /* specificity: 1 */
.site-search { } /* specificity: 1 */
.site-search--full { } /* specificity: 1 */
.site-search__field { 
  @extend .field; /* so we don't need to edit common fields styles in 2 places */
  ...
} /* specificity: 1 */
.site-search__button {
  @extend .button; /* so we don't need to edit common button styles in 2 places */
  ...
} /* specificity: 1 */
.site-search--full .site-search__field { } /* specificity: 2 */
.site-search--full .site-search__button { } /* specificity: 2 */
</style>

<!-- Classes have more specificity than elements in selectors, 
but using elements (nav, header, ul) inside selectors increases coupling 
between HTML structure (semantics) and presentation. -->

<!-- Great read on all of this: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ -->