Looking for CSS minimizer

[Yashgt]

I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;
}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;
Please let me know which tool can be used.

Thanks,
Yash

[Jonathan N. Little]

Yashgt wrote:

I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;
}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;

actually they could be

..myclass {
margin: 7px 5px 0 0;
padding: 5px 0;
}

and the best tool is notepad and a human...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Harlan Messinger]

(follow-ups set to c.i.w.a.s only, since this isn't an HTML question)

Yashgt wrote:

I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;
}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;

margin: 5px 7px 0px 0px;

is not the equivalent of

margin-right: 7px;
margin-top: 5px;

The former may override left and bottom margins that would otherwise
have been set on the affected elements because of other CSS rules that
have been applied.

By the way, you need a period in front of myclass.

[Andy Dingley]

On 3 Jul, 11:14, Yashgt <[e-mail]:

I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;

}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;

This is a difficult problem, so difficult that it's impractical. It's
certainly not possible to do it (usefully) by processing the CSS
alone.

The trivially simple case of margin-right: <1vs. margin: <4is easy
enough, but just not very useful. It's only easy to do within the
scope of a single block, and if all four values are supplied. If some
of these values are equal, it's still easy to generate the 1,2 or 3
valued version of the margin property.

The problem is though if some of the values _aren't_ supplied. In your
example, margin : 5px 7px 0px 0px; is just wrong - that sets margin-
bottom and margin-left to 0 when previously they hadn't been set at
all.

If you group the CSS properties for blocks with exactly matching
selectors, then you can likely save a bit more (if the CSS was written
in that way, which it often isn't for sophisitcated work). Again
though, you're only able to replace dumb matches of entire sets in CSS
that's _obviously_ inefficient.

Overall, this trivial minimisation is just that: trivial. It might
save a few bytes, but not enough to be worthwhile.

The real optimisation is in realising the properties in one block will
provably never be applied as they're always going to be preceded by
properties in another block with a different selector. This is
computationally difficult and requires knowledge of the entire site -
the HTML as well. Not just one page of HTML, but the whole CSS meta-
structure that applies across the whole site. _IF_ you know that the
"nav-menu" class is only ever applied to HTML elements that are
children of the "header-bar" class, then you can potentially do
simplifications on the basis of this. However this also _changes_ the
behaviour of the CSS (the CSS alone) and a page with a "bare" nav-menu
used outside the header might notice a resultant change in behaviour.

CSS is almost all badly coded. So where a tool is difficult to provide
and only shows a benefiit where the design structure is consistent,
yet slightly inefficient in its coding, then that's a very narrow
margin of usefulness for such a tool.

[Joost Diepenmaat]

Andy Dingley <di*****@codesmiths.comwrites:

On 3 Jul, 11:14, Yashgt <[e-mail]:

>I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;

}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;

This is a difficult problem, so difficult that it's impractical. It's
certainly not possible to do it (usefully) by processing the CSS
alone.

Good reply. In any case, the quickest and most efficient way to shrink
your CSS is to gzip it. Just as a test, I gzipped the CSS from the
xkcd.com homepage, which brought the filesize down to 893 bytes, from
9048 bytes; a reduction of over 90%. Any further reductions by
'preprocessing' the code will probably be minimal.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[Jonathan N. Little]

Joost Diepenmaat wrote:

Andy Dingley <di*****@codesmiths.comwrites:

>On 3 Jul, 11:14, Yashgt <[e-mail]:

>>I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;

}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;

This is a difficult problem, so difficult that it's impractical. It's
certainly not possible to do it (usefully) by processing the CSS
alone.

Good reply. In any case, the quickest and most efficient way to shrink
your CSS is to gzip it. Just as a test, I gzipped the CSS from the
xkcd.com homepage, which brought the filesize down to 893 bytes, from
9048 bytes; a reduction of over 90%. Any further reductions by
'preprocessing' the code will probably be minimal.

The biggest problem is not filesize but in most cases going overboard on
css rules that bog down the processing of the page for the browser.
Some sites have thousands of rules, many contradictory, or unnecessary.
Stylesheets can accrue crap like 4-year-old Window's
Registry...sometimes it is best to dump and rebuild the stylesheet from
scratch.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Bergamot]

Jonathan N. Little wrote:

>
Some sites have thousands of rules, many contradictory, or unnecessary.

Often this is the result of some editor generating the CSS. Dreamweaver
or just about any Microsoft product come to mind.

--
Berg

[Jean Pierre Daviau]

Good reply. In any case, the quickest and most efficient way to shrink
your CSS is to gzip it. Just as a test, I gzipped the CSS from the
xkcd.com homepage, which brought the filesize down to 893 bytes, from
9048 bytes; a reduction of over 90%. Any further reductions by
'preprocessing' the code will probably be minimal.

How do you import such a zipped file?

[Joost Diepenmaat]

"Jean Pierre Daviau" <on**@isEnough.okwrites:

>Good reply. In any case, the quickest and most efficient way to shrink
your CSS is to gzip it. Just as a test, I gzipped the CSS from the
xkcd.com homepage, which brought the filesize down to 893 bytes, from
9048 bytes; a reduction of over 90%. Any further reductions by
'preprocessing' the code will probably be minimal.

How do you import such a zipped file?

Just like the non-zipped file, provided your web server sends the
correct headers. See the documentation on the "content-encoding" and
"accept-encoding" HTTP headers. Note that this works for ALL
resources, not just CSS (though some kinds of data gzip a lot
better than others).

http://httpd.apache.org/docs/2.0/con...gotiation.html
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[Sherman Pendley]

"Jean Pierre Daviau" <on**@isEnough.okwrites:

>Good reply. In any case, the quickest and most efficient way to shrink
your CSS is to gzip it. Just as a test, I gzipped the CSS from the
xkcd.com homepage, which brought the filesize down to 893 bytes, from
9048 bytes; a reduction of over 90%. Any further reductions by
'preprocessing' the code will probably be minimal.

How do you import such a zipped file?

You don't - the process is entirely invisible to the end user. A
browser that supports HTTP 1.1 can request gzip-compressed content
by including an Accept-Encoding header in its request:

Accept-Encoding: gzip;

The server can then respond by sending compressed content, along with
the appropriate response header:

Content-Encoding: gzip;

Have a look at:

<http://www.websiteoptimization.com/speed/tweak/compress/>

sherm--

--
My blog: http://shermspace.blogspot.com
Cocoa programming in Perl: http://camelbones.sourceforge.net

[GTalbot]

On Jul 3, 10:59*am, "Jonathan N. Little" <[e-mail]:

The biggest problem is not filesize but in most cases going overboard on
* css rules that bog down the processing of the page for the browser.
Some sites have thousands of rules, many contradictory, or unnecessary.

Exactly. Very long CSS stylesheets, over-excessively specified CSS
rules, over-qualified CSS rules, over-excessive detailed style
declarations (sometimes to work around browser bugs but more often
typical of a pixel-precise and constraining webpage layout) are more
and more frequent.

Often, bloated CSS code start with universal selector like

* {margin: 0; padding: 0;}

which I think should be exposed, explained and denounced. There are
maybe only 3 types of elements which default browser values need to be
neutralized or zero-ed: lists (ul, ol: margin-left and padding-left),
list-item (li: margin-left and padding-left) and form elements
(vertical margins). That's it.

Regards, Gérard

[Bergamot]

GTalbot wrote:

>
Often, bloated CSS code start with universal selector like

* {margin: 0; padding: 0;}

which I think should be exposed, explained and denounced.

Hey - I denounce it!

This is something that's only used by control freaks.

--
Berg

[Chris F.A. Johnson]

On 2008-07-15, GTalbot wrote:

On Jul 3, 10:59*am, "Jonathan N. Little" <[e-mail]:

>The biggest problem is not filesize but in most cases going overboard on
* css rules that bog down the processing of the page for the browser.
Some sites have thousands of rules, many contradictory, or unnecessary.

Exactly. Very long CSS stylesheets, over-excessively specified CSS
rules, over-qualified CSS rules, over-excessive detailed style
declarations (sometimes to work around browser bugs but more often
typical of a pixel-precise and constraining webpage layout) are more
and more frequent.

Often, bloated CSS code start with universal selector like

Nonsense.

* {margin: 0; padding: 0;}

That's very useful, but will probably make rendering the page a
little slower.

which I think should be exposed, explained and denounced.

There's nothing wrong with it.

There are maybe only 3 types of elements which default browser
values need to be neutralized or zero-ed: lists (ul, ol: margin-left
and padding-left), list-item (li: margin-left and padding-left) and
form elements (vertical margins). That's it.

Quite the opposite; those are the elements that usually need the
margin-left or padding-;left reinstated.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)