CSS进化之路

css开发常见问题

CSS解决的是为HTML内容添加样式。那么关键是
1.快速为页面内容添加样式
2.响应UI需求变化，快速修改样式
3.兼容性
常见思路：CSS模块化/组件化,命名优化
总结：后面的所有讨论都围绕上述两点展开

• 指哪打哪：不停的做特殊化
  初步做一些CLASS的分类，然后纯手写，不考虑复用

  
  image
  

  大量的重复，不好DEBUG，不好修改。
  容易引发如下的war

  
  image
  后面的人不停的再重写
• 封装CSS + 快速给标签加class + 局部重写（加前缀）
  例：提前封装.btn .btn-large，然后button class="btn btn-large",需要做特殊化处理的自己加前缀
  封装CSS思路：
  （1）基础样式+状态修饰：OOCSS，bootstrap，BEM,SMACSS
  找可以复用的CSS pattern，写一个基础类，然后根据使用的上下文不同或者状态不同加前缀的方式来完成特异化。
  加前缀的方法有两种:链式命名/前缀式命名
  详见魔法哥的BLOG :https://github.com/cssmagic/blog/issues/45
• CSS in JS
  由于常见框架VUE,REACT等，页面html被切割为具体的组件，解决了模块化的问题，但是还是可以应用封装CSS来做优化。
• 预处理CSS:SASS LESS STYLUS
  提供：模块化，选择符嵌套，变量，运算，mixin等。
  详见：https://github.com/cssmagic/blog/issues/73
• POSTCSS+一系列插件
  实现pre-css的功能，还更加灵活的增加了很多后处理功能。

总结

现阶段我认识到的最吊的CSS开发方式是：
POSTCSS+组件化+命名规范：组件化和命名规范可以自己选