Tool for generating CSS skeleton? - css

Question

My HTML is all marked up, ready to make it rain CSS. The problem is that I have to go back and find out what all my id and class names are so I can get started. What I need is a tool that parses my HTML and spits out a stylesheet with all the possible elements ready to be styled (maybe even with some defaults). Does such a tool exist?

Answer 1

I have a poor man's version of this I have used in the past... this requires jquery and firebug...
<script type="text/javascript">
$(document).ready(function() {
$('*[#id]').each(function() {
console.log('#' + this.id + ' {}');
});
$('*[#class]').each(function() {
$.each($(this).attr('class').split(" "), function() {
console.log('.' + this + ' {}');
});
});
});
</script>
it gives you something like this:
#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}
if you want them in "natural" page order instead...
<script type="text/javascript">
$(document).ready(function() {
$('*').each(function() {
if($(this).is('[#id]')) {
console.log('#' + this.id + ' {}');
}
if($(this).is('[#class]')) {
$.each($(this).attr('class').split(" "), function() {
console.log('.' + this + ' {}');
});
}
});
});
</script>
I just load the page with that script in there, then cut and paste the results out of firebug... then obviously, remove the script :)
you'll need to remove the dups manually or just toss in some simple dup checking logic with a map or array or something.. one for IDs and one for classes.

Answer 2

When I first saw this, I thought "Great question! Neat answer, danb!"
After a little thought, I'm not so sure this is a good idea. It's a little like generating event handlers for all controls in an ASP.NET page, or generating CRUD procedures for all tables in a database. I think it's better to create them as needed for two reasons:
Less clutter from empty style declarations
Less temptation to misuse (or underuse) CSS by writing everything at the class level rather than using descendant selectors like (#navigation ul li a).

Answer 3

http://lab.xms.pl/css-generator/ seems to fit the description.

Answer 4

I agree with Jon, but I don't see a problem* with doing what the OP wants. Using the script provided, you'd know all of your classes and ids. While working on your CSS, you should be deciding if you need to use each of them. At the end, or at the point that you feel like you have a good handle on what you're doing, run it through an optimizer / compressor so it removes unused ids and classes.
*Operating assumption: You either didn't write the original HTML or you wrote it and later decided that "gosh CSS would be really nice here now, I wish I would have started with it." :-)

Answer 5

Not that it isn't a sensible question with a sensible answer, but it implied to me the kind of unnecessarily marked-up HTML that people create when they don't understand positional selectors: the kind of code where everything has a class and an id.
<div id="nav">
<ul id="nav_list">
<li class="nav_list_item">
<a class="navlist_item_link" href="foo">foo</a>
</li>
<li class="nav_list_item">
<a class="navlist_item_link" href="bar">bar</a>
</li>
<li class="nav_list_item">
<a class="navlist_item_link" href="baz">baz</a>
</li>
</ul>
</div>
you can remove everything except the id on the div and still be able to style everything there by its position; and obviously, the script won't show you all those possible selectors, will it?
In other words, a narrow focus on CSS as something done to classes and ids is a concern.

Answer 6

This blog entry references to something similar to what you need here.
It contains a link to a Perl script called 'stylizator.pl'. This script parses the html to look for possible CSS elements and outputs them to a file.

Answer 7

Another way to approach this is to standardise the id and class names you use in your HTML according to some sort of naming convention.

Answer 8

I disagree with Jon. While this solution can be used poorly in the way he describes, it does not necessarily mean it will. Any wise developer or designer is going to take the script generated css classes and pull only what is really needed into the css file.
The solution still solves the OP's question.

Answer 9

I've made a generator which makes the html and css for you = https://www.andy-howard.com/css-skeleton-screen-generator/
Not much else to say really, it utilises the :empty selector in css.