自动‘命名空间’CSS

Question

我已经构建了一个HTML5工具，它曾经位于一个独立的页面上。客户希望将其包含在他们的页面中，但又担心CSS冲突。

我想把我的工具放在一个包装器div中，用一个叫做'customtool‘的类，然后用.customtool作为每个CSS选择器的前缀，我有很多样式表，选择器的总数很高。我知道手动修改选择器会有人为错误的风险。

显然，我不能简单地以‘’为目标。或'#‘，因为它不适用于像本例中的.wrapper .content.customclass #div这样的选择器，所以我希望

.customtool .wrapper .content.customclass #div，但替换为‘’使用“.customtool”和带有'.customtool #‘的'#’将给.customtool .wrapper .customtool .content.customtool. customclass .customtool #div

你将如何创建一个在每个规则前面添加选择器的自动化过程？

Answer 1

http://www.css-prefix.com/工具似乎不喜欢注释，它会在注释之后注入所需的前缀，而不管后面是什么，在某些情况下会给你留下一些像这样的CSS：

.customtool #div-id #header {
    width: 100%;
    height: 45px;
    /* 60px;*/

    .customtool
    /* 68 originally */

    .customtool margin-top: 15px;
    /*margin-top: 35px; */

    .customtool
    /*margin-top: 20px; */

    .customtool
    /* to make it visible in the iPad browser */

    .customtool
}

解决这个问题的一个相当简单的方法是通过http://www.cleancss.com/css-beautify/这样的美容器运行它。这将用红色突出显示这些错误注入的类，以便发现并删除它们。

Answer 2

一个不是完全自动化的简单解决方案是在Sublime text中使用查找和替换。每个选择器(第一个除外)都跟在前一个选择器之后。因此，您可以找到'}‘并将其替换为'} .customtool’。

但是，为了便于阅读，您可以在每个选择器之间换行。在Sublime文本中，在“查找和替换”窗格中按return运行“查找”，而不是在“查找和替换”窗格中添加换行符。但是，您可以在记事本(或其他纯文本编辑器)中键入以下内容：

}
[add empty line here - cannot be shown in stackoverflow]

然后将其复制并粘贴到“查找”窗口。然后在记事本中键入以下内容：

}

.customtool

然后将其粘贴到Sublime的“替换”窗口中。我建议使用'replace‘而不是'replace all’，因为出于某种原因，Sublime似乎不能检测到所有}，并且可能会出现在右大括号后没有添加空格的情况。注释将停止在查找和替换中拾取注释后的第一个选择器，所以也要注意这些

接下来，通过查找,并替换为, .customtool来处理选择器之间的逗号-足够简单。

最后，您需要手动修改第一个选择器。

使用查找和替换部分自动化在每个选择器之前添加新类的过程，应该可以节省您的时间和精力。然而，如上所述，它并不能完美地工作，需要手动检查。

如果有人写了一个工具来完成这个任务，它将解析CSS表并完全自动化该过程，这将是很有用的。然而，我不知道有任何这样的工具。

Answer 3

您可以使用此automatic prefixer，但它似乎不能很好地处理选择器之间的空格。