精简高效的css命名准则

对于css，为了避免样式冲突，我们总会赋予相当特殊的命名，或是在选择符上添加html标记，或是使用层级。我们为避免在冲突上做文章，就会把代码的命名变得复杂化。
如果css的重用性越高，相比就越高效。如果名字越普通就越没有含义，越容易被重用，所以css想要重用性高，就需要命名简单。但是，简单的命名越容易造成冲突
面向属性的命名方法

我们习惯在css命名的时候掺杂语义，这样可以让代码更易懂。例如淘宝中免费注册：help-guest-regist

.l{float:left}
.r{float:right}
.c{clear:both}
.f16{font-size:16px;}
.w265{width:265px;}
.ml62{margin-left:62px;}

当然，如果网站本身的架构不是每个侧栏内容进行模块化处理的话，说实话，这里标题的分离还是有点危险的。想想看，如果哪天产品经理说底部padding值要改成10 像素，如果你的网站架构不合理，含这类标题的模块到处是，会改到你急活攻心，兔血三升而亡
千万不要对网站通用的元素进行分离

精简高效css命名之“三五原则”

• 无ID
• 无标签
• 无辈分层级
• css的命名就应该最简单、最直接，直捣黄龙，没有html标签，没有层级，这些通通滚蛋，

原因解释

1.限制重用
我们会使用层级（#test .test）(ul .test)可能是习惯没有多想，或是为了避免冲突。但是，这些的写法以后都不要用
如果你限制的越多的话，越会使css 的重用性降低。例如#test .test{}这种写法，里面的css 的重用性多大，完全被限死在id为test中了，没有重用性可言了， ul .test 这个ul标签 如果想要体改css优先级，把那个字母长的让人发毛的！important干掉的
降低渲染效率

现在要给ul这个标签一个样式，比如说padding-left：25px；那么下面四种写法那个渲染的速度比较快

#test .test{}.
     ul .test{}
     #test ul{}
     .test{}
     

如果单纯的ul，.test PK拿不准哥哥的渲染速度会更快些。但是，一旦牵扯到层级与标签，.test这种最直接的命名方式渲染速度最高的
css渲染速度和使用javascript获取页面元素那是完全不一样的。如果使用javascript获取dom元素，则#test ul速度是最快的，先获取id在tag获取，
这些都是javascript的内置方法。但是，css的渲染方式则是属于外太空的了，《高性能网站进阶指南》中提到css的渲染方式是从右往左渲染的，就拿#test ul 是先渲染页面上所有的ul元素，再去查询id为test元素 ；这种渲染差异最大为200ms（这里的差异不是单纯一个样式发的差异，而是这些写法泛滥的页面的全部渲染）