Generate a CSS file from HTML markup

Question

I create a lot of html and css pages. Is there a way to markup an html file, than generate a css file from the markup.

Here's what i'm thinking:

Example Markup

<body id="home">
   <section id="main">
       <article>
           <p>Some content</p>
       </article>
   </section>

   <aside>
       <article>
           <p>Some more content</p>
       </article>
   </aside>
</body>

Example of generated CSS

#home {  }
#home #main {  }
#home #main article {  }
#home #main article p {  }

#home aside {  }
#home aside article {  }
#home aside article p {  }

I would take a look at CSS Lint -- that type of generated CSS would be highly impractical. Never use 2 IDs, and CSS lint actually recommends never using them at all. — Kerry Jones
– Kerry Jones, Commented Aug 16, 2011 at 21:09
CSS lint is stupid when it comes to recommending not using ids. — sidyll
– sidyll, Commented Aug 16, 2011 at 21:10
Unless you have another process that strips out any empty css rule, this would leave too much unused css, bloating your css files and making your site slow. — Paul DelRe
– Paul DelRe, Commented Aug 16, 2011 at 21:12
It would be quite easy to do that, but you'll get a giant CSS that is of no practical use to you. Better analyse the code yourself and add only the styles you need. The result will be better and you'll get there faster. — GolezTrol
– GolezTrol, Commented Aug 16, 2011 at 21:12
I believe this same question was answered at stackoverflow.com/questions/4574208/…. — Joe Landsman
– Joe Landsman, Commented Aug 16, 2011 at 21:21

Vlad · Accepted Answer · 2011-08-16 21:13:32Z

2

Yes, there is: parse the HTML and walk the DOM tree to generate your skeleton CSS file.

PS: that IS very impractical CSS.

answered Aug 16, 2011 at 21:13

Vlad

10.8k3 gold badges40 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Over a year ago

I agree that it's impractical css, but it makes the file very readable and it ends up saving time with future edits.

Charles Over a year ago

@Dan: Less time typing new selectors, more time hunting for the selectors. Unless your pages are small I'd think the usual way would be faster.

Charles Over a year ago

Hmm... is this the answer of the first-name users?

Collectives™ on Stack Overflow

Generate a CSS file from HTML markup

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related