Is there some tool to automatically convert css classes to custom prefixed ones?

Question

Tool to append prefix and or suffix to CSS and HTML Simultaneously

I like to use scripts on codepen, but often the class names are generic, like p, div , label ect...

So I wonder if there is a tool to substitute class names and append a prefix or suffix to BOTH html, CSS and JS simultaneously.

That way if I use the code on my site it won't conflict with my classes or even ID's...

Something the would turn:

<div class="a">Hello</div>

Into:

<div class="my_a">Hello</div>

And simultaneously:

.a

into

.my_a

This can be done with find and replace, but it's tedious and prone to errors....

I am not sure this can be done to your css though, What I can suggest is have a id to your body tag and then go ahead and change every css of yours into this #BodyId .a etc.. — Rajshekar Reddy
– Rajshekar Reddy, Commented Mar 30, 2016 at 8:52
Questions asking us to suggest, find or recommend a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow Stack Overflow — Paulie_D
– Paulie_D, Commented Mar 30, 2016 at 10:35

Stéphane Ch. · Accepted Answer · 2016-03-30 11:52:26Z

2

this could be done using Regular Expressions.

Linux command line :

sed 's/class="\([^"]*\)"/class="my_\1"/g' old.html >new.html
sed 's/\.\([a-zA-Z0-9_\-]\+\)/.my_\1/g' old.css >new.css

or in any number of good text editors (Geany, Notepad++, ...) :

replace

class="([^"]*)" with class="my_\1"

and

\.([a-zA-Z0-9_\-]+) with .my_\1

edited Mar 30, 2016 at 11:52

answered Mar 30, 2016 at 11:26

Stéphane Ch.

947 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bruno Vincent Over a year ago

In Notepad++ how can I do this? What do I put into FIND box and then into REPLACE box?

Stéphane Ch. Over a year ago

I haven't used Notepad++ in quite some time, but some googling brought up this page : nliautaud.fr/wiki/articles/notepadpp/… It's in French, but basically, you just have to select "Regular expressions" from the radio button under "Search mode".

Mahn Over a year ago

Will not work for class="multiple class names like this".

Bumhan Yu Over a year ago

They say "I had a problem, so I used a regular expression. Now I have two problems." (see this). It might work for certain cases but not for certain other cases; it depends on the coding convention of the target file.

Collectives™ on Stack Overflow

Is there some tool to automatically convert css classes to custom prefixed ones?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related