CSS之BEM指南

块

== 特征 ==

The block name describes its purpose (“What is it?” — menu or button), not its state (“What does it look like?” — red or big)
块名称描述了它的用途(“它是什么?”-菜单或按钮)，而不是它的状态(“它看起来像什么?”-红色或大的)。

<!--正确示例-->

<div class="error"></div>

<!--错误示例-->
<div class="red-text"></div>

使用规则

• 块可以嵌套块
• 可以嵌套任意的块

<header class="header">

    <div class="logo"></div>

    <form class="search-form"></form>

</header>

元素

属于块的一部分,不能单独使用

== 特征 ==

元素名称描述了它的用途(“它是什么?”-菜单或按钮)，而不是它的状态(“它看起来像什么?”-红色或大的)。
命名规范block-name__element-name

<!-- `search-form` 块 -->

<form class="search-form">

    <!-- 这是`search-form` 块的元素`input` -->

    <input class="search-form__input">

    <!-- 这是`search-form` 块的元素`button` -->

    <button class="search-form__button">Search</button>

</form>

---

使用规则

• 元素里面可以嵌套元素
• 始终是块里面的成员（不能单独使用）
• 块里面可以没有元素

可嵌套

<div class="block">

    <div class="block__elem1">

        <div class="block__elem2">

            <div class="block__elem3"></div>

        </div>

    </div>

</div>

成员

<!-- 这样单独使用元素是错的-->

<button class="search-form__button">Search</button>

可选

<!--这些块里面都没有元素-->

<div class="search-form">

    <input class="input">

    <button class="button">Search</button>

</div>

---

应该创建块还是元素？

创建一个块

如果一段代码可能被重用，并且它不依赖于正在实现的其他页面组件

创建一个元素

如果一段代码不能单独使用，或者没有父实体（块）就不能使用。

---

修饰符

== 特征 ==

该修改名称描述其外观（“多大？”或者“哪个主题？”等等- size_s或theme_islands）其状态（“它和其它的块（元素）有什么不同？” - disabled，focused等），其行为（“如何它的行为是什么？“或”它如何响应用户？“ - 例如directions_left-top）。

修饰符名称通过单个下划线（_）与块或元素名称分隔

---

布尔类型

• 仅在修饰符的存在或不存在很重要时使用，并且其值无关紧要。例如，disabled。如果存在布尔修饰符，则假定其值为true。
• 修饰符全名的结构遵循以下模式
  • block-name_modifier-name
  • block-name__element-name_modifier-name

<!-- `search-form`块带有`focused`修饰符  -->

<form class="search-form search-form_focused">

    <input class="search-form__input">

    <!-- `button` 元素带有 `disabled`修饰符 -->

    <button class="search-form__button search-form__button_disabled">Search</button>

</form>

键值对类型

• 在修饰符值很重要时使用。例如，“具有islands设计主题的菜单”：menu_theme_islands。 这里theme和islands就是键值对
• 修饰符全名的结构遵循以下模式
  • block-name_modifier-name_modifier-value

 block-name__element-name_modifier-name_modifier-value

<!-- `search-form` 块的修饰符是 `theme` 它的值为 `islands` -->

<form class="search-form search-form_theme_islands">

    <input class="search-form__input">

    <!-- `button` 元素的修饰符是 `size` 它的值为 `m` -->

    <button class="search-form__button search-form__button_size_m">Search</button>

</form>

<!-- 这个是错误的，不能同时使用两个相同的修饰符 -->

<form class="search-form

            search-form_theme_islands

            search-form_theme_lite">

    <input class="search-form__input">

    <button class="search-form__button

                  search-form__button_size_s

                  search-form__button_size_m">

    </button>

</form>

---

修饰符使用规则

• 修饰符不能单独使用

<!--这是正确的，存在`search-form`块，有`theme`修饰符，它的值为islands-->

<form class="search-form search-form_theme_islands">

    <input class="search-form__input">

    <button class="search-form__button">Search</button>

</form>

<!-- 这是不正确的，因为`search-form`块样式不见了 -->

<form class="search-form_theme_islands">

    <input class="search-form__input">

    <button class="search-form__button">Search</button>

</form>

混合

<!-- `header` block -->

<div class="header">

    <!--

        The `search-form` block is mixed with the `search-form` element

        from the `header` block

    -->

    <div class="search-form header__search-form"></div>

</div>

---

文件格式

== 特征 ==

• 单个块对应于单个目录。

• 块和目录具有相同的名称。例如，header块位于header/目录中，menu块位于menu/目录中。

• 块的实现分为单独的技术文件。例如，header.css和header.js。

• 块目录是其元素和修饰符的子目录的根目录。

• 元素目录的名称以双下划线（__）开头。例如，header/__logo/和menu/__item/。

• 修饰符目录的名称以单个下划线（_）开头。例如，header/_fixed/和menu/_theme_islands/。

作者：九月三秋
链接：https://www.jianshu.com/p/9c2880ca9a15
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。