BEM简述:
Bem 是块(block)、元素(element)、修饰符(modifier)的简写,利用不同的区块,功能以及样式来给元素命名。
BEM命名的好处
- 光凭class名字就可以让其他开发者知道某个标记用来做什么的,明白各个模块之间的关系
- 组件之间的完全解耦,不会造成命名空间的污染
BEM命名方式:
官网原文表述。
BEM方法通过使用混合或创建额外的块元素来达到相同的结果。您不需要创建额外的抽象包装器。
相对于其他块定位一个块
设置一个块元素相对于其他块元素的位置,最好的方法通常是使用混合class命名。
Example
<body class="page">
<!-- header and navigation-->
<header class="header page__header">...</header>
<!-- footer -->
<footer class="footer page__footer">...</footer>
</body>
.page__header {
padding: 20px;
}
.page__footer {
padding: 50px;
}
定位一个在块元素内的元素
定位一个被嵌套元素的位置时,通常通过创建一个额外的块元素(例如,block__inner)来设置。
Example
<body class="page">
<div class="page__inner">
<!-- header and navigation-->
<header class="header">...</header>
<!-- footer -->
<footer class="footer">...</footer>
</div>
</body>
注意
BEM方法命名时,不使用元素标签和ID选择器。块和元素的样式是由类选择器定义的。
通用类样式
使用通用类样式的元素,可以不考虑BEM方式命名。
Example
button 为通用样式类
<header class="header">
<button class="header__button button button_theme_islands">...</button>
</header>
类选择器取名
命名必须准确地描述它所表示定位元素的实体。
Example
<div class="logo logo_theme_islands">
<img src="URL" alt="logo" class="logo__img">
</div>
<!-- `user` block-->
<div class="user user_theme_islands">
<img src="URL" alt="user-logo" class="user__img">
...
</div>
单一职责原则
就像在面向对象编程中一样,在CSS的BEM方法中,单一职责原则意味着每个CSS实现都必须有单一职责。
Example
HTML
<header class="header">
<button class="button header__button">...</button>
</header>
CSS
.button {
font-family: Arial, sans-serif;
border: 1px solid black;
background: #fff;
}
此时我们写header__button类选择器样式时:
Correct:
.header__button {
margin: 30px;
position: relative;
}
Incorrect:
.header__button {
font-family: Arial, sans-serif;
position: relative;
border: 1px solid black;
margin: 30px;
}
DRY
DRY(“不要重复自己”)是一种软件开发原理,旨在减少代码中的重复。
Example
<button class="button button_theme_islands">...</button>
<button class="button button_theme_simple">...</button>
.button {
font-family: Arial, sans-serif;
text-align: center;
}
.button_theme_islands {
color: #000;
background: #fff;
}
.button_theme_simple {
color: #000;
background: rgba(255, 0, 0, 0.4);
}
如何切换到bem方法的CSS
- 抛开DOM模型,学习创建块。
- 不要使用ID选择器或标签选择器。
- 最小化嵌套选择器的数量。
- 使用CSS类命名约定,以避免名称冲突,选择器名称尽可能具有信息性和清晰性。
- 在块元素和修饰符中定义样式。
- 如果是通用CSS属性,将其提出。
- 使用混合。
- 将代码划分为多个独立的小部分,以便于使用单个块元素。
- 重用块元素。
命名约定的模式
.block{}
.block__element{}
.block--modifier{}
.block 代表了更高级别的抽象或组件。
.block__element代表.block的后代,用于形成一个完整的.block的整体。
.block–modifier代表.block的不同状态或不同版本。
Example
.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */
总的来说,BEM是一个非常有用,强大,简单的命名约定,让前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确而且更加严密。