共计 2702 个字符，预计需要花费 7 分钟才能阅读完成。
CSS 是申明式语言，很简略，很好学，然而写起来很累，所有货色都要写进去能力失效。复用方面更是无从下手，尽管大家都在一直总结，但始终没能找到足够好用的计划，能够无效改善 CSS 开发。
于是咱们只好把眼帘转出 CSS 之外，转投 CSS 预处理工具，Less、SASS（SCSS）、Stylus，引入种种 CSS 不具备的性能，帮忙咱们改良开发体验。比方嵌套、函数、循环、条件，等等。然而如果你仔细察看，实际上，这几个工具最近 5、6 年都没怎么更新（我说的是功能性），因为该有的都有了，甚至很稳固；其它来自于 CSS 的改良，简直跟它们没什么关系，也不必更新。
最近几年，随着 CSS 倒退，一些新个性逐渐引入，我感觉这些工具越来越难用，它们能带来的益处曾经无奈覆盖它们所造成的问题。是时候辞别 CSS 预处理工具了，就像咱们当年辞别 jQuery 一样。
为什么说预处理工具落后？
我把理由分成三大类：
预处理工具的问题
- 对 CSS 函数兼容性不好，尤其是
rgba()、hsl()这些罕用的色彩函数 - 数值类型转换，有不合乎预期的行为，比方 Stylus 实现
content:5
CSS 的改良
- CSS 领有越来越多的函数，能够间接进行计算，比方后面提到的色彩；还有
calc()来实现根底数学计算 - CSS 变量十分好用，能够大大改良编程体验，配合各种 JS 框架，咱们能够更容易的把数学逻辑和显示成果绑定在一起
- CSS Houdini 能够实现很多新性能，即便不深刻应用（JS 局部），也有好用的自定义属性
- CSS 也开始从预处理工具排汇养分，比方近期的嵌套性能曾经开始被整合，将来咱们能够间接应用
预处理工具无奈跟进的问题
- 很多缩写、复合属性无奈解决，比方 background-image、box-shadow 等，都反对多属性独特失效，预处理工具善于的循环、条件、函数无奈提供帮忙。
- 预处理，顾名思义，产生在生产之前。实际上，网页在理论浏览时，会有很多因素影响到渲染后果，比方分辨率、dark mode 等。预处理工具对这些需要也没有改良。
代替计划
我目前的代替计划基于 TailwindCSS，所以天然蕴含 PostCSS、AutoPrefixer 等工具。而后用 postcss-import 实现主动导入和模块化；应用 tailwindcss/nesting 实现嵌套。
为什么选用 TailwindCSS？首先，理论开发中，不论应用什么前端框架，咱们都须要大量原子化的胶水款式，比方调整间距、扭转字号、给容器增加一些边框、圆角、暗影等。这些款式如果都手写，工作量并不小；学习不同的款式名也是累赘；以及最重要的，CSS 优先级问题。应用 TailwindCSS 就都能很好解决。
TailwindCSS 不仅蕴含一大堆原子化款式，本身也是个残缺且优良的 CSS 编译器。它蕴含 reset，提供一组全局通用的 CSS 变量；它能够从各种文件里把咱们用到的款式提取进去，构建后生成的 CSS 里只有咱们要用到款式，不会有多余的；它会剖析咱们对款式的应用，正当的调整款式程序，保障款式能正确失效。应用 TailwindCSS 能够节俭很多工夫。
它还自带若干插件，比方解决嵌套的 tailwindcss/nesting，反对内容类元素的的 @tailwindcss/typography 等。应用这些插件也能够帮咱们节俭很多工夫。
最初，TailwindCSS 的生态一直成长，咱们的抉择范畴越来越宽：HeadlessUI、DaisyUI、付费的 Tailwind UI 等。不便咱们从产品生命周期的任意阶段开始集成。
举荐我的项目配置
启动我的项目的时候，装置依赖。蕴含 PostCSS + AutoPrefixer、TailwindCSS 和 DaisyUI。前者提供 CSS 解决框架，蕴含主动导入 css 和嵌套性能；后两者提供可见的 UI。
pnpm i postcss postcss-import tailwindcss autoprefixer daisyui -D主动初始化配置，-p 会主动生成 PostCSS 配置：
pnpm tailwindcss init -p 调整 postcss.config.js，启用 postcss-import 和 tailwindcss/nesting。目前咱们罕用的嵌套规定和 CSS 标准略有区别，不过无所谓，标准也没确定，所以这样就足够了。
// postcss.config.js
module.exports = {
plugins: {'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},},
} 而后调整 tailwind.config.js
// tailwind.config.js
const DaisyUI = require('daisyui');
// 这个插件能够帮咱们解决文档类内容，我倡议罕用
const Typography = require('@tailwindcss/typography');
module.exports = {
// 从以下文件查找用到的款式
content: [
'./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': '0 0% 87.5%',
},
}],
},
} 而后，创立款式入口 main.css。其它款式能够如常写在这个文件里，不过如果要 @import 其它 CSS 文件，就要进行一些调整。具体能够看官网文档。
// main.css
@tailwind base;
@tailwind components;
@tailwind utilities; 而后在入口文件援用 main.css 即可：
// main.js
import './main.css';至此，新我的项目配置实现，能够照常开发了。
下期预报
这次我先分享了整体思路：用新的工具链代替预处理工具，保障已有的性能不缺失。那么下期分享的内容就是应用新的 CSS 个性，更好的实现开发。
如果你对新 CSS 感兴趣，对预处理工具和新工具链有趣味和疑难，欢送留言探讨。如果本文对你有启发，也请帮我点赞分享，谢谢。
本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。
