Automatically 'namespacing' 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.

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.

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 but replacing '.' with '.customtool .' and '#' with '.customtool #' would give .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?

回答1:

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
}

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.

回答2:

A simple solution that is not fully automated is to use find and replace in Sublime text. Every selector (apart from the first) follows the previous one. Therefore you could find and replace '}' with '} .customtool'.

However for easy reading you may have a new line between every selector. In the Sublime Text pressing return in the find and replace pane runs find, rather than adding a line break in the find and replace pane. However you can type the following in Notepad (or other plain text editor):

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

Then copy and paste it into the find window. Then type the following in Notepad:

}

.customtool

Then paste it into the 'replace' window in Sublime. I would suggest using 'replace' to step through the changes rather than 'replace all' as for some reason Sublime doesn't seem to detect every } and there may be instances where you haven't added a space after the closing brace. Comments will stop the first selector after the comment from being picked up in the find and replace, so keep an eye out for these too

Next deal with the commas between selectors by finding , and replacing with , .customtool - simple enough.

Finally you will need to manually modify the first selector.

Using Find and Replace to partially automate the process of adding a new class before every selector, should save you time and effort. However as described above it does not work flawlessly and needs manual checking.

It would be useful if someone wrote a tool for completing this task that would parse CSS sheets and fully automate the process. However I am not aware of any such tools.

回答3:

You could use this automatic prefixer, but it doesn't seem to handle spaces between your selectors well.

来源：https://stackoverflow.com/questions/37206639/automatically-namespacing-css

标签

css

namespaces