CSS命名

前面的话

  每次写HTML结构涉及到CSS命名时，都要挣扎一番。关于CSS命名的规范，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在这里面最火的应该算BEM了。本文将详细介绍CSS命名

BEM

  说起CSS命名，当然要提到BEM。BEM的意思就是B模块(block)、E元素(element)、M修饰符(modifier)。模块和子元素之间用两个下划线分隔，子元素和修饰符之间用两个中划线分隔

  关于子元素E，有两种写法。一种是按照层级嵌套来写，如block-ele1-son-inner，但是这样写会导致命名过长；另一种是扁平化，一个模块B下的所有子元素，无论相互层级如何，都直接连接B，如block-inner，但是这样就无法表示层级关系，命名时也可能会出现冲突

  BEM的命名是很好的，不然也不能成为最流行的命名方法。但是，由于对BEM中子元素的命名，无论是层级长命名还是扁平化短命名，都不能满意。所以，开始寻找其他的命名方法

NEC

  相较于BEM以模块B为顶级元素，子元素类名中包含继承关系的命名，网易的NEC规范使用后代选择器方式

  NEC将元素分为了5类：布局(grid)(.g-)；模块(module)(.m-)；元件(unit)(.u-)；功能(function)(.f-)；皮肤(skin)(.s-)；状态(.z-)。而后代选择器不需要完整表现结构树层级，尽量能短则短

.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}

  个人认为，网易对于元素分类的做法很好。关于一些全局可复用的功能性的模块进行区分，结构更为清晰。但是，对于使用后代选择器的方式，个人还是不太喜欢。当嵌套层级较深时，命名冲突依旧是一个问题

jd

  京东的命名规则采用表示层级嵌套关系的长命名。当子孙模块超过4级或以上的时候，考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="">
                <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
                <div class="miui_tit"></div>
                <div class="miui_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

  京东这种因为子元素名字过长而采用首字母缩写的做法非常赞。至今我没有发现别的更好的解决长命名的方案

命名推荐

about                   关于
account                 账户
arrow                   箭头图标
article                 文章
aside                   边栏
audio                   音频
avatar                  头像
bg,background           背景
bar                     栏(工具类)
branding                品牌化
crumb,breadcrumbs       面包屑
btn,button              按钮
caption                 标题，说明
category                分类
chart                   图表
clearfix                清除浮动
close                   关闭
col,column              列
comment                 评论
community               社区
container               容器
content                 内容
copyright               版权
current                 当前态，选中态
default                 默认
description             描述
details                 细节
disabled                不可用
entry                   文章，博文
error                   错误
even                    偶数，常用于多行列表或表格中
fail                    失败(提示)
feature                 专题
fewer                   收起
field                   用于表单的输入区域
figure                  图
filter                  筛选
first                   第一个，常用于列表中
footer                  页脚
forum                   论坛
gallery                 画廊
group                   模块，清除浮动
header                  页头
help                    帮助
hide                    隐藏
hightlight              高亮
home                    主页
icon                    图标
info,information        信息
last                    最后一个，常用于列表中
links                   链接
login                   登录
logout                  退出
logo                    标志
main                    主体
menu                    菜单
meta                    作者、更新时间等信息栏，一般位于标题之下
module                  模块
more                    更多(展开)
msg,message             消息
nav,navigation          导航
next                    下一页
nub                     小块
odd                     奇数，常用于多行列表或表格中
off                     鼠标离开
on                      鼠标移过
output                  输出
pagination              分页
pop,popup               弹窗
preview                 预览
previous                上一页
primary                 主要
progress                进度条
promotion               促销
rcommd,recommendations  推荐
reg,register            注册
save                    保存
search                  搜索
secondary               次要
section                 区块
selected                已选
share                   分享
show                    显示
sidebar                 边栏，侧栏
slide                   幻灯片，图片切换
sort                    排序
sub                     次级的，子级的
submit                  提交
subscribe               订阅
subtitle                副标题
success                 成功(提示)
summary                 摘要
tab                     标签页
table                   表格
txt,text                文本
thumbnail               缩略图
time                    时间
tips                    提示
title                   标题
video                   视频
wrap,wrapper            容器，包，一般用于最外层

个人实践

  对于我个人而言，以BEM为基础，以NEC的模块分类和JD的长命名缩写来解决CSS命名的问题

  仅以结构来说，子级(.hd-logo)的类名中包含父级类名(.hd)，父子级类名用一条中划线分隔。表示状态的类名在已有类名基础上加一个尾巴(一条下划线加状态名)(.hd-logo_active)。如果子级类型超过3个中划线，则用首字母缩写的方法来缩短类名(.hd-nav-list-tips缩短为.hnlt)

  如果因为样式关系，不得不在元素外层或里层增加一层HTML结构，则直接在元素类名基础上增加首字母大写的Wrap或Inner，如'.hdWrap'或'.hdInner'

  如果是页面公用样式，则以m为前缀表示一个模块，后面跟着一条中划线及具体功能名，如'.m-nav'

  以一个简单的header为例来进行说明

<header class="hd">
    <div class="hdInner">
        <div class="hd-logo">
            <h1 class="hd-logo-name">name</h1>
            <a class="hd-logo-link" href="#">
                <img class="hll-img" src="#" alt="#">
            </a>
        </div>
        <div class="hd-navWrap">
            <nav class="hd-nav m-nav">
                <a class="hd-nav-link hd-nav-link_active" href="#">1</a>
                <a class="hd-nav-link" href="#">2</a>
                <a class="hd-nav-link" href="#">3</a>
            </nav>              
        </div>  
    </div>
</header>

最后的话

  关于CSS命名，其实并没有最佳实践之说，根据项目的复杂程序进行合适的命名才是可取的

  欢迎交流