2

我喜欢用它来区分 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;
}

编辑：阅读评论后，我觉得我的“人造”示例不够全面。下面是一个用 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
4

1 回答 1

0

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

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

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

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

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

于 2013-05-11T04:58:24.293 回答