BEM——前端命名規(guī)范介紹

Jason 發(fā)布于2019-08-29 14:10 / 2632人閱讀

摘要：什么是是由團(tuán)隊提出的一種前端命名規(guī)范。用法嵌套可以相互嵌套，并且嵌套數(shù)量任意。決定了命名空間，確保不被其他影響。何時用何時用使用創(chuàng)建定義和的外觀狀態(tài)或者行為。特征表示其表現(xiàn)其狀態(tài)和其行為命名方法以單下劃線與或者隔開。

什么是BEM？

BEM(Block, Element, Modifier)是由Yandex團(tuán)隊提出的一種前端命名規(guī)范。其核心思想是將頁面拆分成一個個獨(dú)立的富有語義的塊（blocks）,從而使得團(tuán)隊在開發(fā)復(fù)雜的項目變得高效，并且十分有利于代碼復(fù)用，即便團(tuán)隊引入新成員，也容易維護(hù)。在某種程度上，BEM和OOP是相似的。

Block

Block是邏輯和功能獨(dú)立的單元，類似于組件。每個block包含自身的行為（js）、結(jié)構(gòu)（HTML模板）、表現(xiàn)（css）。block的獨(dú)立性有利于代碼的復(fù)用，有利于項目管理。

Block特點

1.block名描述block功能 ("What is it?" — menu or button), 不包含其狀態(tài) ("What does it look like?" — red or big)。block可以嵌套、復(fù)用。

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

2.block不影響自身布局，也就是說不能設(shè)置margin和position屬性。

3.不能在BEM中使用元素選擇器和ID選擇器。

Element

Element 是block的組成部分，并且不能脫離block使用。

Element特點

1.element表示其目的( item, text, etc.), 而不是其狀態(tài)( red, big, etc.).

2.Element的命名方式：block-name__element-name. element名字和block名字以雙下劃線分開。

Element用法——嵌套

Elements 可以相互嵌套，并且嵌套數(shù)量任意。element只能是block的一部分，也就是說element的命名層級不能是block__elem1__elem2。

block決定了命名空間，確保elements不被其他block影響。

block中的element在css中不需要跟block一起使用，而是獨(dú)立定義規(guī)則。這樣，當(dāng)修改bolck的結(jié)構(gòu)時不需要修改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的關(guān)系

elementy只能作為block的一部分使用,不能獨(dú)立使用。

block不一定含有element。

何時用Element何時用block

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

Modifier

Modifier定義block和element的外觀,狀態(tài),或者行為。

Modifier 特征

Modifier表示其表現(xiàn)("What size?" or "Which theme?" and so on — size_s or theme_islands), 其狀態(tài) ("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

modifier類型：Key-value

modifier不能多帶帶使用

文件組織結(jié)構(gòu)

BEM理論也可以應(yīng)用到工程目錄的組織架構(gòu)中。blocks, elements, 和 modifiers將分開為獨(dú)立的文件。

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

參考更多