在前端开发中，CSS 是不可或缺的一部分。如何规范化 CSS 代码、提高代码可维护性是经常需要面对的问题。而 css-goulash 便是一个值得推荐的 npm 包，它可以辅助我们更好地处理 CSS。
css-goulash 是什么？
css-goslush 是一个基于 PostCSS 的样式处理工具，可以帮助开发者自动处理样式文件中的一些冗余、闲杂的代码，以及优化样式性能。基于 PostCSS 是因为 PostCSS 是一个强大的工具，通过插件机制扩展能力非常强大。
安装 css-goulash
在使用 css-goulash 之前，我们需要先安装它。通过 npm 安装即可：
--- ------- -----------
如何使用 css-goulash？
在安装完 css-goulash 后，我们需要先在项目根目录下配置一个 postcss.config.js 文件。
-------------- - -
-------- -
----------------------
-
-css-goulash 的使用非常简单，可以直接在样式文件中引用。需要注意的是，文件需要 .pcss 格式，而不是通常使用的 .css 格式。
-- ---------- -- ----------- - ------- ----- ---------- ----- ----------------- ----- ------ ----- -------- ----- ----------- ------- -------------- ---- -
我们可以在控制台使用下面的命令进行处理：
------- ---------- -- ----------
css-goulash 会自动处理 CSS 样式文件中的以下内容：
删除 font-size: 0
可能出现这样的情况：在一些 CSS 框架或组件库中，我们看到过很多将 font-size 值设为 0 的情况。例如：
----------- - ---------- -- -- --- -- -
这是因为在这样的框架或组件库内部，可能会有嵌套的元素，如果不将 font-size 设为 0，在嵌套样式时会产生不必要的间距。不过，这样写在全局 CSS 样式内可能会有风险，可能会破坏了某些布局，例如萌新们最熟悉的 display: inline-block。此时，css-goulash 就可以派上用场了。它会检测出这样的样式，并将其删除，让你继续轻轻松松撸起袖子搞前端。
删除空样式块
CSS 中有时候会出现这样的情况：
----------- - -
这样的空样式块可能是由于复制粘贴误操作导致的。它虽然不会产生明显的问题，但是会增加文件大小，增加代码阅读难度。这个时候，css-goulash 可以识别出来，并将其删除。
删除重复的样式
假设有如下样式：
----------- - ------- ----- - ------------ - ------- ----- -
上述样式中，.some-class 和 .other-class 均定义了 margin: 16px，这显然是冗余的。css-goulash 可以检测出这样的冗余，并将其删除。
合并相同的样式
如果有这样的 CSS：
---- - ------ ------ - ------ - ------- ------ - ------ - ----------------- ----- -
很显然，.box-1 和 .box-2 两个选择器都继承了 .box 这个选择器的样式属性宽度，那么，合并这些相同样式属性就是我们要做的。因此，css-goulash 算法会将它们合并成以下内容：
---- - ------ ------ - ------ - ------- ------ ------ ------ - ------ - ----------------- ----- ------ ------ -
上述处理对缩小代码体积、降低 HTTP 请求等都有非常明显的效果。
总结
在前端开发中，css-goulash 是个非常不错的工具，可以让我们的样式更规范化、更加清晰。css-goulash 能够自动处理掉那些可能会引起浏览器解析错误的代码，同时也能优化我们的样式文件，这显然可以帮助我们省去很多重复无用的工作，让我们有更多的时间专注于业务逻辑的实现。
示例代码
示例代码可以在仓库 css-goulash-example 中找到：https://github.com/example/css-goulash-example
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d1e81e8991b448dac54