Css 以编程方式将样式表拆分为子样式表？

假设你有一个巨大的样式表，有一个完整的站点选择器，每个选择器都加载了属性（定位、大小、字体、颜色等），你想将它们分成不同的、适当的文件（例如font.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;
}

---

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

我不知道有任何方法可以自动分离css，但是Blueprint CSS框架已经为您解决了这个问题&过去我只是在需要的地方插入了我的样式&它解决了所有其他浏览器的差异

---

www.blueprintcss.org

在过去的几个月里，我做了两个大项目，采用了多种风格

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

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

在您构建框架的情况下，我至少建议以下组件：

• 重置
• Main
• 字体设计

---

需要记住的一点是通过调用其他样式表发出的HTTP请求的数量。如果可能的话，尽量少使用样式表。

滚动您自己的样式表。有效的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

---

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

我认为您可能需要创建它。要做到这一点，您可能需要利用现有的许多CSS解析器库或程序中的一个

---

快速搜索会发现.NET、Java、Ruby等中有多个版本。在StackOverflow上甚至会有关于这方面的问题。

以下是我将如何做到这一点：

将大样式表复制到3个文件中

打开每一个并删除不需要的样式

对于步骤2，您可以通过在记事本++之类的编辑器中使用搜索/替换来节省大量时间。例如，在layout.css中，您可以对

^.*background:.+$

进行正则表达式搜索，然后将其替换为零（最后删除所有空行）

从理论上讲，您应该能够将其减少到每个文件只有几个正则表达式，但Notepad++似乎不喜欢管道字符或括号

---

这不是程序性的，但是当你编写自己的代码来完成你的要求时，你可以从头开始输入样式表。

你自己的脚本真的很容易。ruby中有css库吗？我相信你可以找到一个适合你使用的任何平台的库。

你有命令行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

如果您不想在布局中使用以下任何标记，则必须进行调整。css:

大纲-*

，

文本-*

，

空白

，

字间距

。如果您的css使用这些标记，我还可以快速查看您实际使用的标记。例如

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

---

简单的部分是解析CSS，困难的部分是对不同的CSS指令进行分类，并预期使用简短的CSS选择器

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

---

您是否想过使用一个为您处理CSS的程序，而不是自己手动浏览和编辑它？我最近开始使用它，它提供的所有功能（即使是免费版本）都给我留下了深刻的印象。尽管它不会像我所知的那样分割CSS文件。

这应该可以让您开始：

#!/usr/bin/env python
import cssutils

PATH_TO_CSS_FILE = 'old_huge_css_file.css'

LAYOUT = ('display', 'width', 'height', 'margin', 'padding',
          'position', 'top', 'left', 'bottom', 'right')
COLOR = ('color', 'background', 'border', 'background-color')
FONTS = ('font', 'font-size')

def strip_styles(infile_path, outfile_path, properties_to_keep):
    stylesheet = cssutils.parseFile(infile_path)

    for rule in stylesheet:
        if not rule.type == rule.STYLE_RULE:
            continue

        [ rule.style.removeProperty(p) for p in rule.style.keys() 
            if not p in properties_to_keep ]

    f = open(outfile_path, 'w')
    f.write(stylesheet.cssText)
    f.close()

segments = (
    ('layout.css', LAYOUT),
    ('color.css', COLOR),
    ('fonts.css', FONTS),
)

for segment in segments:
    strip_styles(PATH_TO_CSS_FILE, *segment)

你需要

显然，我并没有在一开始就用所有可能的css属性填充元组，我将把它作为练习留给读者

注意：它将在样式表中保留所有注释，即使其中许多注释不属于单独的样式

此外，顶部的

布局

、

颜色

和

字体

变量中未列举的所有样式都将被过滤掉

---

您可以轻松地修改

strip_styles

函数，过滤掉这三个变量中的样式，生成第四个样式表，其中包含所有杂项属性，如果您愿意的话

请参见此处回答的问题：我感谢链接，但该页面上没有任何内容真正“分离”样式表。你这样做不对吗？你不应该提供一个合并的样式表而不是单独的样式表吗？我将使用drupal的方法将所有样式表编译成一个，并缓存这个新的压缩的样式表。因此，分离样式表

* 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