CSS WorkFlow

介绍一个好玩的工具。lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具

正式开始

• CSS预处理器（处理浏览器）
  • sass、less、stylus
  • 预处理器常用规范
    • 变量
    • 混合（Mixin）Extend
    • 嵌套规则
    • 运算
    • 函数
    • Namespaces & Accessors
    • Scope
    • 注释
• CSS后处理器（该删的删，该加的加，增加前缀，包括可以兼容IE6）
  • CSS压缩 CLEAN-CSS
  • 自动添加浏览器前缀 Autoprefixer
  • CSS更加美观排序 CSScomb
  • Rework（编译压缩等）取代Stylus（只能负责编译） 后处理器发热
  • 前后通吃PostCSS

css处理被分成了两步，一步是sass、less，一步是到上线前的后处理器（通过AST‘抽象语法树’去分析）

postcss

js修改css

cssnext

image-set

POSTCSS值得收藏的插件

• POSTCSS-CUSTOM-PROPERTIES运行时变量
• POSTCSS-SIMPLE-VARS 与SASS一致的变量实现
• POSTCSS-MIXINS 实现类似SASS的@MIXIN的功能
• POSTCSS-EXTEND 实现类似SASS的继承功能
• POSTCSS-IMPORT 实现类似SASS的IMPORT
• CSSNEXT 面向未来 CSS Grace 修复过去

也可以集成到gulp编译

编译node不需要webpack，我们用gulp+rollup（tree shaking）。

面向对象的CSS

• OO CSS的概念解读
• OO CSS的作用和注意事项
• OO CSS代码实战

众多开发者忽视了CSS的表现（认为他太过简单，是一种机械的工作），而且更多关注在JavaScript的性能上或者其他方面。

OO CSS将页面可重用元素抽象成一个类，用Class加以描述，而与其对应的HTML即可看成是此类的一个实例。

CSS分层与面向对象

为什么要分层？

• SMACSS
• BEM
• SUIT
• ACSS
• ITCSS

原因：

• CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。
• 大量的样式、覆盖、权重和很多！important，分好层可以让团队命名统一规范，方便维护。
• 有责任感地去命名你的选择器。

BEM

• BEM和SMACSS非常类似，主要用来如何给项目命名。一个简单命名更容易让别人一起工作。比如选项卡导航是一个块（Block），这个块里的元素是其中标签之一（Element），而当前选项卡是一个修饰状态（Modifier）
• block 代表了更高级别的抽象或组件
• block__element 代表block后代，用于形成一个完整的block的整体
• block_modifier 代表block的不用状态或不同版本
• 修饰符使用的是‘’，子模块使用‘_’，单词连接用‘-’
  
  

  BEM示例
  
  
  

  防止被侵入，做一个namespace

ACSS

• 考虑如何设计一个系统的接口。原子（Atoms）是创建一个区块的最基本的特质，比如说表单按钮。分子（Molecules）是很多个原子（Atoms）的组合，比如说一个表单中包括了一个标签，输入框和按钮。生物（Organisms）是众多分子（Molecules）的组合物，比如一个网站的顶部区域，他包括了网站的标题、导航等。而模板（Templates）又是众多生物（Organisms）的结合体。比如一个网站页面的布局。而最后的页面就是特殊的模板。

  
  
  

  ACSS

cssnext + postcss + bem + oocss + acss + csshint/eslint + webpack + node + cdn + md5(etag)