哪个 css 格式化工具是你的首选

SS在定义网站的外观方面起着至关重要的作用，但随着项目复杂性的增长，CSS文件往往变得非常臃肿，其中包含冗余或未使用的样式。这不仅会影响网站的可维护性，还会影响网站的性能。干净的CSS可以确保更快的加载时间，更好的SEO和更好的用户体验。在这个博客中，我们将探索顶级CSS清理工具，以帮助您有效地优化样式表。

PurifyCSS

PurifyCSS是一个轻量级的CSS清理工具，可以帮助您从代码库中删除未使用的CSS，减少文件大小并提高网站性能。它扫描HTML、JavaScript和模板文件，保留项目正在使用的样式。

优点：

轻量级和快速：生成优化的CSS文件，并显着减少大小。

可定制：通过可定制的配置，轻松适应特定的项目要求。

与构建工具集成：与Grunt、Gulp和Webpack等工具无缝协作，使其适合现代开发工作流。

局限性：

设置复杂性：这对初学者来说可能是一个挑战。

动态内容处理：处理动态添加的样式，类似于UnCSS等其他工具。您可能需要手动指定要保留的样式。

这里有一个关于如何使用它的快速教程：

步骤1：设置环境

创建一个新的项目文件夹，并在其中创建两个文件：index.html和style.css。

步骤2：安装PureCSS

将以下<link>标记添加到index.html文件的<head>中：

html 复制代码

<link rel="stylesheet" 
  href="purecss@3.0.0/build/pure-min.css">
https://unpkg.com/purecss@3.0.0/build/pure-min.css">

或者，如果你使用的是Node.js，可以通过npm安装：

shell 复制代码

npm install purecss

第3步：向HTML和CSS文件添加内容

将以下代码添加到index.html文件：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <title>PureCSS Example</title>
  </head>
  <body>
      <h1>Welcome to PureCSS!</h1>
      <p>This is a simple PureCSS demonstration.</p>
      <button class="pure-button pure-button-primary">Click Me</button>
  </body>
</html>

将以下代码添加到style.css文件：

css 复制代码

body {
  font-family: Verdana, sans-serif;
  background-color: lavenderblush;
  margin: 20px;
}

h1 {
  color: darkslateblue;
  text-align: center;
}

p {
  color: dimgray;
  text-align: center;
  font-size: 18px;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
}

步骤4：实现PurifyCSS功能

在项目的根目录下创建一个cssPurifier.js文件，并添加以下代码：

js 复制代码

const purify = require('purify-css');

const content = ['*.html'];
const css = ['*.css'];

const options = {
  output: 'cleanedStyles.css',
  minify: true,
  info: true
};


purify(content, css, options, function (result) {
  console.log('Purified and Minified CSS:\n', result);
});

此脚本识别未使用的CSS类，并生成一个新文件cleanedStyles.css，其中包含优化的样式。

第5步：运行PurifyCSS

要执行PurifyCSS脚本，请在项目终端运行：

shell 复制代码

node cssPurifier

运行此命令后，将创建一个名为cleanedStyles.css的新文件，其中包含优化后的CSS。

UnCSS

UnCSS是一个强大的工具，删除未使用的CSS，减少文件大小和提高网站性能。它会扫描您的HTML文件或网页，以识别和消除不必要的样式，确保您的项目保持高效和轻量级。

优势：

多功能性：可与本地文件和实时URL一起使用。

工作流集成：与Gulp、Grunt和Broccoli等构建工具无缝集成。

自定义 ：允许使用ignore选项保留动态添加的特定样式。

局限性：

动态样式：与JavaScript注入的样式发生冲突，需要手动干预才能保留它们。

非HTML页面：模板或脚本（如PHP）需要静态HTML表示，因为它不能直接处理它们。

这里有一个如何使用UnCSS的快速教程：

步骤1：安装

可以使用npm或yarn轻松安装UnCSS：

shell 复制代码

npm install uncss --save-dev
# or
yarn add uncss --dev

第二步：使用

我们现在可以使用UnCSS来清理我们在前面的例子中创建的CSS文件。

js 复制代码

const unCss = require('uncss');

const files = ['index.html'];

const options = {
    stylesheets: ['style.css']
};


unCss(files, options, (error, output) => {
    if (error) {
        console.error(error);
        return;
    }
    console.log(output);
});

Stylelint

Stylelint是一个多功能的CSS linter，它确保在你的样式表中保持一致的编码约定，同时捕捉CSS、SCSS潜在错误。通过保持干净和标准化的样式，它提高了代码质量，减少了错误，并最大限度地减少了冗余。

优点：

全面的：排除CSS中可能导致错误或效率低下的问题。

可定制的规则：允许您根据项目的要求定制规则，确保灵活性。

插件支持：通过各种插件扩展特定用例的功能。

现代CSS支持：与现代CSS功能以及SCSS等预处理器完全兼容。

无缝集成：与编辑器、构建工具和版本控制系统无缝集成，以简化工作流程。

局限性：

初始设置：需要配置以满足特定的项目需求，这对于新用户来说可能需要时间。

学习曲线：在大型项目中，掌握高级规则和插件可能很复杂。

按照以下步骤将Stylelint集成到您的项目中：

步骤1：安装Stylelint

开始，使用npm或yarn将Stylelint添加到项目中：

shell 复制代码

npm install stylelint --save-dev
# or
yarn add stylelint --dev

步骤2：设置配置

在项目根目录中创建. stylelintrc.json文件以定义linting规则。下面是一个示例配置：

JSON 复制代码

{
  "extends": "stylelint-config-standard",
  "rules": {
    "block-no-empty": true,
    "color-no-invalid-hex": true,
    "declaration-colon-space-after": "always",
    "indentation": 2,
    "max-empty-lines": 2,
    "unit-whitelist": ["em", "rem", "%", "s"]
  }
}

extends字段表示一组标准规则。
rules部分允许定制以满足项目的需要。

第三步：压缩CSS

对CSS文件运行Stylelint以分析和修复问题。对于src目录中的文件:

shell 复制代码

npx stylelint "src/**/*.css"

如果您的项目没有src文件夹，请调整命令：

shell 复制代码

npx stylelint "**/*.css"

检查linting输出并根据需要调整. stylelintrc.json文件中的规则，以满足项目的要求。您还可以使用--fix标志自动修复常见问题：

shell 复制代码

npx stylelint "src/**/*.css" --fix

在线CSS清理工具

如果你正在寻找快速修复的轻量级解决方案，在线CSS清理工具，如CleanCSS，Tabifier和W3C CSS Validator提供了方便的支持。

CleanCSS

CleanCSS是一个轻量级的，基于浏览器的工具。格式化压缩和清理CSS代码。非常适合小型项目。

优点：

用途：直接在浏览器中运行，无需安装。

自定义：允许您配置压缩级别并指定要删除的内容，如注释或冗余属性。

即时结果：快速处理您的CSS，使其成为快速优化的理想选择。

局限性：

缺乏高级功能：不提供linting，错误检测或与构建工作流的集成，使其不太适合更大，更复杂的项目。

手动工作流程：每次优化都需要重复手动输入，非常繁琐。

Tabifier

Tabifier是一个直观的在线工具，用于优化和格式化代码，支持CSS，HTML和C风格语言。通过提供一致的缩进和结构，它提高了代码的可读性，使其更容易使用。

优点：

多语言支持：适用于CSS、HTML和C风格语言。

使用简单：粘贴代码，点击"Tabify"，立即获得格式良好的输出。

专注于可读性：非常适合重新格式化压缩或无组织的代码，以便于编辑和调试。

局限性：

缺乏高级功能：不包括linting，错误检测或代码验证。

有限的自动化：不太适合重复性或大规模的任务。

W3C的CSS Validator

W3C CSS Validator是一个广泛使用的在线工具，根据官方标准验证CSS代码。它通过检测CSS中的错误、不推荐使用的属性和潜在问题，帮助维护干净和符合标准的样式表。

优点：

符合标准：确保您的CSS符合W3C规范，促进最佳实践。

错误检测：检测无效属性、拼写错误和可能影响布局功能的问题。

详细反馈：提供全面的报告，以帮助优化代码。

灵活的输入：允许文件上传，代码粘贴或实时网站的URL进行验证。

局限性：

专注于验证：Priority检查代码质量，但不提供格式化或清理功能。

无自动化：需要手动输入，因此不太适合持续集成工作流。

原文：dev.to/codeparrot/...