样式预处理与样式声明

样式预处理

样式最基本的语法 (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 {
  /* ## 布局 / Layout */

  /* ### 显示、定位 / Display, Position */
  display: ;
  visibility: ;

  float: ;
  clear: ;

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

  /* ### Flex */
  flex-direction: ;
  flex-wrap: ;
  flex-flow: ;
  justify-content: ;
  align-items: ;
  align-content: ;

  flex-grow: ;
  flex-shrink: ;
  flex-basis: ;
  flex: ;
  align-self: ;
  order: ;

  /* ### Grid */
  grid: ;
  grid-area: ;
  grid-template: ;
  grid-template-areas: ;
  grid-template-rows: ;
  grid-template-columns: ;
  grid-column: ;
  grid-column-start: ;
  grid-column-end: ;
  grid-row: ;
  grid-row-start: ;
  grid-row-end: ;
  grid-auto-rows: ;
  grid-auto-columns: ;
  grid-auto-flow: ;
  grid-gap: ;
  grid-row-gap: ;
  grid-column-gap: ;
  justify-items: ;
  align-items: ;
  place-items: ;
  justify-self: ;
  align-self: ;
  place-self: ;
  justify-content: ;
  align-content: ;
  place-content: ;

  /* ### Columns */
  columns: ;
  column-gap: ;
  column-fill: ;
  column-rule: ;
  column-rule-width: ;
  column-rule-style: ;
  column-rule-color: ;
  column-span: ;
  column-count: ;
  column-width: ;

  /* ## 盒模型 / Box */

  /* ### Box */
  box-sizing: ;

  width: ;
  min-width: ;
  max-width: ;

  height: ;
  min-height: ;
  max-height: ;

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

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

  overflow: ;
  overflow-x: ;
  overflow-y: ;
  resize: ;

  /* ### Border */
  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-radius: ;
  border-top-left-radius: ;
  border-top-right-radius: ;
  border-bottom-left-radius: ;
  border-bottom-right-radius: ;

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

  outline: ;
  outline-color: ;
  outline-offset: ;
  outline-style: ;
  outline-width: ;

  /* ## 背景装饰，文字排版 / Backgrounds, Fonts */

  /* ### box-shadow */
  box-shadow: ;

  /* ### Background */
  background: ;
  background-attachment: ;
  background-clip: ;
  background-color: ;
  background-image: ;
  background-repeat: ;
  background-position: ;
  background-size: ;

  cursor: ;

  opacity: ;

  /* ### Text */
  color: ;

  font: ;
  font-family: ;
  font-size: ;
  font-smoothing: ;
  font-style: ;
  font-variant: ;
  font-weight: ;

  letter-spacing: ;
  line-height: ;
  list-style: ;

  text-align: ;
  text-decoration: ;
  text-indent: ;
  text-overflow: ;
  text-rendering: ;
  text-shadow: ;
  text-transform: ;
  text-wrap: ;

  white-space: ;
  word-spacing: ;

  /* ## 表格 / Table */

  table-layout: ;
  border-collapse: ;
  border-spacing: ;
  caption-side: ;
  empty-cells: ;
  vertical-align: ;

  /* ## 其它 / Other */

  content: ;
  quotes: ;
  speak: ;

  /* ## CSS3 动画 / Animation */

  /* ### Transform */
  backface-visibility: ;
  perspective: ;
  perspective-origin: ;
  transform: ;
  transform-box: ;
  transform-origin: ;
  transform-style: ;

  /* ### Transition */
  transition: ;
  transition-delay: ;
  transition-duration: ;
  transition-property: ;
  transition-timing-function: ;

  /* ### Animation */
  animation: ;
  animation-name: ;
  animation-delay: ;
  animation-duration: ;
  animation-iteration-count: ;
  animation-play-state: ;
  animation-timing-function: ;
  animation-fill-mode: ;

}

扩展阅读：

更新日志：

2022-04-10，调整声明样式示例顺序
2015-07-21

样式预处理与样式声明

样式预处理​

样式声明​

样式预处理

样式声明