Automatic 'namespacing' CSS

Question

I created an HTML5 tool that used to be on a separate page. The client wants to include it on their page, but is concerned about CSS conflicts.

I would like to put my tool in a wrapper div with the class say 'customtool' and then the preface of each CSS selector with .customtool. I have several style sheets, and the total number of selectors is large. I am aware of the risks of human error when manually making changes to selectors.

Obviously, I can’t just aim. "Or '#', since it will not work for a type selector. .wrapper .content.customclass #div In this case, I would like to

.customtool .wrapper .content.customclass #div but replacing the "." with ".customtool". and '#' with '.customtool #' will give.customtool .wrapper .customtool .content.customtool. customclass .customtool #div

How could you do an automatic procedure to add a selector before each rule?

Answer 1

The tool http://www.css-prefix.com/ does not seem to be like comments, it will add the desired CSS prefix after the comment, no matter what you will be left with some CSS like 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 the Beautifier, for example http://www.cleancss.com/css-beautify/ . This will underline these incorrectly entered classes in red, making it easier to detect and delete.

Answer 2

, , Sublime. ( ) . "}" ".customtool".

. Sublime Text , . ( ):

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

. "" :

}

.customtool

"replace" Sublime. "", , " ", - Sublime, , }, , . , ,

, , .customtool - .

, .

Find and Replace . , , .

, - , CSS . .

Answer 3

You can use this automatic prefix , but it looks like it does a great job with spaces between your selectors.