CODEWITHSUNDEEP
asp.nethtmlcss
Drejc
Drejc

Reputation: 14286

Extract inline CSS from HTML and purify pages

I have a large set (over 300) of C# ASP.NET pages *.aspx and controls *.ascx, which are littered with inline CSS styles. My task is to extract those style into a CSS file.

So I'm looking for a tool to simplify the task of manually extracting this inline styles and replacing them with class="" statements.

Now I know this is not the ideal solution of doing things, but any tool which could ease the task would be helpful.

Upvotes: 5

Views: 4018

Answers (3)

talsibony
talsibony

Reputation: 8756

I was looking for such tool also and found this:

https://templates.mailchimp.com/resources/inline-css/

I was quite surprised from the results there were some manual adjustments I had to do but not that much consider to the results, actually it decreases my page from 4.4 millions chars into 40K

Upvotes: 0

saille
saille

Reputation: 9191

No tool will write good CSS selectors for you, just like no tool can write good code for you. Yes, you can generate code from templates, but only for the most repetitive of coding tasks. CSS is more art than science, and as such "auto-generation" will not yield good results.

Writing good, clean, lean, maintainable CSS requires an intimate knowledge of the HTML markup, the style & layout that you are trying to achieve, and the skill of identifying patterns across the whole site, such as font, color, h1 headings, presentation of tabular data etc., which are re-used.

Even writing your own script will not produce good CSS. The best you could hope for is to extract all those inline styles, replace them with a unique id or class, and dump them all into a css file. I don't actually see a lot of benefit in that exercise. You actually end up with more code to maintain because of all the extra id's or classes that you will create.

You will not gain consistency of appearance throughout your site from the above exercise, unless you start to consolidate all those unique id's or classes into fewer, more re-used ones, and this is a task best done by hand, not automation anyway. Page load times may improve due to browser caching of the css stylesheet, but thats about all you gain.

Sorry if I've strayed a bit from your question, but your site sounds like it is crying out for you to re-write your CSS from scratch.

Check out CSS Zen Garden for inspiration on what CSS can do, and examples of beautiful CSS, and be inpired!

Upvotes: 2

Jeffrey Blake
Jeffrey Blake

Reputation: 9709

I would probably opt for using a scripting language with regular expressions. This seems like it would fit especially well with python's list capabilities - for each match to your regex, you can check the list to see if there is a corresponding entry, extract and assign the class from that result, and add each non-listed match to the list to continue building it up.

Upvotes: 0

Related Questions