前端样式规范之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>