将一个类的多个css规则合并到一个类声明中？答案

【问题标题】：Merge multiple css rules of a class into a single class declaration?将一个类的多个css规则合并到一个类声明中？
【发布时间】：2013-04-30 13:57:55
【问题描述】：

我喜欢在 css 中分离一个类的不同关注点。

例子：

// Layout
.myElement {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 5px;
}

// Chrome
.myElement {
    background: red;
    border: 2px solid green;
    box-shadow: inset 0 0 10px black;
}

// Content
.myElement {
    color: white;
    font-size: 120%;
}

// Interaction
.myElement:hover {
    background: black;
    border: 10px dotted red;
}

到目前为止还不错。就我个人而言，我发现这种方法可读性强，易于维护且易于开发。但是是否有任何可用的机制/工具可以将一个类的所有规则合并到一个单独的类声明中在自动部署？

想要的结果：

.myElement {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 5px;
    background: red;
    border: 2px solid green;
    box-shadow: inset 0 0 10px black;
    color: white;
    font-size: 120%;
}

.myElement:hover {
    background: black;
    border: 10px dotted red;
}

编辑：阅读 cmets 后，我觉得我的“人造”示例不够全面。下面是一个用 Stylus 语法编写的真实示例，但结果与上述相同。我将上面的原始示例留在原处。下一个示例以单个文件的形式存在，该文件描述了某个区域的外观及其出现在站点不同位置的内容。这就像那个地区的一个缩影。因此，您可以想象还有更多这样的缩影。

// Layout
.events
    padding 2em

.eventItem
    margin 0 0 4em

.eventCal
    float left
    padding 2.5em 0 0

.eventArticle
    margin 0 0 0 6em

.eventHead
    margin 0 0 1em

    time
        margin 0 2em 0 0


// Chrome
.eventCal
    background url("../../assets/img/icon-events.png") no-repeat

.eventHead
    border-bottom .5em solid $chimney


// Content
.eventItem
    list-style-type none

    a
        color $beige
        text-decoration none

    h2
        font-family $elsie

.eventCal
    color $beige
    font-family $elsie
    font-weight bold
    font-size 150%

.eventHead
    font-size 75%

.eventDesc
    font-size 90%


// Interaction
.eventItem    
    a:hover
            color $chimney
            text-decoration underline

【问题讨论】：

你总是可以在你知道的类里面使用这些 cmets。
有什么理由你不能一开始就按照你想要的结果来编写 css 代码吗？您可以将 cmets 包含在该单个类中...
可读且易于维护.. 至于我，合并版本更容易理解。
我认为这个想法是他有很多他想要合并的东西，并且想要一个可以为他做这件事的工具，而不是自己做。我还假设这些元素中的每一个都不像现在那样彼此靠近，并且实际上被属于各自类别的其他元素分开。为此...除了人类的技能和专业知识之外，我不知道有什么工具可以做到这一点。
@DavidStarkey 是的，我知道 ;)

标签： css class merge concatenation stylus

【解决方案1】：

在连续几天的编码之后，我的计算机有点唠叨我重新启动，但基本上我在我的库中经常做这样的事情。基本上，要快速模仿此功能，您可以做的是从数以万计的编码示例中获取一个用于从工作表中枚举 CSS 规则的示例。

然后在枚举函数中，只需将 selectorText 属性放入 document.querySelector/querySelectorAll 中，这将为您提供与 selectorText 匹配的元素，将这些、selectorText 和相关的 cssText 放入一个小 {}/[] 或任何适合的地方你的喜好。

枚举完成后，执行 document.createElement('style') 并使用 insertRule() 将样式粘合在一起。

然后只需从 style.textContent 中获取成品，您就拥有了合并的样式表。

作为用于枚举的常用代码确实是最困难的部分，对于大多数人来说，这是一个很好的懒惰的晚上编码任务，它会完全按照你想要的方式完成工作。

【讨论】：