BEM命名规范

一套规范的命名一般来说有两个好处，提高代码可读性和防止样式污染，什么是css样式污染，举个例子。

.base input {
  background:red;
}

或许你只是想给class='base’的某一个后代input元素添加一个样式，这样写一不小心就把所有的input元素背景都变成了红色。
当你的工程非常庞大的时候，这种情况就非常容易出现，BEM（block element modifier）规范就解决了这个问题。

BEM的基本规则如下：

当一个block或element或modifier包含多个单词时, 用一个中划线-链接,例如要表示一个搜索表单的block可以命名为.serach-form

block和element用双下划线__链接, 例如block名为search-form的一个子元素button，就可以命名为：search-form__button

element和modifier用双中划线–链接, 如表示按钮的不同状态,例如默认：el-button–default 成功：el-button–success

js控制样式时,css命名用is-开头,例如is-success、is-failed、is-disabled

所以讲了半天，什么是block什么是elelment呢。

1、block

block名描述功能 (“What is it?” — header or button), 不包含其状态 (“What does it look like?” — red or big)。
在block的命名上也要尽量语义化，例如footer、header、card等等（具体见附录）
block的名字如果比较长，也可以命名成带“-”的，例如“search-form”
他的命名上主要有以下几点要注意：1、负责描述功能，不应该包含状态。

/* correct */
.header {
​
}
​
/* wrong */
.header--select {
​
}

不影响自身布局，不包含具体的样式，也就是block里面不应该加样式。这样做的好处是当修改bolck的结构时不需要修改css。

/* correct */
.header {
​
}
​
/* wrong */
.header {
    margin-top: 50px;
}

不能使用元素选择器和ID选择器

/* correct */
.header {
​
}
​
/* wrong */
.header a {
    margin-top: 50px;
}

2、Element（.block__element）

元素（element）是块的子节点。为了表明某个东西是一个元素，你需要在块名后添加 __element。所以，如果你看到一个像那样的名字，比如 header__button ，你将立即知道 header 块中有一个 button元素。

<p class="header">
    <p class="header__body">
        <button class="header__button"></button>
    </p>
</p>

同时，她不能脱离Block父级单独使用

/* wrong */
<p>
    <p class="header__body">
        <button class="header__button"></button>
    </p>
</p>

3、Modifier（.block–modifier）

表示的是一个状态，或者说是一种修饰，是用双横杠分开的（为什么要用双横杠，是为了和前文说到的这种情况区分//当一个block、element或modifier很长，可以用单横杠“-”连接）
例如淘宝选择商品属性按钮，选中和没选中有两个状态，除了背景颜色和字体颜色没有其他不同的，这时候就定义两个这两个背景和字体颜色的样式就称作modifier。

.button--unselect{

}

.button--selected{

}

modifier也不能不能单独使用

/* wrong */
<p>
    <p>
        <button class="header__button--primary"></button>
        <button class="header__button--default"></button>
    </p>
</p>

附录

block命名参考

头	header	内容	content/container
尾	footer	导航	nav
侧栏	sidebar	栏目	column
页面外围控制整体布局宽度	wrapper	左右中	left right center
登录条	loginbar	标志	logo
广告	banner	页面主体	main
热点	hot	新闻	news
下载	download	子导航	subnav
菜单	menu	子菜单	submenu
搜索	search	友情链接	friendlink
页脚	footer	版权	copyright
滚动	scroll	内容	content
标签	tags	文章列表	list
提示信息	msg	小技巧	tips
栏目标题	title	加入	joinus
指南	guide	服务	service
注册	regsiter	状态	status
投票	vote	合作伙伴	partner

· css命名参考-导航

导航	nav	主导航	mainnav
子导航	subnav	顶导航	topnav
边导航	sidebar	左导航	leftsidebar
右导航	rightsidebar	菜单	menu
子菜单	submenu	标题	title

· css命名参考-功能

标志：	logo	注册：	register
广告：	banner	登录条	loginbart
登陆	login	搜索	search
功能区：	shop	标题	title
加入	joinus	状态	status
按钮	btn	滚动	scroll
标签页	tab	文章列表	list
提示信息	msg	当前的	current
小技巧	tips	图标:	icon
注释	note	指南	guild
服务	service	热点	hot
新闻	news	下载	download
投票	vote	合作伙伴	partner
友情链接	link	版权	copyright