前端样式规范之BEM风格

块

==特征==

The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big)

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

 

使用规则

• 块可以嵌套块

• 可以嵌套任意的块

 

元素

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

==特征==

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

命名规范block-name__element-name

 

    

    

    

    Search

使用规则

• 元素里面可以嵌套元素

• 始终是块里面的成员（不能单独使用）

• 块里面可以没有元素

可嵌套

 

成员

 

Search

可选

 

    

    Search

应该创建块还是元素？

创建一个块

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

创建一个元素

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

修饰符

==特征==

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

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

布尔类型

• 仅在修饰符的存在或不存在很重要时使用，并且其值无关紧要。例如，disabled。如果存在布尔修饰符，则假定其值为true。

• 修饰符全名的结构遵循以下模式：

  • block-name_modifier-name

  • block-name__element-name_modifier-name

 

    

    

    Search

键值对类型

• 在修饰符值很重要时使用。例如，“具有islands设计主题的菜单”：menu_theme_islands。

• 修饰符全名的结构遵循以下模式：

  • block-name_modifier-name_modifier-value

 

- block-name__element-name_modifier-name_modifier-value

 

    

    

    Search







    

    

    

修饰符使用规则

• 修饰符不能单独使用

 

    

    Search







    

    Search

混合

 

文件格式

==特征==

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

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

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

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

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

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

• 元素和修饰符的实现分为单独的技术文件。例如，header__input.js和header_theme_islands.css。

 

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