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个文件：

layout.css中：

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

color.css：

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

fonts.css：

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

我的例子可能没有利用最好的约定来实现这一点，但是我想，在框架创建中自动将属性分离到不同文件中的方法非常方便。

Answer 1

我将如何做到这一点：

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

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

理论上你应该能够将每个文件只减少到几个正则数，但Notepad ++似乎不喜欢管道字符或括号。 ^.*background(-color|-image)?:.+$应该有效，但事实并非如此。

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

Answer 2

滚动你自己。解析有效的CSS应该非常困难。

按}
在每一个中，{之前的内容是选择器
按{分隔;之后的内容，以获取每个选择器的每条规则
评估每个规则并相应地构建文件

半伪VB.NET代码......

 Dim CssFile as String = System.IO.File.ReadAllText("MyFile.css")
 Dim CssRules as String() = CssFile.Split("}")

 For Each Rule as String in CssRules
     Dim Selector as String = Rule.Substring(0, Rule.IndexOf("{")).Trim();
     Dim Styles as String() = Rule.Substring(Rule.IndexOf("{") + 1).Trim().Split(";");

     For Each Style as String in Styles
         If Style.StartsWith("font") Then 
              ' Build your files... yada, yada, yada
         End If
     Next
 Next

Answer 3

你有命令行grep吗？你关心输出中的评论吗？你能做第一遍清理格式吗？例如，在您选择的编辑器中，确保{，}和;后面跟一个新行。然后这些可能会让你接近：

grep -i '[{]\|[}]\|background\|border\|color' source.css > color.css
grep -i '[{]\|[}]\|font\|letter\|line-height' source.css > font.css
grep -v 'background\|border\|color\|font\|letter\|line-height' source.css > layout.css

如果您不想在layout.css中添加以下任何标记，则必须进行调整：outline-*，text-*，white-space，word-spacing 。那就是你的css使用它们。我还会快速查看您实际使用的标签。例如，

grep -v '[{]\|[}]' test2.css | sed -e 's/:.*$//g' | sort -u

Answer 4

简单的部分是解析CSS。困难的部分是对不同的CSS指令进行分类并预测短手CSS选择器。

CSSTidy可能是经过一些修改的门票。它不仅会解析CSS，还会尽可能整合CSS属性：

http://csstidy.sourceforge.net/download.php

Answer 5

我不知道有哪些方法会自动将你的css分开，但是Blueprint CSS框架已经为你解决了这个问题。在过去的时间里，我只是在需要的地方插入我的风格。它处理了所有misc浏览器的差异。

www.blueprintcss.org

Answer 6

似乎是一个有用的工具，我认为它可能已经存在，但我找不到任何东西。

我想你可能需要创建它。为此，您可以利用现有的许多现有CSS解析器库或程序之一。

快速搜索显示.NET，Java，Ruby等中的多个。在StackOverflow上甚至有关于此的问题。

Answer 7

滚动自己的脚本真的很容易。 Here是一个用于红宝石中的CSS的库，我相信你可以找到一个你碰巧使用的平台

Answer 8

* Split the entire file by }
* In each of those, what comes before the { is the selector
* Split what comes after { by ; to get each individual rule for each selector
* Evaluate each rule and build your files accordingly

Answer 9

在过去的几个月里，我完成了两个有多种风格的大项目。

在一个案例中，每页有不同的颜色和样式。在另一种情况下，目标群体的一些颜色和图像不同。

我创建了一个样式表 main.css ，其中包含定位，默认字体，间距以及样式表中您所期望的所有其他内容。然后，对于每个目标组，我创建了一个包含特定颜色，字体和（背景）图像的额外样式表。

在你的情况下，建立一个框架，我至少会建议以下组件：

的重置

的主

的 印刷术

要记住的一件事是您通过调用其他样式表进行的HTTP请求的数量。如果可能的话，尽可能使用少量样式表。

Answer 10

您是否考虑过使用一个为您处理CSS的程序，而不是亲自手动完成并自行编辑？我最近开始使用stylizer，我对它可用的所有功能（即使在免费版本中）印象深刻。虽然它不会像我想的那样分割CSS文件。

以编程方式将样式表分成子样式表？

10 个答案: