Click here to get back home

Looking for CSS minimizer
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Looking for CSS minimizer Yashgt 07-03-2008
Posted by Yashgt on July 3, 2008, 6:14 am
Please log in for more thread options
 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

Posted by Jonathan N. Little on July 3, 2008, 9:24 am
Please log in for more thread options
 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

Posted by Harlan Messinger on July 3, 2008, 9:45 am
Please log in for more thread options
(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.

Posted by Andy Dingley on July 3, 2008, 10:05 am
Please log in for more thread options
> 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: <1> vs. margin: <4> is 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.







Posted by Joost Diepenmaat on July 3, 2008, 10:34 am
Please log in for more thread options

>> 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/


Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap