css - 匹配css重复的算法

Question

我正在寻找一个可以提取通用 css 属性并向元素添加类的库（我想以编程方式执行此操作，这是生成的 html，我想通过删除额外的字节来进一步优化它）。例如，我为元素定义了一堆样式：

#element1 {
    font-weight:bold;
    background-image:url("some_url");
}
#element2 {
    font-style:italic;
}
#element3 {
    font-weight:bold;
    font-style:italic;
    background-image:url("some_url");
}
#element4 {
    background-image:url("some_url");
}

............ (crapload of elements)

被折叠成：

.bold {}
.italic {}
.backgroundimage {}

甚至更好：

.bold-and-italic {}
.italic-with-bg {}
etc etc

那里有图书馆已经这样做了吗？如果没有，我可以遍历并重新计算所有属性，但是这里有更优化的算法吗？每个折叠类做一个属性会很简单，但我相信做一个具有多个属性的类会变得更加复杂......这里应该使用什么样的数据结构？

Answer 1

我会研究Sass或Less。这些都是您正在寻找的绝佳工具。如果你使用其中任何一种，你需要有一个 Less/Sass 编译器，所以我会推荐Prepros。

Answer 2

你应该看看CSSO优化工具，具体 是http://bem.info/tools/optimizers/csso/description/#1-2-6--Partial-splitting-of-blocks

示例（来自文档）：

前：

.test0 {
    color: red;
    border: none;
    margin: 0
}

.test1 {
    color: green;
    border: none;
    margin: 0
}

后：

.test0 {
    color: red
}

.test0, .test1 {
    border: none;
    margin: 0
}

.test1 {
    color: green
}

Answer 3

看看CSSCSS一个“分析冗余 CSS 的 CSS 冗余分析器​​”（呵呵）——我无法帮助你处理算法或实现本身，但你想做的事情听起来很像这个工具检测到的事情之一.

报告输出将为您提供共享通用规则的选择器列表，因此它可能可以用作生成所需新规则的基础。