点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
关于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个长度之内写完。