4

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.

Drejc
  • 14,196
  • 16
  • 71
  • 106

3 Answers3

2

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!

saille
  • 9,014
  • 5
  • 45
  • 57
  • 1
    You know this one of those jobs I come in while all the damage has already been done. So I have created a simple estimate how much time I would spend on "fixing" the current situation and came up whit about 20 days at least. Si this is the kind of answer I was hoping not to get. While the following is true it will not solve my problem. And it helps zero. – Drejc Jul 19 '10 at 06:43
  • Yes it will take a bucket load of time, longer than it would have taken to do it right in the first instance. All you can do is explain to your team/boss/client why dumping CSS into files with a tool is absolutely pointless and explain the benefits of doing it right. Let them decide whether to proceed or not. – saille Jul 20 '10 at 00:59
0

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.

Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
  • Yes ... true, but I'm more looking for an existing tool to do this. I'm not very keen on writing my own. – Drejc Jul 09 '10 at 12:06
  • 1
    Don't use Regular Expressions to parse HTML, use a proper HTML parser: http://stackoverflow.com/a/1732454/3408 – rjmunro Feb 06 '12 at 15:58
  • He's not looking for a way to parse HTML. He's looking to replace a specific set of patterns of text with another specific set of patterns. Regex can do that quite well. That those patterns occur within HTML has no bearing on whether or not regex can aptly accommodate his needs. – Jeffrey Blake Feb 07 '12 at 16:27
0

You can use this tool, it will look for inline style=... definitions replace them with class definitions and generate a style sheet. Hope this is helpful.

peritus
  • 3,732
  • 2
  • 22
  • 17
Tomek
  • 121
  • 1
  • 6