精简的CSS命名规则
2016-05-19 本文已影响254人
犯迷糊的小羊
teren君在之前的写过《CSS选择器与优先级浅析》的技博，让笔者或是看官初步了解的CSS选择器的分类和优先级的规定，但是到这里我们又牵扯出另一个问题：在实际写代码时，如何精简高效地写出合适的选择器以便浏览器更好地渲染和提高用户体验呢？
本文首先说明使用精简的CSS命名规则的意义，为各位提供学习的动机。
其次，在收集、帅选和归纳网络各位大神的技术博客的基础上，提供一些基本的命名原则以形成精简CSS命名的思维和方法。
最后，提供一些基础的CSS命名优化的案例，从实例去具体认识其奥妙之处。
1.CSS命名规范的意义
这里所说i的命名规范有两层含义，一是命名含义与元素相关，二是命名内容要精简，具体例子如下：
命名含义与元素相关
精简的命名规则
从我对命名规范的理解，可以演绎出命名规范的意义所在：
- 富有含义的命名规定对于开发者来说，更容易读懂
- 精简的命名规范能够提高代码的整洁度和用户体验
- 精简的含义不仅仅包括命名的简洁性，还包括浏览器对页面的渲染速度，即良好的命名规范可以提高页面渲染速度
- 良好的命名规则会在精确性和复用性上权衡
2. CSS基本的命名原则
这里的命名原则是参考张鑫旭的技博，是他工作和学习的总结，鉴于笔者刚入前端不久，也不敢瞎写，一来贻笑大方，而来误人子弟。下面内容仅供参考之用，具体运用应结合每个人的实际情况。
虽然关于CSS的选择器有很多，但是在使用选择器时尽可能的直击目标。
CSS命名规范
3.CSS命名优化案例
- 案例1
下面的CSS命名极其冗长，导致光是选择器就占用不少存储空间
使用以下的排版方式会更加美观和精简一些，虽然仍会显得有些长，但是在可接受范围内。
- 案例2
<div id="test">
<ul class="test"></ul>
</div>
现在要给这里的ul标签一个样式，比如说padding-left:25px;那么下面四种写法哪个渲染速度最快？#test .test{}， ul.test{}，#test ul{} 以及.test{}。
无疑，.test{}渲染速度最快，《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素，而.text{}则是直接匹配到class="text"所在的元素。
【注】以上的案列均来自张鑫旭的技术博客
参考资料
