BEM——前端命名规范介绍

摘要：什么是是由团队提出的一种前端命名规范。用法嵌套可以相互嵌套，并且嵌套数量任意。决定了命名空间，确保不被其他影响。何时用何时用使用创建定义和的外观状态或者行为。特征表示其表现其状态和其行为命名方法以单下划线与或者隔开。

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。

Block是逻辑和功能独立的单元，类似于组件。每个block包含自身的行为（js）、结构（HTML模板）、表现（css）。block的独立性有利于代码的复用，有利于项目管理。

1.block名描述block功能 ("What is it?" — menu or button), 不包含其状态 ("What does it look like?" — red or big)。block可以嵌套、复用。

block可以嵌套，并且可以嵌套任意多个block

2.block不影响自身布局，也就是说不能设置margin和position属性。

3.不能在BEM中使用元素选择器和ID选择器。

Element 是block的组成部分，并且不能脱离block使用。

1.element表示其目的( item, text, etc.), 而不是其状态( red, big, etc.).

2.Element的命名方式：block-name__element-name. element名字和block名字以双下划线分开。

    
    

    
    Search

Elements 可以相互嵌套，并且嵌套数量任意。element只能是block的一部分，也就是说element的命名层级不能是block__elem1__elem2。

    

        

        Search
    




    

        
        

        
        Search
    

block决定了命名空间，确保elements不被其他block影响。

block中的element在css中不需要跟block一起使用，而是独立定义规则。这样，当修改bolck的结构时不需要修改css。

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

The block"s structure changes, but the rules for the elements and their names remain the same.

elementy只能作为block的一部分使用,不能独立使用。

    
    

    
    Search











Search

block不一定含有element。

    
    

    
    Search

使用block: If a section of code might be reused and it doesn"t depend on other page components being implemented.
创建element：If a section of code can"t be used separately without the parent entity (the block).

Modifier定义block和element的外观,状态,或者行为。

Modifier表示其表现("What size?" or "Which theme?" and so on — size_s or theme_islands), 其状态 ("How is it different from the others?" — disabled, focused, etc.) 和其行为 ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).

modifier命名方法：以单下划线与block 或者 element 隔开。

    

    
    Search

    

    
        Search
    

modifier不能多带带使用

    

    Search




    

    Search

BEM理论也可以应用到工程目录的组织架构中。blocks, elements, 和 modifiers将分开为独立的文件。

Features:

1.A single block corresponds to a single directory.

2.The block and the directory have the same name. For example, the header block is in the header/ directory, and the menu block is in the menu/ directory.

3.A block"s implementation is divided into separate technology files. For example, header.css and header.js.

4.The block directory is the root directory for the subdirectories of its elements and modifiers.

5.Names of element directories begin with a double underscore (__). For example, header/__logo/ and menu/__item/.

6.Names of modifier directories begin with a single underscore (_). For example, header/_fixed/ and menu/_theme_islands/.

7.Implementations of elements and modifiers are divided into separate technology files. For example, header__input.js and header_theme_islands.css.

search-form/                           # Directory of the search-form

    __input/                           # Subdirectory of the search-form__input
        search-form__input.css         # CSS implementation of the
                                       # search-form__input element
        search-form__input.js          # JavaScript implementation of the
                                       # search-form__input element

    __button/                          # Subdirectory of the search-form__button
                                       # element
        search-form__button.css
        search-form__button.js

    _theme/                            # Subdirectory of the search-form_theme
                                       # modifier
        search-form_theme_islands.css  # CSS implementation of the search-form block
                                       # that has the theme modifier with the value
                                       # islands
        search-form_theme_lite.css     # CSS implementation of the search-form block
                                       # that has the theme modifier with the value
                                       # lite

    search-form.css                    # CSS implementation of the search-form block
    search-form.js                     # JavaScript implementation of the
                                       # search-form block

参考更多