Removing Unnecessary Styles

[fleemo17]

Over the course of building a very large site, I've wound up with an
enormous style sheet containing plenty of superfluous styles. Is there
a tool that can recognize which styles are not being used in a site
and eliminate them? Can Dreamweaver perform that function?

[dorayme]

In article
<eb**********************************@t1g2000pra.g ooglegroups.com

>,

fl******@comcast.net wrote:

Over the course of building a very large site, I've wound up with an
enormous style sheet containing plenty of superfluous styles. Is there
a tool that can recognize which styles are not being used in a site
and eliminate them? Can Dreamweaver perform that function?

I will just tell you one method I use: you see .class in the css
and wonder if it is being used. So use the Search and Replace
function in your text editor and search the whole set of html
docs for (to take the simplest case) class="class". If it #id you
are wondering about, search for (again, to take the simplest
case), id="id"

There are more complicated searches that you might need to make
and a familiarity with GREP functions would assist you. But you
*can* get by mostly without. For example, if you suspect you have
muliple classes specified in your page like class="class1 class2"
then you can simply search for "class1 and then search later for
class1" and then later "class2 and then class2". If you suspect a
triple class and you need to capture the middle one, well there
is always simply class.

--
dorayme

[fleemo17]

Thanks for the response, dorayme. Yeah, I was hopin' there'd be an
easier solution than performing a search for each individual class and
id. Like I said, this style sheet has gotten huge over time, so it's
going to be a laborious task. :\

[dorayme]

In article
<a7**********************************@v4g2000hsf.g ooglegroups.com

>,

fl******@comcast.net wrote:

Thanks for the response, dorayme. Yeah, I was hopin' there'd be an
easier solution than performing a search for each individual class and
id. Like I said, this style sheet has gotten huge over time, so it's
going to be a laborious task. :\

I guess it depends on how big your project is. The actual global
Find functions work in less than the time you can say, "O hells
bells, I have been making this site up as I go without sufficient
strategic planning" <g>

You can also use intuition and guess work. On this, here is a
further strategy I recommend:

The extra classes and things that do no work in the css might do
no harm. So you have time on your side. So comment out anything
you even suspect is a cog that is not engaged with any machinary.
And browse away on your local machine or server and if nothing
ever shows up wrong you ever notice after a few days or weeks,
dump the cog.

(btw... Please try to quote the gist of the thread before
replying as many folk here do not use Google to read newsgroups
and some of us have online readers that dump old posts).

--
dorayme

[Andy Dingley]

On 11 Jan, 01:06, GTalbot <[e-mail]:

Most of the time, beginners at CSS do not understand what is
inheritance and how to use it.

Probably a good thing. CSS rules aren't inherited.
CSS property values may be inherited, but that's different. An
assumption that CSS uses "inheritance" in hoow selectors are applied
(it actually uses cascading) is a common mis-understanding, especially
amongst O-O programmers.

[Andy Dingley]

On 10 Jan, 20:42, [e-mail] wrote:

Over the course of building a very large site, I've wound up with an
enormous style sheet containing plenty of superfluous styles. Is there
a tool that can recognize which styles are not being used

In the full and generalised case, no. It's a computationally difficult
problem. It's _impossible_ to do so for a stylesheet alone, as it
requires knowledge of the HTML to which it's being applied.

As a quick start though, try using a simple CSS validator, like the
W3C online one. This will give you a "normalised" rendition of the CSS
that's usually a good starting point. Where the CSS contains lots of
simple verbosity and literal duplication, then this can be useful.

The real problem though is more difficult. You will typically have
much CSS that repeats rules (or at least properties) but applies them
through different selectors. It's not ppossible to simplify this
automatically, as the CSS _is_ actually different. Only by applying
external knowledge of the HTML it's applied to (a HTML meta-structure
for the site) is it even _possible_ to recognise what's superfluous
duplication.

As an example, it's commonly-seen bad practice to apply CSS rules to
an <lielement, especially when there's a class repeated onto each
<litoo. A better CSS structure is to re-code this to style the <ul>
and then inherit (font settings etc. would inherit happily, but
obviously box-sizing couldn't), or even to apply the class to the <ul>
element and use selectors of the form ul.foo li {} instead. Making
these changes though requires an overall view of the problem, right
back to the HTML meta-structure level. It's not something you can
expect a simple dupe-stripping script on the CSS alone to achieve.

IMHE, it's very difficult to improve complex existing CSS. The trick
is to structure and design carefully from the outset. Refactoring it
afterwards is hard!