BEM风格指南

2018-12-12  本文已影响13人  我是刘良

==特征==

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)。

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

布尔类型


<!-- `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>

键值对类型

- 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>

文件格式

==特征==


search-form/                          # 块目录 search-form

    __input/                          # 元素目录 search-form__input

        search-form__input.css        # 实现search-form__input元素的css文件

        search-form__input.js          # 实现search-form__input元素的js文件

    __button/                          # 元素目录 search-form__button

        search-form__button.css

        search-form__button.js

    _theme/                            # 修饰符目录 search-form_theme

        search-form_theme_islands.css  # 实现search-form_theme_islands的css文件

        search-form_theme_lite.css    # 实现search-form_theme_islands的css文件



    search-form.css                    # 实现search-form块的css文件

    search-form.js                    # 实现search-form块的js文件

上一篇 下一篇

猜你喜欢

热点阅读