现在（2022年）Web开发有太多工具可供选择。只是“前端风格”的一个任务【注意】有很多技术可以选择。本文主要讲一下三种主流CSS技术的特点和区别。注：web开发分为后端（RH开发的MVC）、前端（UI结构、风格、V组件交互）和各种任务。这篇文章是在这篇文章（SASSvsCSS-in-JSvsTailwindCSS）的基础上改写的，并加入了自己的见解。目录SASS是对“原生CSS”功能的扩展，预处理器技术（preprocessor）就像SASS。相信是很多人长期使用的CSS开发技术方案。“NativeCSS”本身很容易学，但是写出来的“程序”却很难维护。“难维护”是指当项目变大（增加人手）时，增加新功能和修改原有功能是非常费力的。提高“可维护性”的要点在于，项目的“风格功能”必须有一个客观的结构，一个团队认可的“风格结构”，可以降低编程维护的推理成本。BEM（BlockElementModifiers）就是这样一种总结客观风格结构的尝试。预处理技术与BEM相结合可以改善样式开发和维护体验，但它们并不完美。还有一些需求他们解决不了。例如，随着你的代码库的增长和演化——新特性的添加和旧模块的重构——你经常不得不考虑哪个文件最适合放置“特定样式定义”；你要考虑“旧式定义”是否还在使用，是否可以删除；或者，你不得不考虑性能问题，因为你肯定会质疑是不是所有的样式定义都加载到首页，大部分样式定义都在其他页面。只使用它。JavaScript中的CSS就是针对这些预处理技术无法很好解决的问题。CSS-in-JS“用JS写样式”是一个思路（就像用JS写HTML结构定义一样），目前有几种实现：Styled-Components、Emotion、Styled-JSX。将页面分成不同的UI组件，每个组件都有自己独立的JS、CSS和HTML，这个想法确实很有新意和吸引力，因为独立封装的组件在开发、维护和复用中会非常有用。简单的。将样式集成到UI组件中，不再需要考虑名称冲突、全局结构(BEM)以及如何存储CSS定义。另外，也不需要考虑页面会有多余的样式定义而导致性能问题，因为样式定义只会在组件渲染到页面时才会用到。CSS-in-JS技术的学习和使用似乎比SASS技术要复杂一些，因为有一个学习曲线。但是，如果你的项目非常适合组件化开发，还是值得学习和使用CSS-in-JS的。TailwindCSS什么是TailwindCSS？TailwindCSS官方有几个标签，第一，framework；第二，实用至上；第三，在不离开HTML的情况下进行设计。什么意思，CSS框架？先看第三点，TailwindCSS强调引入新的附加技术（用变量预处理）和开发步骤（待编译），是原生CSS；其次，TailwindCSS是一个框架，有半成品，比如bootstrap；第三，效用优先识别这些“框架半成品”的特征。它是一个较低级别的样式定义工具；综上所述，TailwindCSS以utility为单位打造了一个style半成品的“style框架”，而bootstrap的半成品是style，既有HTML也有JS，是一个全能的前端框架。什么是实用，这是学习和使用TailwindCSS的关键。风格开发任务的主体是风格陈述的写作。什么是风格陈述？让我们将其与编程语言的命令式语句进行比较。该程序由“语句”组成。命令式语言以“命令语句”（运算符和运算值）为编程单位。样式编程的“语句”由选择器（selector）和样式定义组成；选择器主要包括tag、ID、class；样式定义有样式、布局和动画。这种设计创造了一种情况，即有多种方法可以完成同一任务。但实际上，“风格编程”只有一种逻辑，就是为目标对象定义“风格呈现”。同一类型的对象可以有相似甚至相同的呈现风格，例如前景色。这也是一个二维的呈现，必然有一些逻辑上的相似甚至是“同一个全局风格”，它是对象无关的，它甚至是客观的（这一点很重要，它影响代码的可理解性和可维护性），这是效用。Utility只是TailwindCSS的技术思想。TailwindCSS本身就是一个样式框架。TailwindUI甚至是一个综合的前端UI框架。TailwindCSS有两个缺点。当样式很复杂时，类名会过长，影响可读性，增加源文件的体积。然而，我们可以使用PurgeCSS来缓解这个问题总结随着Web应用程序规模的增长，样式化任务成为一个问题，需要技术专长和有助于快速高效开发的半成品。专业技术包括风格定义方法、复合风格方法、管理重用方法等。
