css 命名规范之BEM
已被阅读 916 次 | 文章分类:css | 2017-08-01 13:06
该篇文章以实例来介绍一种简单的Css命名规范:BEM;,不推荐使用驼峰式(camel case)命名CSS;所以从现在开始就培养这个简单好用的命名规范
一:关键原理
BEM是Block、Element、Modifier的首字母缩写简称；简单来说Block即一个块区域，Element是块中的元素，Modifier是对元素或者块的修饰符，BEM命名格式有以下几种；B_E:Block与Element用"_"连接； B--M:Block与Modifier用"--"连接； B_E--M:可以组合使用，连接方式一样;下面以实例示范；
二:代码实例
<!DOCTYPE html>
<html>
<head>
<title>CSS 命名规范之BEM</title>
<style type="text/css">
.btn {
background-color: gray;
margin: 0 10px;
padding: 10px 5px;
text-decoration:none;
display:inline-block;
}
.btn_name {
font-size: 16px;
background-color: #b9b9f9;
}
.btn_address {
font-size: 8px;
}
.btn--blue {
background-color: #b9ffe8;
}
.btn--green {
background-color: #96ff32;
}
.btn_name--big {
font-size:20px;
}
.btn_address--blue {
color:#29ffc5;
}
div {
background-color:#b5a8a8;
}
</style>
</head>
<body>
<div>
<a href="#" class="btn">
<span class="btn_name">小白GIS</span>
</a>
<a href="#" class="btn btn--blue">
<span class="btn_name">小白GIS</span>
<span class="btn_address">中国</span>
</a>
<a href="#" class="btn btn--green">
<span class="btn_name">小白GIS</span>
<span class="btn_address">中国</span>
</a>
<a href="#" class="btn">
<span class="btn_name--big">小白GIS</span>
<span class="btn_address--blue">中国</span>
</a>
</div>
</body>
</html>
三:实例效果
下一篇:DOM事件冒泡机制以及阻止原理