CSS是一种声明式语言，非常简单易学，但是写起来很累，必须什么都写才能生效。在复用方面，无从下手。虽然大家在不断的总结，但是一直没能找到一个足够好的方案来有效的提升CSS开发。于是我们不得不把注意力从CSS上移开，转向CSS预处理工具，Less、SASS（SCSS）、Stylus，引入各种CSS没有的功能来帮助我们提升开发体验。像嵌套、函数、循环、条件等等。但是，如果你仔细看，其实这些工具在最近5、6年里并没有太多更新（我说的是功能），因为它们应该有的都有可用，甚至稳定；CSS的其他改进，几乎与它们无关，也不需要更新。近年来，随着CSS的发展，逐渐引入了一些新的特性。我认为这些工具变得越来越难用了。它们带来的好处已经无法掩盖它们造成的问题。是时候告别CSS预处理器了，就像我们告别jQuery一样。为什么说预处理工具落后了呢？我把原因分为三类：预处理工具不兼容CSS函数的问题，尤其是rgba(),hsl()这些常用的颜色函数值类型转换有意想不到的行为，比如Stylus实现content:5CSSimprovementsCSS有函数越来越多，可以直接计算，比如上面提到的颜色；还有calc()来完成基本的数学计算。CSS变量非常好用，可以大大提升编程体验，配合各种JS框架，我们可以更方便的将数学逻辑和展示效果绑定在一起CSSHoudini可以实现很多新功能，即使你不用深度（JS部分），也有有用的自定义属性CSS也开始从预处理工具中吸取营养，比如最近开始集成嵌套功能。以后我们可以直接使用预处理工具来解决无法跟进的问题。很多缩写和复合属性无法处理，比如background-image、box-shadow等支持多个属性一起生效的，loops、conditionals，预处理工具擅长的功能都帮不上忙。顾名思义，预处理发生在生产之前。事实上，在实际浏览网页时，很多因素都会影响渲染结果，比如分辨率、深色模式等，预处理工具也没有针对这些需求进行改进。替代方案我目前的替代方案是基于TailwindCSS，因此自然包括PostCSS、AutoPrefixer等工具。然后使用postcss-import进行自动导入和模块化；使用tailwindcss/nesting进行嵌套。为什么选择TailwindCSS？首先，在实际开发中，无论使用什么前端框架，我们都需要大量的原子胶样式，比如调整间距，改变字体大小，给容器添加一些边框、圆角、阴影等.如果这些样式是手写的，工作量不小；学习不同的风格名称也是一种负担；最重要的是，CSS优先级问题。使用TailwindCSS可以轻松解决。TailwindCSS不仅包括一堆原子样式，而且本身就是一个完整而优秀的CSS编译器。它包含reset，它提供了一组全局和通用的CSS变量；它可以从各种文件中提取我们使用的样式，构建后生成的CSS只有我们需要的样式，不会有多余的；它会分析我们对样式的使用，合理调整样式的顺序，保证样式能够正确生效。使用TailwindCSS节省大量时间。它还自带几个插件，比如用于嵌套的tailwindcss/nesting，用于content-type元素的@tailwindcss/typography等，使用这些插件也可以为我们节省很多时间。最后，TailwindCSS的生态系统不断壮大，我们的选择范围越来越广：HeadlessUI、DaisyUI、付费的TailwindUI等等，方便我们从产品生命周期的任何阶段开始集成。建议在项目配置启动项目时安装依赖。包含PostCSS+AutoPrefixer、TailwindCSS和DaisyUI。前者提供CSS处理框架，包括自动导入css和嵌套功能；后两者提供可见的UI。pnpmipostcsspostcss-importtailwindcssautoprefixerdaisyui-D自动初始化配置，-p自动生成PostCSS配置：pnpmtailwindcssinit-p调整postcss.config.js，启用postcss-import和tailwindcss/nesting。目前我们常用的嵌套规则与CSS规范略有不同，不过没关系，规范还没有确定，这样就够了。//postcss.config.jsmodule.exports={plugins:{'postcss-import':{},'tailwindcss/nesting':{},tailwindcss:{},autoprefixer:{},},}然后调整tailwind.config.js//tailwind.config.jsconstDaisyUI=require('daisyui');//这个插件可以帮助我们处理文档内容，我推荐constTypography=require('@tailwindcss/typography');module.exports={//查找以下文件中使用的样式内容：['./index.html','./src/**/*.{js,ts,jsx,tsx,vue}',],theme:{extend:{//扩展未包含在TailwindCSS中的样式},},plugins:[DaisyUI,Typography,],daisyui:{themes:[{//仅构建一个主题：luxury，并覆盖其两个属性luxury:{...require('daisyui/src/colors/themes')['[data-theme=luxury]'],primary:'#FFA028','--bc':'00%87.5%',},}],},}然后，创建样式条目main.css。其他样式可以照常写在这个文件中，但是如果你想@import其他CSS文件，你需要做一些调整。有关详细信息，请参阅官方文档。//main.css@tailwindbase;@tailwindcomponents;@tailwindutilities;然后在入口文件中引用main.css：//main.jsimport'./main.css';至此，新项目配置完成，可以照常开发使用了。在下一个预览中，这次我将分享整体思路：用新的工具链替换预处理工具，以确保现有功能不丢失。那么下一期分享的内容就是利用CSS新特性更好的完成开发。如果你对新的CSS感兴趣，对预处理工具和新的工具链有兴趣和疑问，欢迎留言讨论。如果本文对您有所启发，请点赞转发，谢谢。本文参加了SegmentFault思维写作挑战赛，欢迎正在阅读的你加入。
