[thelist] Identifying Orphaned CSS Styles

sam foster potatosculptor at gmail.com
Wed Aug 16 23:57:30 CDT 2006


On the face of it, this is a fairly simple problem. You can extract
classnames and IDs from your stylesheets (using a regexp or 2), and
extract the same from your html (remembering to account for multiple
class names in a class attribute). Dump both lists into a spreadsheet
and sort/filter to get the list of potential orphans you are looking
for.
It gets a little more complicated if you want to be thorough, and you
starting thinking about CSS selectors and how to locate all the
elements given rules might be applied to. But the first pass is quite
simple.
It gets a little more complicated again when you start looking at ids
and classnames that might be set by javascript. Particularly when the
classname is strung together at runtime:
var cls = "button-" + state;
So, if you write or find a tool, it should at minimum list out script
files for manual inspection, or maybe have it peek inside any linked
scripts files for a pattern like /\(id|className)\s*=/i.

Oh, and for the same reason it's better to be searching through
rendered source (static html files) rather than the (.jsp etc) source
itself.

have fun (Perl loves this kind of problem :)

Sam

On 6/15/06, Drew Shiel <ashiel at sportsinteraction.com> wrote:
>
>   Hi folks;
>
>   I'm sure this has come up for someone before. We've a fairly large site,
> which uses about six different CSS files. Some of these files are suffering
> from a certain degree of bloat, and I know that some of the defined styles
> are no longer in use.
>
>   Is there any way to easily identify which styles are no longer in use
> anywhere on the site? Ideally, this will be some software or spider, but
> even a suggestion as to a methodology to write a script of our own to work
> it out would be good.
>
>   The major problem is that a developer who worked here for a while was fond
> of carefully positioning unique elements of a page, and dumping the
> necessary CSS into the site-wide style sheets. Many of those unique elements
> have been changed by now, but the styles are still there, and have
> uninformative names like "infobar".
>
>   Cheers,
>   Drew.



More information about the thelist mailing list