css - 以编程方式将样式表分离为子样式表？

Question

假设您有一个巨大的样式表，其中包含整个站点的选择器，每个选择器都加载了其中的属性(定位、大小、字体、颜色等......全部在一起)并且您希望将它们分成不同的、适当的文件(例如 fonts.css、colors.css、layout.css 等等)..

是否有任何已知的(自动化的)方法来完成这样的任务？

例子:

#myid {
display:block;
width:100px;
height:100px;
border:1px solid #f00;
background-color:#f00;
font-size:.75em;
color:#000;
}

将转换为以下 3 个文件:

布局.css:

#myid {
    display:block;
    width:100px;
    height:100px;
}

颜色.css:

#myid {
    border:1px solid #f00;
    background-color:#f00;
    color:#000;
}

字体.css:

#myid {
    font-size:.75em;
}

我的示例可能没有使用最佳约定来执行此操作，但我想，一种将属性自动分离到不同文件中的方法在框架创建中会非常方便。

Answer 1

这是我的做法:

1. 将您的大样式表复制到 3 个文件。
2. 打开每一个并删除不需要的样式。

对于第 2 步，您可以通过在 Notepad++ 等编辑器中使用搜索/替换来节省大量时间。例如，在 layout.css 中，您可以使用正则表达式搜索 ^.*background:.+$ 并替换为空。 (然后在最后删除所有空行。)

理论上，您应该能够将其减少到每个文件只有几个正则表达式，但 Notepad++ 似乎不喜欢管道字符或括号。 ^.*background(-color|-image)?:.+$ 应该可以工作，但实际上没有。

这不是程序化的，但是当您编写自己的代码来执行您要求的操作时，您可能已经从头开始输入样式表了。