css - 如何合并来自重复选择器的多个 CSS 规则？

Question

前体:

Under normal circumstances, I would never do this.

我有一个 CSS 文件，目前我正在与另一个人协作。我最初构建了文件，然后他们在事后向其中添加了规则。但是，他们没有向已经存在的选择器添加规则，而是到处都有重复的选择器。我什至不想深入了解文件变得多么困惑。问题是重复的选择器现在遍布整个文件，可能需要一些时间才能将其整理出来。

无论如何，我目前正在尝试清理文件。我在我的编辑器 (ST3) 中尝试了美化、css 格式等，它清理得很好，但仍然留下了重复的选择器。我尝试过各种在线工具，例如 CSS Lint , ProCSSor , Dirty Markup , CleanCSS到目前为止，这些工具都没有给我想要的结果。

是否可以通过其他方式而不是手动合并这些选择器？

下面以我的情况为例，仅供引用:

我想把这个...

.sameClass {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}

.differentClass {
  border: none;
  background: black;
  padding: 0;
}

.sameClass {
  font-weight: bold;
  font-size: 24px;
  display: inline-block;
}

进入这个...

.sameClass {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 24px;
  display: inline-block;
}

.differentClass {
  border: none;
  background: black;
  padding: 0;
}

Answer 1

CSSO(Github 元素)是帮助您合并相同 CSS 类的工具。它可以配置为执行一些清理、压缩和重组。

在此处的沙箱中进行测试:https://css.github.io/csso/csso.html

// Input
.card {box-shadow: none;}
.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }
.card {border: 1px solid grey;}

// Output compacted + merged
.bar,.foo{color:red}
.card {box-shadow: none;border: 1px solid grey;}