CSS命名从此不在纠结

关于CSS命名，有人私问过我，说有时候会出现命名很纠结的情况，class命名感觉就非常乱，有时自己都看不下去了，分不清楚了。

其实写出一套优雅的CSS代码也是一个合格的前端开发人员基本的且重要素质。今天，我就来谈谈我平时是怎么命名CSS的。希望对大家有借鉴作用。

从四个方面，来总结一下：

一、分类处理样式

心中一定要将CSS进行一个分类，不管是小项目还是大项目都希望这样处理。

1、布局（grid）:我们将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等。常用！

2、模块（module）：即语义化的可以重复使用的较大的整体。如导航、登陆、注册、列表、评论、搜索等。常用！

3、元件（unit）：通常是一个不可再分的较为小巧的个体，被重复用于各种模块中，比如按钮、输入框、loading、图表等。常用！

4、功能（function）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动。不常用，不可滥用！

5、皮肤（skin）：对于换肤型网站需要使用，将皮肤型的样式抽离出来，非换肤型网站不可滥用，不常用。

二、遵循一套命名规则

使用类选择器，放弃ID选择器。因为ID在一个页面中的唯一性导致了如果以ID为选择器来写css，就无法重用，而class而优势在于复用性，而且私有度也并不高。因此，我一般情况下会选择在HTML中的ID用于JavaScript，但是在CSS里只用class，一个ID也不用。这样做实际上也是将表现和行为分开，而不是混在一起。

class命名：使用单个字母（分类首字母）+"-"为前缀。

比如：对于header部分，我们可以这样写：

注意1：在css中，样式的选择器总是要以上面的 .g- .m- .u- .f- .s-这五类开头，然后再里面使用后代选择器。

注意2：这并不是说所有的className都需要加这些前缀，对于一些不属于这几种的元素，我们完全可以不加前缀，作为后代选择器使用。

那么如何使用后代选择器呢？注意三点

1、我们约定不以单个字母+“-”为前缀且长度大于等于2的类选择器为后代选择器。

如：.g-date .u-right_arrow{ float: right;} 这个就是不合适的，我们直接写成 .u-right_arrow{ float: right;}即可。

2、一个语义化的标签也可以是后代选择器。

比如.m-list li{}，而不是用.m-list div{}。

3、尽量简约而不失语义

如.m-abc这种完全没有语义，不知道要表达什么，对于相同语义的不同命名，我们可以直接加数字或字母区分即可（如.m-list1、.m-list2,都是列表模块，都通加数字即表示不同的列表模块）。

三、注意一些代码格式

1、选择器、属性和值都用小写

这一点非常关键：根据xhtml规范，所有的标签属性和值都要使用小写形式，而我们知道xhtml更为标准，所以最好遵循之，这样，选择器必须小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了，如class="u-leftArrow"实际上就是不规范的了，最好写成class="u-left_arrow"，也可以表达相同的意思。

2、省略值为0的单位

这样可以节省不必要的字节同时也为了方便阅读，我们将0px、0em、0%等都缩写为0。如下所示：

3、使用16进制表示颜色值，其中的字母使用大写形式，并尽量缩写

除非在你需要透明度而使用rgba，否则都是用#FFFFFF这样的写法，并尽量缩写，如#FFF。使用大写形式，是因为这样更加具有易读性，且有利于压缩，而缩写为了减少不必要的字节。

4、关于属性的书写顺序

这一点可能也是大家比较纠结的一个问题，大部分起初阶段也是乱写，甚至根本没注意这个问题。

根据属性的重要性顺序来书写。即先书写定位布局类属性，在书写盒模型等自身属性，最后书写文本类及修饰类属性。

另外，如果属性间存在关联性，则不要隔开来写。如下代码所示：

其中的height和line-height具有关联性，尽量不要分开写。

5、私有在前，标准在后

先写带有浏览器私有标志的属性，后写W3C标准的属性。因为私有的属性，说明浏览器自身还没有规范化，标准属性是用不了的。若某一天该浏览器的属性规范化了，那么说明标准属性可以使用了，而如果我们先写W3C标准属性，最后写私有属性，就有可能导致私有属性覆盖标准属性。因此私有在前，标准在后的写法是考虑到了以后可能会出现的问题。

其它一些减小CSS文件大小，可以缩写的尽量采用缩写形式等大家注意一下就行了。下面将一些常用的类选择器命名列一下。供大家参考。

四、通常的类选择器如何命名

前面我说过，命名className时，应当以其作用、功能来命名。要有语义化，下面从五个分类出发，列一些通常命名的名字。供参考

1、对于布局，即用.g-作为前缀，通常有以下推荐的写法。

头部： header或head

主体： body

尾部：footer或foot

主栏： main

侧栏：side

盒容器： wrap或box

主栏子容器：mainc

侧栏子容器：sidec

2、对于模块，即.m-作为前缀。元件，.u-作为前缀，通常有下面推荐的写法。

导航： nav

子导航：subnav

菜单：menu

选项卡：tab

标题区：head或title

内容区：body或content

列表：list

表格：table

表单：form

排行：top

热点：hot

登录：login

标志：logo

广告：adervertise

搜索：search

幻灯：slide

帮助：help

新闻：news

下载：download

注册：register或regist

投票：vote

版权:copyright

结果：result

按钮：button

输入：input

3、对于功能，即以.f-为前缀，通常推荐如下：

清除浮动：clearboth

向左浮动：floatleft

向右浮动: floatright

溢出隐藏：overflowhidden

4、对于颜色，即以.s-为前缀，通常推荐如下：

字体颜色：fontcolor

背景：background

背景颜色：backgroundcolor

背景图片：backgroundimage

背景定位：backgroundposition

边框颜色：bordercolor

5、对于状态，即以.z-为前缀，通常推荐如下：

选中:selected

当前：current

显示：show

隐藏：hide

打开：open

关闭:close

出错：error

不可用:disabled

最后总结一下：

说一下CSS选择器使用的注意事项：

1、.m-xxx div{}这种无主义不可取，且会造成大面积污染。

2、.g-zzz .m-xxx{}不可取，类别的选择器的后代选择中不应当包括类别选择器。

3、不要将选择器定的过于冗长，因为选择器的结构越复杂，浏览器的消耗就越大，一般建议在3个长度之内写完。