BEM is Block (block) the Element (element) Modifier (decorator) short
Use BEM specification named CSS, HTML, select the organization's structure, which will help maintain CSS code, making the code more clear structure (mainly malpractice name will be slightly longer)
The official address
In the selector, the symbol represented by the following three relational extensions:
-
Connection between the symbols used only as a hyphen, represents a block or a sub-element of a multi-word: underlined -
type-block__element--modifier
-
__ double underline: double underline for child elements connecting block and blocks
block__element
-
Modified status sub-block elements and child elements for a double chain line in the modified state in the connector block and a block or blocks: double underlined -
block--modifierblock__element--modifier
References
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!-- 某个块 -->
<
form
class="search-form">
<!-- 某个元素 -->
<
div
class="search-form__content-left">
<!-- 错误：不能出现多个元素 -->
<
h2
class="search-form__content-left__h2">标题</
h2
>
<!-- 某个元素，虽然是子集，保证了只有一级元素 -->
<
input
class="search-form__input">
<!-- 某个元素，加上了hover修饰器 -->
<
button
class="search-form__button search-form__button--hover">搜索</
button
>
<
button
class="search-form__button-set search-form__button-set--hover">搜索1</
button
>
<!-- 错误：不能单独使用lg修饰器 -->
<
button
class="search-form__button--lg">搜索</
button
>
<!-- 块中可嵌套着另一个块 -->
<
p
class="my-img">
<
img
class="my-img__logo" src="abc.png" alt="image" title="image">
</
p
>
</
div
>
</
form
>
<
div
class="search-result"></
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.search-form {
position
:
relative
;
}
.search-form__input {
font-size
:
12px
;
}
.search-form__button--hover {}
/* 避免：避免使用不必要的嵌套（此处只是简单的嵌套，没有必要） */
.search-form__content-
left
.search-form__input {}
/* 稍好的嵌套（此处是在块的theme1修饰器下的子元素，某些时候有必要） */
.search-form--theme
1
.search-form__input {}
/* 错误：使用了标签 */
button.search-form__button {}
.search-form button {}
|