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 值得收藏的插件

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

编译 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 的不用状态或不同版本
  • 修饰符使用的是‘’,子模块使用‘_’,单词连接用‘-’

ACSS

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