CSS命名规范
实践
<header class="hd">
<nav class="hd-navbar m-navbar m-varbar_primary">
<div class="hd-navbar-tel">联系方式：400-888-8888</div>
<ul class="hd-navbar-nav">
<li class="Hnn-itm m-btn m-btn_info"><a href="#">登录</a></li>
<li class="Hnn-itm m-btn"><a href="#">快速注册</a></li>
<li class="Hnn-itm m-btn"><a href="#">关于</a></li>
<li class="Hnn-itm m-btn"><a href="#">帮助</a></li>
</ul>
</nav>
</header>
<div class="carousel">
<div class="carousel-banner">
<a class="carousel-banner-item Cbi_slide1 Cbi_active" href="#"></a>
<a class="carousel-banner-item Cbi_slide2" href="#"></a>
<a class="carousel-banner-item Cbi_slide3" href="#"></a>
<a class="carousel-banner-item Cbi_slide4" href="#"></a>
</div>
<a class="carousel-control carousel-control_prev" href="javascript:;"><</a>
<a class="carousel-control carousel-control_next" href="javascript:;">></a>
<div class="carousel-indicators">
<span class="carousel-indicators-item Cii_active"></span>
<span class="carousel-indicators-item"></span>
<span class="carousel-indicators-item"></span>
<span class="carousel-indicators-item"></span>
</div>
</div>
【后代选择器还是类名】
关于CSS命名，最大的争论就是使用后代选择器还是使用类名。以下例所示
<ul class="list">
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
</ul>
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
如果采用第一种长类名的方式，为<li>元素设置样式，只需如下设置即可
.list-item{}
如果采用第二种短类名的方式，则为<li>元素设置样式，需如下设置
.list .item{}
如果采用第三种后代选择器的方式，则为<li>元素设置样式，需如下设置
.list li{}
如果从简易角度来看，第三种后代选择器的方式最简单，无需花时间去给子元素起名，且在sass中书写很容易
.list{
li{}
}
但是，它有一个很严重的问题，就是如果HTML结构层级较深，往往出现选择器层级过长，如.list li span a{}
而且，因为后代选择器强烈地依赖HTML结构，为了避免因为少写一层结构，导致选择器特殊性降低，样式无法生效的情况，也不得不这样写
一个不得不提的问题是，CSS选择器的解析顺序是从右到左。而使用后代选择器.list li{}，浏览器需要遍历出所有的li，再找出.list下的li，效率是最低的
介绍第一种长类名的方式（BEM方法）
这种方式的选择器效率最高，因为.list-item这个类型页面中只出现一次，可类比于id选择器的解析速度
由于使用长类名的方式，可以完全不使用后代选择器，则无需考虑选择器特殊性较低，样式无法生效的情况，也不会出现选择器层级过长，因为它仅有一级
但是，相应地，它最大的缺点是类名较长，大大地增加了HTML文件大小。于是，可借鉴京东，当子孙模块超过3级时，采用首字母缩写，并将缩写后首字母大写的做法，在如将.list-item-link-title缩写为.Lil-title
最终，选择可缩写的长类名作为CSS命名的主要方式
【分隔符】
一般地，classname分隔符有3种，中划线-，下划线_，以及首字母大写，以分隔list和item为例
//中划线
list-item
//下划线
list_item
//首字母大写
listItem
1、中划线
中划线可以用来表示层级关系
<div class="box">
<ul class="box-list">
<li class="box-list-item"></li>
<li class="box-list-item"></li>
<li class="box-list-item"></li>
</ul>
</div>
2、下划线
下划线可以用来表示不同的状态
<div class="box">
<button class="box-btn box-btn_default" type="button"></button>
<button class="box-btn" type="button"></button>
</div>
3、首字母大写
首字母大写可以用来表示因为样式的需要，而不得不增加的HTML结构。一般地，如果在外层增加结构，可以增加Wrap，在内层增加结构，可以增加Inner，且不影响原先的classname的命名
<div class="boxWrap">
<section class="box">
<h2 class="box-title"></h2>
<p class="box-content"></p>
</section>
</div>
【组件】
通过上面的长命名方式和分隔符的使用，解决了基础结构的命名。但是，在页面中，很可能出现一些组件的应用，这些组件可以复用到页面的多个位置。这时，再使用上面的方式就不太合适
于是，可以以m-为前缀，来表示这是一个组件
<div class="box">
<button class="m-btn m-btn_error" type="button"></button>
<button class="m-btn" type="button"></button>
</div>
命名推荐
- 【布局】
文档 doc
头部 header(hd)
主体 body
尾部 footer(ft)
主栏 main
侧栏 side
容器 box/container
- 【通用部件】
列表 list
列表项 item
表格 table
表单 form
链接 link
标题 caption/heading/title
菜单 menu
集合 group
条 bar
内容 content
结果 result
- 【组件】
按钮 button(btn)
字体 icon
下拉菜单 dropdown
工具栏 toolbar
分页 page
缩略图 thumbnail
警告框 alert
进度条 progress
导航条 navbar
导航 nav
子导航 subnav
面包屑 breadcrumb(crumb)
标签 label
徽章 badge
巨幕 jumbotron
面板 panel
洼地 well
标签页 tab
提示框 tooltip
弹出框 popover
轮播图 carousel
手风琴 collapse
定位浮标 affix
【语义化小部件】
品牌 brand
标志 logo
额外部件 addon
版权 copyright
注册 regist(reg)
登录 login
搜索 search
热点 hot
帮助 help
信息 info
提示 tips
开关 toggle
新闻 news
广告 advertise(ad)
排行 top
下载 download
- 【功能部件】
左浮动 fl
右浮动 fr
清浮动 clear
- 【状态】
前一个 previous
后一个 next
当前的 current
显示的 show
隐藏的 hide
打开的 open
关闭的 close
选中的 selected
有效的 active
默认的 default
反转的 toggle
禁用的 disabled
危险的 danger
主要的 primary
成功的 success
提醒的 info
警告的 warning
出错的 error
大型的 lg
小型的 sm
超小的 xs
