CODEWITHSUNDEEP
htmlcss
Bruno Vincent
Bruno Vincent

Reputation: 545

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

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....

Upvotes: 1

Views: 366

Answers (1)

St&#233;phane Ch.
St&#233;phane Ch.

Reputation: 94

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

Upvotes: 2

Related Questions