「工具链🛠️」CSS工程化听过没？什么是“后处理器”，来看看PostCSS吧！🚢🚢

JustHappy
314 阅读4分钟

Hi!这里是JustHappy，接触前端工程化也有一段时间了，发现大家主要研究的都是JS工程化相关的为主，当然我也一样，前几天在我们开源团队组会中讨论到CSS工程化这一点，我觉得有必要了解一下，于是，我们来看看PostCSS

如果你使用过Tailwind CSS或者UnoCSS，那么你一定配置过PostCSS，但是你真的了解PostCSS吗？我想大多数人和我一样，都是跟着tailwind文档之类的配置，而不是进一步了解过，所以我们开始吧！🐷🐷

这里是PostCSS中文文档链接

有关CSS工程化🚀🚀

CSS工程化是指在开发过程中，通过采用预处理器如Sass、Less，以及后处理器如PostCSS，来增强CSS的编程能力、提高代码的可维护性和性能。

啥是CSS后处理器？和CSS预处理器有啥不同？😧😧

我想大家对预处理器都比较熟悉吧，预处理器允许开发者使用变量、嵌套规则、函数和混合等高级特性来编写更结构化和可复用的CSS代码。例如，Sass通过变量和混合（mixin）功能，允许开发者重用代码块，减少重复。

后处理器则在CSS代码生成后，对其进行优化和增强，如自动添加浏览器前缀、代码压缩和支持现代CSS特性。例如，Autoprefixer是一个流行的PostCSS插件，它可以自动为CSS属性添加所需的浏览器前缀，确保代码在不同浏览器中的兼容性。通过这些工具和技术，CSS工程化旨在提升开发效率，同时确保样式代码的质量和性能。

PostCSS有啥能力呢？💡💡

正如PostCSS官网的Slogan: PostCSS是一个用JavaScript和工具插件转化CSS代码的工具，PostCSS在CSS领域中的功能和特性，其实可以类比于JavaScript中的Babel。

以下内容是结合PostCSS官网内容写的

增强代码的可读性📖

如果你写了CSS代码，但不同的浏览器可能需要不同的代码来显示，Autoprefixer 就能帮到你。它会根据Can I Use网站的数据，自动为你的CSS代码添加各种浏览器所需的前缀，确保代码在不同浏览器上都能正常工作。

将未来的 CSS 特性带到今天！📅

PostCSS Preset Env 可以帮助你使用最新的CSS语法，类似于Babel将未来的JavaScript代码转换为当前浏览器能理解的代码。它会根据你的目标浏览器来确定所需的polyfills，这个功能是基于cssdb实现的。

终结全局 CSS 🔪

CSS Modules 让你在命名CSS类时更加自由，不必担心命名冲突。PostCSS在处理CSS时，会给每个类名加上一个唯一的标识，这样你就可以随意命名，而不用担心会有冲突。

避免 CSS 代码中的错误 ✅

stylelint 是一个现代的CSS代码检查工具，它能帮助我们保持代码的一致性，并避免在样式表中出现错误。它支持最新的CSS语法，包括SCSS这样的类似CSS的语法。使用stylelint，你的CSS代码将更加健壮和规范。

我们来试一下吧！ 💪

（以下实现一个PostCSS的最简单autoprefixer示例）

初始化一个postcss-test项目，安装postcss和postcss-cli

npm init -y
npm install postcss postcss-cli

我们安装了PostCss的Cli（脚手架）可以先执行 npx postcss --help查看一下命令

哈哈，其实很简单是吧

一个简单的示例代码

以下代码是为了试验PostCSS所编写的简易HTML和CSS

  • 在我们项目文件夹下创建index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="simple-box">
      <input type="text" class="simple-input" placeholder="哈哈哈" />
    </div>
  </body>
</html>
  • 创建style.css
.simple-box {
  border: 1px solid #000;
  padding: 10px;
  width: 300px;
  boxsizing: border-box;
  boxshadow: 10px;
  height: 300px;
  margin: 15% auto;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.simple-input ::placeholder {
  color: rgb(94, 68, 68);
}

image.png

安装 autoprefixer 插件

npm install autoprefixer --save-dev

我们可以查看一下哪些东西需要autoprefixer

npx autoprefixer --info

执行后会得到如下结果（以下CSS内容都会被autoprefixer处理）

输出我们的结果看看

我们可以直接执行以下代码

 npx postcss style.css -o dist.css -u autoprefixer

这会生成一个处理过的dist.css文件

avatar
文章
阅读
粉丝