自动“命名空间”CSS [英] Automatically 'namespacing' CSS

问题描述

我已经建立了一个HTML5工具，以前在一个独立的页面。客户希望将其包含在他们的网页中，但是担心CSS冲突。

I have built a HTML5 tool that used to be on a stand alone page. A client wants to include it in their page, but is concerned about CSS conflicts.

我想把我的工具放在一个包装的div，一个类'customtool '然后前面每个CSS选择器与.customtool我有一些样式表和选择器的总数是高的。我知道手动修改选择器的人为错误的风险。

I would like to put my tool in a wrapper div with a class of say 'customtool' and then preface every CSS selector with .customtool I have a number of stylesheets and the total number of selectors is high. I am aware of the risk of human error with a manually amending the selectors.

显然，我不能简单地定位'。'或'＃'，因为它不适用于 .wrapper .content.customclass #div
在这个例子中，我想要

Obviously I cannot simply target '.' or '#' as it would not work for a selector like .wrapper .content.customclass #div In this instance I would like

.customtool .wrapper .content.customclass #div
，但用'.customtool。'替换'。'，用'.customtool＃'替换'＃'会给 .customtool .wrapper .customtool .content.customtool。 customclass .customtool #div

如何进行自动过程以在每个规则前添加选择器？

How would you go about making an automated procedure to a add the selector in front of every rule?

推荐答案

http：/ /www.css-prefix.com/ 工具似乎不喜欢的意见，它会注入所需的前缀到CSS注释后，无论后面是什么，留下一些CSS这样的在一些个案：

The http://www.css-prefix.com/ tool doesn’t seem to like comments, it will inject the desired prefix in to the CSS after a comment regardless of what is followed, leaving you with some CSS like this in some cases:

.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/ 。这将突出显示这些错误注入的类在红色，使它很容易发现和删除它们。

A fairly simple fix for this is to run it through a Beautifier such as http://www.cleancss.com/css-beautify/. This will highlight these wrongly injected classes in red making it easy to spot them and remove them.

这篇关于自动“命名空间”CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！