无废话网页重构系列——（11）样式预处理与样式声明

样式预处理

样式最基本的语法(Syntax)是 Selectors { Properties:Values }，就是一个声明(Declaration)，告诉排版引擎：将我声明的选择器(Selectors)，按我的呈现规则(Rules)来渲染。

面向设计稿书写完样式，日常最基本需求：如颜色或内外间距要修改、公用部分样式、层级嵌套选择器书写、组件化样式分割然后合并、兼容性前缀…，都是要手动一条条修改添加；高级点的需求，如颜色计算、数学计算、条件执行、循环处理，要么借助第三方工具手动操作，要么无解。

因此，我们需要一个样式“工程化”的解决方案，因此，CSS预处理来了，它提供了编程语言中基本语法和函数接口等一般编程所需的抽象机制，可以“编译”打包成符合CSS标准的样式文件，这样逻辑化、程序化CSS代码，好重用、好维护、好扩展。另外还有PostCSS这类CSS后处理实现。区别在于预处理器需要先按特定的语法和逻辑规则书写代码，然后进行编译，后处理器是直接操作CSS源代码进行解析编译。

CSS预处理目前实现有Sass、Less、Stylus；

它们大多具有“变量(Variables)嵌套(Nesting)、混合(Mixins)、扩展(Extends)、色彩函数(Color Operations)、循环(Loops)、Math、导入(Imports)、流程控制声明(if/else/for/each/while)、运算符”等编程语言风格的语法和功能，使用场景、需求方案上都差不多，拥护群体都多；

熟悉一种，切换到另一种也不是难事，最终都是要结合中大型项目和打包才能发挥其作用；

如果有用到像jade这种缩进式风格模板引擎(Template Engine)的，就选Sass或Stylus，接近CSS语法的就选Less、Scss；

建议参考Bootstrap和WeUI源码。

预处理只是囿于当前标准规范在技术方案上的权宜之计，随着需求，必定会有标准规范和更先进的技术方案诞生(适用于其它方面)，可以关注cssnext了解CSS Features。

样式声明

遵循选定的规范，不用标签选择器、全局选择器，不用!important。

书写样式，建议采用Emmet方案，快。

建议按以下顺序声明样式，便于维护：

影响文档流的属性
盒模型的属性
排版属性
背景装饰属性
生成内容属性
其它CSS3属性(兼容性前缀由autoprefixer打包添加)

盒模型方位顺序：上、右、下、左；

不建议按属性首字母顺序声明样式，如position: absolute;中的top/right/bottom/left定位声明，还有width/height的声明，中间会有其它属性间隔，不能便捷的添加和修改。

参考：

selector {
  display: ;
  visibility: ;
  float: ;
  clear: ;

  position: ;
  top: ;
  right: ;
  bottom: ;
  left: ;
  z-index: ;

  width: ;
  min-width: ;
  max-width: ;
  height: ;
  min-height: ;
  max-height: ;
  overflow: ;

  margin: ;
  margin-top: ;
  margin-right: ;
  margin-bottom: ;
  margin-left: ;

  padding: ;
  padding-top: ;
  padding-right: ;
  padding-bottom: ;
  padding-left: ;

  border: ;
  border-top: ;
  border-right: ;
  border-bottom: ;
  border-left: ;

  border-width: ;
  border-top-width: ;
  border-right-width: ;
  border-bottom-width: ;
  border-left-width: ;

  border-style: ;
  border-top-style: ;
  border-right-style: ;
  border-bottom-style: ;
  border-left-style: ;

  border-color: ;
  border-top-color: ;
  border-right-color: ;
  border-bottom-color: ;
  border-left-color: ;

  outline: ;

  font: ;
  font-family: ;
  font-size: ;
  line-height: ;
  font-weight: ;
  text-align: ;
  text-indent: ;
  text-transform: ;
  text-decoration: ;
  letter-spacing: ;
  word-spacing: ;
  white-space: ;
  vertical-align: ;
  color: ;

  background: ;
  background-color: ;
  background-image: ;
  background-repeat: ;
  background-position: ;
  background-size: ;

  opacity: ;

  cursor: ;

  list-style: ;

  content: ;
  quotes: ;

  transition: ;
  transform: ;
  animation: ;
  }