CSS时代的简化与挑战

探索现代前端工作流程下CSS的演变与思考

1. CSS工具与自动化的发展

  • 很多人评论,我更新下,现在css已经很简单了,不像以前,写个css开6个浏览器,3个手机看有没有bug.

现在已经有postcss
这种集大成者出现。

浏览器不兼容?我用post css 的autoprefixer给你编出来。

  • 重复渲染?我用plugin css nano 给你删掉,(会过删减删错删,但如果错删,那说明你的css写的有点小问题)
  • Vh Vw等不兼容?我用vh plugin 给你解决
  • 不能nesting? 我用plugin css nested 给你解决。
  • 写的css 太新老浏览器运行不了,我给你编成旧的css 再运行

2. 现代CSS环境的进步

而且现在浏览器发展成熟,ccs很多新特性,都解决了以前写css的困难。已经算是减少压力了。

3. CSS难点与个人经验

Css其实很难,但不建议深入学,我写了挺久的 css动画,经常还是遇到bug,为什么呢?
当你追求省代码,减少代码,减少重复渲染时,css是很难的,

但是css允许你代码又臭又长,html元素滥用,乱套div,我见过有人的css发现有问题就套个div上去重新写。重复渲染也没关系,所以当很多人说css是门糟糕的语言,我觉得它还是挺好的。至少只要能写出来,就算成功。以至于还流行tailwind这种原子思想的css.

4. CSS特性与挑战

  • 首先Css不是正交性的,这就意味改变a的同时b会随着改变。正常使用还好,如果遇到复杂的动画,我基本就是在修bug 的路上。
  • CSS可以覆盖,全局。当JavaScript 的局域性越来越强,css 的是全局性在处理display的优势就出来了。

5. HTML元素与自适应

其次是html element 自带块级元素,也就是有些html element本身自带块级元素。Html块圾元素本身有着很多自适应功能,如collapse, auto padding, margin。但是有些块圾就没有自适应。………

6. 新手友好的CSS

但是,也正因为正交,全局,覆盖,这使得css对新手很友好。

曾经有人说,我是不是每行html都用flexbox,这样不就不用担心对不齐了…………当你遇到css bug 时,你可以直接覆盖上去。就像油画一样……