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

查看分析冗余CSS的CSSCSS和＃34; CSS冗余分析器＆＃34; （呵呵） - 我无法帮助你处理算法或实现本身，但你想要做的事情听起来很像这个工具检测到的东西。

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

Answer 3

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

示例（来自docs）：

在：

.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
}

匹配css重复的算法

3 个答案: