Renaming HTML classes across CSS files

If I 开发者_如何学编程have 100 HTML files that use a set of classes that are used as selectors in CSS files, is there a utility that I can use to intelligently rename the classes?

I know that every editor/IDE has a find/replace in project feature. Using sed you can do the same thing. This is not intelligent because it is a simple string replace. I want to know of a tool that actually understands what a CSS class is and how to replace instances of it. I suppose a fancy regular expression can do the same thing.

I think you are looking for Google's Closure stylesheets.
One of the closure stylesheets features is renaming.

example of closure stylesheets renaming features as following.

<style>
  .descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
  <p class="descriptive-element-class-name">Lorem ipsum</p>
  <p class="descriptive-element-class-name">Lorem ipsum</p>
</div>

would become

<style>
  .a-b .a-c {color:red;}
</style>
<div class="a-b">
  <p class="a-c">Lorem ipsum</p>
  <p class="a-c">Lorem ipsum</p>
</div>

There'll be further minification features too.

Also check closure Compiler.

if you inspect any Google/Facebook page, you'll see their class and ID names are almost never longer than 4 random characters

Take a look at Netbeans 6.9 m1. It has CSS Refactoring / Find Usages Support maybe that is what are you looking for.

http://wiki.netbeans.org/NewAndNoteworthy69m1#CSS_Refactoring_.2F_Find_Usages_Support

If this is still up-to-date there is a library called rcs short for rename-css-selectors.

This is the library and it is pretty easy to use: rcs-core

It comes with a lot of plugins, such as webpack, parcel and node: https://github.com/JPeer264/node-rcs-core#plugins