Question

I have a web project that I am ripping out all the inline styling and adding it to a CSS file, and I can’t help but think there is an easier way to do this.

My current process is:

1. Search Solution for style=", if none selected, goto: 9
2. Cut all the text between the quote marks
3. Create new class in CSS file
4. Paste code in class
5. Copy class name
6. Return to html line and paste class name in between quote marks
7. Rename style to class
8. goto: 1
9. Rejoice!

I would really like to rejoice, but there seems to be a never ending supply of inline styling.

Is there a way to automate this process in Visual Studio 2010? If it requires writing a plugin, that is totally fine! I have this same task to do on many a project.

Also, I’d like to be able to do this for arbitrary tags. For example, I’m also taking all of the data-* tags and doing roughly the same thing, but adding a line of jQuery to add it back in. Something like:

$('SELECTOR').attr('data-bind','visible: IsValid');

The work is too repetitious for me not to believe there is an automated (or at least faster/better/less time consuming) way of doing this.

The project is an MVC project if that changes anything.

Answer 1

If you’re looking for tool to replace inline style to css class, there are tools available:

http://www.voodoobytes.info/humbles-tools/

http://www.tinytool.net/96002/inline_css_extractor