说到CSS命名，其实里面还有有很多思考的空间的。
经过我短浅的见识，以下谈谈我对于CSS命名的一些了解和见解。
其中，我发现有两种风格对立的命名方法。
-
面对元素命名
这是一种比较普遍的做法。
给元素设定类名的时候，尽可能的语义化，贴近元素本身。
比如在给左边栏的头部空间定义类名的时候，
可能会做出 .side-left-header 这样的类名，
这样命名的好处是，样式表只用一个类名就可以定位元素，
而且一眼就能看出这是为哪个元素设定样式，
维护起来比较方便，省去很多查找时间。
但是缺点也比较明显，
类名太长，有时候可能类名比要设定的属性还要长。
另外就是复用性的问题，
若当有另一个元素，也与它有相同的属性表现，
又要重新设置一个类名，并且内容还是一样的。
这听起来就比较恶心了吧。 -
面对属性命名
而另一个与之相反的方案，
就是把CSS属性都打散，
为一种属性设置设置一个类名，比如.fs16 { font-size: 16px; } .fs20 { font-size: 20px; } .m10 { margin: 10px; } .p20 { padding: 20px; }这样的CSS命名方法，
明显缩短了类名的长度，也大大提高了代码的复用性。
在一些属性重复比较多的项目里，把CSS文件压缩到了极致。
但是，如果使用这样的CSS命名方式，
HTML文档中也多出了许多class代码。
而且当需要修改样式时，是需要查找HTML文件修改的。 -
还有一种风格
另外，还有一种 “ 超脱于尘世 ” 的命名方法。
.a {height: 100px;} .b {font-size: 2em;} .z {background: none;}这种命名简直就是简单粗暴，
每一个类名相当于只是一个标志，并没有任何意义。
这种极度简洁的命名方式其实还是可以接受的。
在一些不需要语义，不需要考虑维护性的地方，
可以带来相当大的便利甚至眼前一亮。
-
综上所述，说点总结。
两种命名规则，都各有各的优点，当同时缺点也比较明显，
面对元素命名，清晰但臃肿，
面对属性命名，高效但维护成本高。其实，两种规则看似矛盾，但我举得还是可以适当揉合
以元素命名为基础，在一些复用性比较高的属性上，
把它们提取出来，单独作为一个类，方便重复使用。虽然说起来简单，这还是需要不少的经验和功力的，
最主要的我觉得还是这个意识吧。应该有个大局意识，从着手之前就该有个概念，
哪些属性复用性比较高，提前把它拎出来。
我觉得我首先可以从 .clear .in-block 等元素开始。
-
最后稍稍附一些命名规范
| 命名 | 内容 |
|---|---|
| 重要部分 | |
| 外套 wrap | 用于最外层 |
| 头部 header | 用于头部 |
| 主要内容 main | 用于主体内容（中部） |
| 左侧 main-left | 左侧布局 |
| 右侧 main-right | 右侧布局 |
| 导航条 nav | 网页菜单导航条 |
| 内容 content | 用于网页中部主体 |
| 底部 footer | 用于底部 |
| 具体元素 | |
| wrapper | 页面外围控制整体布局宽度 |
| container或content | 容器,用于最外层 |
| layout | 布局 |
| head, header | 页头部分 |
| foot, footer | 页脚部分 |
| nav | 主导航 |
| subnav | 二级导航 |
| menu | 菜单 |
| submenu | 子菜单 |
| sideBar | 侧栏 |
| sidebar-a, sidebar-b | 左边栏或右边栏 |
| main | 页面主体 |
| tag | 标签 |
| msg message | 提示信息 |
| tips | 小技巧 |
| vote | 投票 |
| friendlink | 友情连接 |
| title | 标题 |
| summary | 摘要 |
| loginbar | 登录条 |
| searchInput | 搜索输入框 |
| hot | 热门热点 |
| search | 搜索 |
| search-output | 搜索输出和搜索结果相似 |
| searchBar | 搜索条 |
| search-results | 搜索结果 |
| copyright | 版权信息 |
| branding | 商标 |
| logo | 网站LOGO标志 |
| siteinfo | 网站信息 |
| siteinfoLegal | 法律声明 |
| siteinfoCredits | 信誉 |
| joinus | 加入我们 |
| partner | 合作伙伴 |
| service | 服务 |
| regsiter | 注册 |
| arr/arrow | 箭头 |
| guild | 指南 |
| sitemap | 网站地图 |
| list | 列表 |
| homepage | 首页 |
| subpage | 二级页面子页面 |
| tool, toolbar | 工具条 |
| drop | 下拉 |
| dorpmenu | 下拉菜单 |
| status | 状态 |
| scroll | 滚动 |
| .tab | 标签页 |
| .left .right .center | 居左、中、右 |
| .news | 新闻 |
| .download | 下载 |
| .banner | 广告条(顶部广告条) |
这篇文章其实是启发自大神——张鑫旭的精简高效的CSS命名准则
同时还有另一篇文章可以参考——DIV+CSS规范命名大全集合
Wait me back
