css调试工具_CSS调试和优化：代码质量工具

css调试工具

The following introduction to CSS code-quality tools is an extract from Tiffany’s new book, CSS Master, 2nd Edition.

以下对CSS代码质量工具的介绍摘自Tiffany的新书CSS Master，第二版 。

On your road to becoming a CSS master, you’ll need to know how to troubleshoot and optimize your CSS. How do you diagnose and fix rendering problems? How do you ensure that your CSS creates no performance lags for end users? And how do you ensure code quality?

在成为CSS大师的过程中，您需要了解如何对CSS进行故障排除和优化。 您如何诊断和修复渲染问题？ 您如何确保CSS对最终用户不会造成性能延迟？ 以及如何确保代码质量？

Knowing which tools to use will help you ensure that your front end works well.

知道使用哪种工具将帮助您确保前端正常运行。

In this article, we’ll discuss tools that help you analyze the quality of your CSS. We’ll focus on two:

在本文中，我们将讨论可帮助您分析CSS质量的工具。 我们将重点关注两个：

• stylelint
  Stylelint
• UnCSS
  联合国CSS

stylelint is a linting tool. A linter is an application that checks code for potential trouble spots, enforcing coding conventions such as spaces instead of tabs for indentation. stylelint can find problems such as duplicate selectors, invalid rules, or unnecessary specificity. These have the greatest impact on CSS maintainability.

stylelint是一种整理工具。 linter是一种应用程序，用于检查代码中是否存在潜在的故障点，并强制执行诸如空格的编码约定，而不是用于缩进的制表符。 stylelint可能会发现问题，例如重复的选择器，无效的规则或不必要的特殊性。 这些对CSS的可维护性影响最大。

UnCSS, on the other hand, checks your CSS for unused selectors and style rules. It parses a stylesheet and a list of HTML pages, returning a CSS file that’s stripped of unused rules.

另一方面，UnCSS会检查CSS中是否有未使用的选择器和样式规则。 它解析样式表和HTML页面列表，返回剥离了未使用规则CSS文件。

Both of these tools use Node.js and can be installed using npm.

这两个工具都使用Node.js，并且可以使用npm安装。

If you’re working on a small site, such as a personal blog or a few pages that are updated infrequently, many of the problems that these tools flag can safely be ignored. You’ll spend time refactoring for little gain in maintainability and speed. For larger projects, however, they’re invaluable. They’ll help you head off maintainability problems before they start.

如果您在小型站点上工作，例如个人博客或不经常更新的几个页面，则可以安全地忽略这些工具标记的许多问题。 您将花费时间进行重构，而在可维护性和速度方面却几乎没有收获。 但是，对于较大的项目，它们是无价的。 它们将帮助您在开始之前解决可维护性问题。

Stylelint (stylelint)

stylelint helps you avoid errors and enforce conventions in your styles. It has more than 160 error-catching rules and allows you to create your own as well via plugins.

stylelint可帮助您避免错误并在样式中执行约定。 它具有160多个错误捕捉规则，并允许您通过插件创建自己的错误捕捉规则。

stylelint安装和配置 (stylelint Installation and Configuration)

Install stylelint as you would any other npm package:

像安装其他npm软件包一样安装stylelint：

npm install -g stylelint

Once it’s installed, we’ll need to configure stylelint before using it. stylelint doesn’t ship with a default configuration file. Instead, we need to create one. Create a .stylelistrc file in your project directory. This file will contain our configuration rules, which can use JSON (JavaScript Object Notation) or YAML (YAML Ain’t Markup Language) syntax. Examples in this section use JSON.

安装完成后，我们需要在使用stylelint之前对其进行配置。 stylelint不附带默认配置文件。 相反，我们需要创建一个。 在您的项目目录中创建一个.stylelistrc文件。 该文件将包含我们的配置规则，这些规则可以使用JSON(JavaScript对象表示法)或YAML(YAML非标记语言)语法。 本节中的示例使用JSON。

Our .stylelistrc file must contain an object that has a rules property. The value of rules will itself be an object containing a set of stylelist rules and their values:

我们的.stylelistrc文件必须包含一个具有rules属性的对象。 rules的值本身就是一个包含一组stylelist规则及其值的对象：

{
    "rules": {}
}

If, for example, we wanted to banish !important from declarations, we can set the declaration-no-important to true:

例如，如果我们想从声明中消除!important ，则可以将declaration-no-important为true ：

{
    "rules": {
        "declaration-no-important": true
    }
}

stylelint supports over 150 rules that check for syntax errors, indentation and line-break consistency, invalid rules, and selector specificity. You’ll find a complete list of rules and their available values in the stylelint User Guide.

stylelint支持150多个规则，这些规则检查语法错误，缩进和换行符一致性，无效规则以及选择器特异性。 您可以在stylelint用户指南中找到规则及其可用值的完整列表。

从基本stylelint配置开始 (Starting with a Base stylelint Configuration)

You’ll probably find it easier to start with a base configuration and then customize it to your project needs. The stylelint-config-recommended base configuration is a good starting configuration. It enables all of the “possible errors” rules. Install it using npm:

您可能会发现从基本配置开始然后根据您的项目需求对其进行自定义更加容易。 stylelint-config-recommended基本配置是一个很好的stylelint-config-recommended配置。 它启用了所有“可能的错误”规则。 使用npm安装它：

npm install -g stylelint-config-recommended

Then, in your project directory, create a .stylelistrc file that contains the following lines:

然后，在您的项目目录中，创建一个.stylelistrc文件，其中包含以下几行：

{
    "extends": "/absolute/path/to/stylelint-config-recommended"
}

Replace /absolute/path/to/ with the directory to which stylelint-config-recommended was installed. Global npm packages can usually be found in the %AppData%\npm\node_modules directory on Windows 10 systems, and in /usr/local/lib/node_modules on Unix/Linux and macOS systems. Type npm list -g to locate your global node_modules directory.

将/absolute/path/to/替换为stylelint-config-recommended安装目录。 全局npm软件包通常可以在Windows 10系统上的%AppData%\npm\node_modules目录中找到，而在Unix / Linux和macOS系统上的/usr/local/lib/node_modules 。 键入npm list -g来找到您的全局node_modules目录。

We can then augment our configuration by adding a rules property. For example, to disallow vendor prefixes, our .stylelistrc file would look similar to the what’s below:

然后，我们可以通过添加rules属性来扩充我们的配置。 例如，要禁止供应商前缀，我们的.stylelistrc文件看起来类似于以下内容：

{
    "extends": "/absolute/path/to/stylelint-config-recommended",
    "rules": {
       "value-no-vendor-prefix": true
    }
}

What if we wanted to limit the maximum specificity of our selectors to 0,2,0? That would permit selectors such as .sidebar .title but not #footer_nav. We can do this by adding a selector-max-specificity rule to our configuration:

如果我们想将选择器的最大特异性限制为0,2,0怎么办？ 这将允许选择器，例如.sidebar .title但不允许使用#footer_nav. 我们可以通过向我们的配置中添加一个selector-max-specificity规则来做到这一点：

{
    "extends": "/absolute/path/to/stylelint-config-recommended",
    "rules": {
       "value-no-vendor-prefix": true,
       "selector-max-specificity": "0,2,0"
    }
}

使用stylelint (Using stylelint)

To lint your CSS files using stylelint, run the stylelint command, passing the path to your CSS file as an argument:

要使用stylelint CSS文件，请运行stylelint命令，并将路径作为参数传递给CSS文件：

stylelint stylesheet.css

Alternatively, you can lint all of the CSS files in a particular directory, even recursively:

另外，您也可以递归地将所有CSS文件放在特定目录中：

stylelint "./css/**/*.css"

stylelint can also lint CSS that’s embedded in HTML files using the style element. Just pass the path to an HTML file as the argument.

stylelint还可以使用style元素来处理嵌入HTML文件中CSS。 只需将路径传递到HTML文件作为参数即可。

When complete, stylelint will display a list of files that contain errors, along with their type and location, as shown in the image below.

完成后，stylelint将显示包含错误的文件列表以及它们的类型和位置，如下图所示。

Terminal output from stylelint stylelint的终端输出

联合国CSS (UnCSS)

UnCSS parses your HTML and CSS files, removing unused CSS. If your projects include a CSS framework such as Bootstrap or use a reset stylesheet, consider adding UnCSS to your workflow. It will shave unnecessary CSS—and bytes—from your code.

UnCSS解析您HTML和CSS文件，删除未使用CSS。 如果您的项目包括Bootstrap之类CSS框架或使用重置样式表，请考虑将UnCSS添加到您的工作流程中。 它将删除代码中不必要CSS和字节。

UnCSS安装 (UnCSS Installation)

As with other npm packages, you can install UnCSS using the following command:

与其他npm软件包一样，您可以使用以下命令安装UnCSS：

npm install -g uncss

从命令行使用UnCSS (Using UnCSS from the Command Line)

UnCSS requires the file path or URL of an HTML page that contains a linked CSS file. For example:

UnCSS需要包含链接CSS文件HTML页面的文件路径或URL。 例如：

uncss https://www.sitepoint.com/

UnCSS will parse the HTML and its linked stylesheets, and print the optimized CSS to standard output. To redirect to a file, use the redirect operator (>):

UnCSS将解析HTML及其链接的样式表，并将优化CSS打印到标准输出中。 要重定向到文件，请使用重定向运算符( > )：

uncss https://www.sitepoint.com/ > optimized.css

You can also pass multiple file paths or URLs to the command line. UnCSS will analyze each file and dump optimized CSS that contains rules affecting one or more pages:

您还可以将多个文件路径或URL传递给命令行。 UnCSS将分析每个文件并转储包含影响一个或多个页面的规则的优化CSS：

uncss index.html article-1.html article-2.html > optimized.css

For a full list of commands—and an example of how to use UnCSS with a Node.js script—consult the UnCSS docs.

有关命令的完整列表以及如何将UnCSS与Node.js脚本一起使用的示例，请咨询UnCSS文档。

考虑任务运行器或构建工具 (Consider a Task Runner or Build Tool)

Running these tools probably seems like a lot of extra work. To that end, consider adding a task runner or build system to your workflow. Popular ones include Grunt, Gulp, and webpack. All three have robust documentation and sizable developer communities.

运行这些工具可能看起来像很多额外的工作。 为此，请考虑将任务运行器或构建系统添加到您的工作流中。 流行的包括Grunt ， Gulp和webpack 。 这三者均拥有强大的文档资料和庞大的开发者社区。

What’s great about these task runners and build systems is that they automate concatenation and optimization tasks. They’re not limited to CSS either. Most build tools also include plugins for optimizing JavaScript and images.

这些任务运行器和构建系统的优点在于，它们可以自动执行串联和优化任务。 它们也不限于CSS。 大多数构建工具还包括用于优化JavaScript和图像的插件。

Because the configuration and build script files are typically JSON and JavaScript, you can easily reuse them across projects or share them with a team. Each of the tools mentioned in this article can be integrated with Grunt, Gulp, or webpack with the help of a plugin.

由于配置和构建脚本文件通常是JSON和JavaScript，因此您可以轻松地在项目中重复使用它们或与团队共享它们。 本文提到的每个工具都可以借助插件与Grunt，Gulp或Webpack集成。

Above all, however, take a pragmatic approach to building your toolkit. Add tools that you think will enhance your workflow and improve the quality of your output.

然而，最重要的是，采取务实的方法来构建工具箱。 添加您认为可以增强工作流程并提高输出质量的工具。

To read more on CSS debugging and optimization, check out Tiffany’s book, CSS Master, 2nd Edition.

要了解有关CSS调试和优化的更多信息，请查阅Tiffany的书CSS Master，第二版 。

Related articles:

相关文章：

• CSS Debugging and Optimization: Browser-based Developer Tools

  CSS调试和优化：基于浏览器的开发人员工具

• CSS Debugging and Optimization: Minification with CSSO

  CSS调试和优化：使用CSSO进行压缩

翻译自: https://www.sitepoint.com/css-debugging-and-optimization-code-quality-tools/

css调试工具