css - 自动 'namespacing' CSS

Question

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

我想把我的工具放在一个包装器 div 中，类为“customtool”，然后在每个 CSS 选择器前面加上 .customtool 我有很多样式表，选择器的总数很高。我知道手动修改选择器存在人为错误的风险。

显然我不能简单地定位“.”或 '#' 因为它不适用于像 .wrapper .content.customclass #div 这样的选择器在这种情况下，我想

.customtool .wrapper .content.customclass #div但替换 '.'使用“.customtool”。和 '#' 与 '.customtool #' 将给出 .customtool .wrapper .customtool .content.customtool。自定义类.customtool #div

您将如何制作一个自动化程序来在每条规则前面添加选择器？

Answer 1

http://www.css-prefix.com/工具似乎不喜欢注释，它会在注释后将所需的前缀注入(inject) CSS，而不管后面是什么，在某些情况下会留下一些像这样的 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/ .这将以红色突出显示这些错误注入(inject)的类，以便于发现并删除它们。