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

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

注：web开发 可分为 后端（RH开发的MVC），前端（V组件的 UI结构，样式和交互）多种任务

本文在此文（SASS vs CSS-in-JS vs TailwindCSS）基础之上改写而成，加入自己的见解。

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

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

预处理技术 再加上 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应用的规模不断增长 ，样式 任务是个问题，需要专业技术，和半成品，帮助快速有效的开发。专业技术包括 样式定义方式，组建复合样式方式，管理复用方式等。

• 《Tailwind CSS Tutorial for Beginners: A Guide to Get Started》

Read more posts about Web编程

Be First to Comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment

Name*

Email*

Website