Postcss css module 关注点分离
Postcss 简明教程 及 css module - 掘金 https://juejin.cn/post/6862371071115558926
PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网 https://www.postcss.com.cn/
增强代码的可读性
利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。
:fullscreen {
}
CSS input
:-webkit-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
将未来的 CSS 特性带到今天！
PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。
body {
color: oklch(61% 0.2 29);
}
CSS input
body {
color: rgb(225, 65, 52);
}
终结全局 CSS
CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。
.name {
color: gray;
}
CSS input
.Logo__name__SVK0g {
color: gray;
}
.name {
color: gray;
}
CSS input
.Logo__name__SVK0g {
color: gray;
}
CSS output
避免 CSS 代码中的错误
通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。
a {
color: #d3;
}
CSS input
app.css
2:10 Invalid hex color
在前端开发中一直有个原则，叫做"关注点分离"，意思就是各种技术只负责自己的领域，不要混合在一起，形成耦合，这种原则比较直观的体现就是不要写"行内样式"（inline style）和"行内脚本"（inline script），HTML、CSS、JavaScript各干各的事，避免混用。
现在由于各类前端框架以及打包工具的使用，使我们之前的关注点分离变的策略，现在其实都是在 js 中进行。
相比 HTML，框架对 CSS 都没进行什么特殊处理，也没有形成类似 JSX 的解决方案，不过这其中倒是有一个比较有意思的解决方案：css-in-js。
另外 css 本身编程能力薄弱，社区也形成各种方案来提升 css 编程能力。
