前言
在进行前端开发过程中，CSS 经常是一个让人头疼的问题，如何写出兼容各种浏览器、符合 W3C 标准的 CSS，一直是前端工程师所面临的难题。好在现在有一些工具可以帮助我们提高开发效率，其中一个非常实用的工具就是 w3c-css。它是一个 npm 包，可以帮助我们检查 CSS 代码是否符合 W3C 标准，并给出相应的提示和建议，非常实用。
安装
安装 w3c-css 非常简单，只需要在终端中输入以下命令就可以了：
npm install -g w3c-css
使用
安装完毕后，就可以使用 w3c-css 来检查 CSS 代码了。比如，我们可以检查一个名为 style.css 的样式文件，命令如下：
w3c-css style.css
如果代码符合 W3C 标准，命令行会显示 Success，否则会显示出错信息。
除此之外，w3c-css 还提供了一些参数来方便我们进行检查，如下所示：
-h或--help，显示帮助信息；-v或--version，显示版本信息；-e或--errors-only，只显示错误信息，不显示警告信息；-w或--warnings-only，只显示警告信息，不显示错误信息；-i或--ignore，忽略某些指定的错误码，多个错误码以逗号分隔。
示例
下面是一个示例，在 HTML 页面中引入了一个样式文件 style.css，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
----- ---------------- -----------------
-------
------
-----------------
----------------------
-------
-------而样式文件 style.css 的代码如下：
-- -------------------- ---- ------- ---- - ---------- ----- ------------ ------ ----------- - -- - ---------- ----- ------ ----- - - - ---------- ----- ------------ ---- -
运行以下命令，即可检查样式文件是否符合 W3C 标准：
w3c-css style.css
如果样式文件符合 W3C 标准，命令行会显示 Success：
Success: Document checks out OK
如果样式文件存在问题，则会显示相应的错误消息。比如，我们在样式文件中增加一个错误的属性，再次运行检查命令，就会得到错误提示：
body {
font-size: 16px;
foo-bar: baz;
}运行命令：
w3c-css style.css
命令行会显示如下错误消息：
Error (line 2, col 7): Property foo-bar doesn't exist : baz
我们可以根据错误提示对样式代码进行修改，使其符合 W3C 标准。这样，我们就可以保证所写的 CSS 代码符合 W3C 标准，更加规范、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63062