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;
}

.Logo__name__SVK0g {
  color: gray;
}

.name {
  color: gray;
}

.Logo__name__SVK0g {
  color: gray;
}

避免 CSS 代码中的错误

通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。

a {
  color: #d3;
}

CSS input

app.css
2:10 Invalid hex color