BEM——前端命名规范介绍

骑猪看日落 2021-09-18 16:04 679阅读 0赞

## 什么是BEM？ ##

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

## Block ##

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

### Block特点 ###

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

<div class="error"></div>
    
    
    <div class="red-text"></div>

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

<header class="header">
        
        <div class="logo"></div>
    
        
        <form class="search-form"></form>
    </header>

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

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

## Element ##

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

### Element特点 ###

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

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

<form class="search-form">
        
        <input class="search-form__input">
    
        
        <button class="search-form__button">Search</button>
    </form>

### Element用法——嵌套 ###

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

<form class="search-form">
        <div class="search-form__content">
            <input class="search-form__input">
    
            <button class="search-form__button">Search</button>
        </div>
    </form>
    
    
    <form class="search-form">
        <div class="search-form__content">
            
            <input class="search-form__content__input">
    
            
            <button class="search-form__content__button">Search</button>
        </div>
    </form>

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.

### Element与block的关系 ###

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

<form class="search-form">
        
        <input class="search-form__input">
    
        
        <button class="search-form__button">Search</button>
    </form>
    
    
    
    <form class="search-form">
    </form>
    
    
    <input class="search-form__input">
    
    
    <button class="search-form__button">Search</button>

block不一定含有element。

<div class="search-form">
        
        <input class="input">
    
        
        <button class="button">Search</button>
    </div>

### 何时用Element何时用block ###

使用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 ##

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

### Modifier 特征 ###

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 隔开。

### modifier类型：Boolean ###

<form class="search-form search-form_theme_islands">
        <input class="search-form__input">
    
        
        <button class="search-form__button search-form__button_size_m">Search</button>
    </form>

### modifier类型：Key-value ###

<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">
            Search
        </button>
    </form>

modifier不能单独使用

<form class="search-form search-form_theme_islands">
        <input class="search-form__input">
    
        <button class="search-form__button">Search</button>
    </form>
    
    
    <form class="search-form_theme_islands">
        <input class="search-form__input">
    
        <button class="search-form__button">Search</button>
    </form>

## 文件组织结构 ##

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

[参考更多][Link 1]

[Link 1]: https://en.bem.info/