这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战
书写顺序
相关属性一组
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
说明
（1）由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。
（2）盒模型排在第二位，因为它决定了组件的尺寸和位置。
（3）其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”
简写命名
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦!
16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢?
输入的时候少按一个shift键;
浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“_”)
不要随意使用Id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
不要使用 @import
与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。
替代方法
（1）使用多个 元素
（2）通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
（3）通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
CSS的命名规范(BEM,OOCSS)：
什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
命名约定如下：
.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。
优点：
BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。
缺点：
这样类名过于长，且复杂。
什么是OOCSS（面向对象CSS）：
OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。
以下是一个基础库创建的样式：
.metadata{
font-size: 1.2em;
text-align: left;
margin: 10px 0;
}
若在给其添加更多的样式：
.metadata{
font-size: 1.2em;
margin: 10px 0;
/*在基础组件上新加的样式*/
width: 500px;
background-color: #efefef;
color: #fff;
}
这样就使前面创建的基础组件metadata变成了一个特定的组件了，使其在其他场景下较难复用。
优点：
- 减少CSS代码。
- 具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。
- 语义标记，有助于SEO。
- 更好的页面优化，更快的加载时间（因为有很多组件重用）。
- 可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。
- 能轻松构造新的页面布局，或制作新的页面风格。
缺点：
OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
