CSS样式开发未来的三项技术——SASS、CSS-in-JS和TailwindCSS

228 阅读4分钟

现在(2022)的Web开发 在工具选择上 真是太多了,就「前端 样式」[注] 一项任务就有很多发展的技术,本文说说三项主流技术的特点和区别。

注:web开发 可分为 后端(RH开发的MVC),前端(V组件的 UI结构,样式和交互)多种任务

SASS

作为对「原生CSS」的功能扩展,预处理技术(preprocessor)像SASS,相信是很多人一直以来的 CSS 开发技术方案。「原生CSS」本身是很容易学,但写出来的“程序”很难维护。「难维护」的意思是,当项目增大时(包手增加人手),添加新功能和修改功能 都很费劲。

提高「可维护性」的一点,是项目 的「样式功能」 必须有一种客观的 结构,团队一致认同的 样式结构,这样可以降低编程维护时的推理成本。BEM (Block Element Modifiers) getbem.com/ 就是这样的一种总结客观结构的尝试。

预处理技术 再加上 BEM 能提高 「样式开发和维护」体验,但是它们并不完美。还有一些需求是它们不能很好解决的。例如,随着 代码库(codebase)的增长和演化——新功能的添加和旧模块的重构,你常常要考虑 一项「特定的样式定义」 应该放在哪个文件上最好;你可能还要考虑「某个旧样式定义」还有没有被用,可不可删除;或者,你还得考虑 性能问题,因为你肯定会质疑 在 首页就加载 所有样式定义,而大部分的样式定义 都在其它页面才用。

CSS in JavaScript 就是针对 预处理技术 不能很好解决的这些问题。

CSS-in-JS

「用JS来写样式」 是一种思想(就像用JS来写HTML结构定义类似),目前主要有几种实现: Styled-Components, Emotion, and Styled-JSX 。

将 页面分割成为不同的 UI组件,每个组件都自己独立的JS,CSS和HTML,这种思想的确很有新意,很吸引,因为 组件的开发、维护,和复用会非常的容易。

将样式集成入 UI组件,再也不用考虑 名字冲突 ,和全局结构(BEM)的问题,不用再考虑如何放CSS定义最好的问题了。

另外,也不用考虑 页面会有多余的样式定义而造成 性能问题,因为只有组件被渲染页面时,样式定义才会被用。

CSS-in-JS技术 的学习和使用 看起来 要比 SASS技术 要复杂一些,因为学习曲线是有的。不过,如果你的项目 非常适用 组件化开发,那学习和使用 CSS-in-JS 是很值得的。

TailwindCSS

什么 是TailwindCSS?TailwindCSS官方有几个标签,第一 ,framework;第二,utility-first;第三,designs without leaving your HTML。这是什么意思,CSS框架?

首先看第三点,TailwindCSS 并不像上面两种方案会引入新的额外的技术,它是原生CSS;其次,TailwindCSS 是框架,有半成品,像 bootstrap;第三,utility-first 标识出 这些 「框架半成品」的特点。

总结得,TailwindCSS 以 utility 为单位 创建 样式半成品的 「样式框架」,而bootstrap的半成品则是 样式,HTML和JS都有,是一个较全面的前端框架。

什么是 utility ,这是学习和使用 TailwindCSS 的关键。

样式开发任务的主体是 样式语句的编写。什么是 样式语句?我们拿 编程语言的 命令语句来比较。

程序由「语句」组成,命令式语言以「命令语句」(操作符和操作值) 为编程单位,样式编程的“语句”由选择子(selector)和样式定义组成;选择子主要有tag,ID,和class;样式定义则有风格,布局和动画。这种设计会出现一种局面,就是完成同一个任务可以有多种 方式。但其实,「样式编程」 在逻辑上只有一个,就是结目标对象定义「样式呈现」,同类的对象 可以有相似甚至是相同样式呈现,例如前景色,这样同是二维呈现,一定存在一些逻辑相似的甚至是「一样全局样式」,它是对象无关的,它甚至是客观的(这一点非常重要,它影响着代码可理解性和可维护性),这就是utility。

utility 只是TailwindCSS的技术思想,TailwindCSS本身是一个样式框架,TailwindUI甚至是个全面的 前端UI框架

TailwindCSS 有两个缺点 1 当样式很复杂时,类名会太长,影响阅读性 2 增加源文件的体积,不过我们可用 PurgeCSS 缓解这个问题

小结

当你的 web应用的规模不断增长 ,样式 任务是个问题,需要专业技术,和半成品,帮助快速有效的开发。专业技术包括 样式定义方式,组建复合样式方式,管理复用方式等。