Ir al contenido principal

Ralsina.Me — El sitio web de Roberto Alsina

MinCSS is amazing

I had this is­sue open in the bug tra­cker for Niko­la (my sta­tic si­te ge­ne­ra­to­r) for a long ti­me: "A­dd min­css su­ppor­t".

We­ll, no, it does­n't ha­ve it ye­t, but I did so­me re­sear­ch on whe­ther it would be wor­th addin­g. And bo­y, min­css im­press­ed the he­ck out of me.

You see, Niko­la's the­mes tend to use una­dul­te­red boots­tra­p, whi­ch means they ca­rry a lar­ge num­ber of things that are not us­ed in their CSS. Be­si­des, it uses se­ve­ral sty­les­hee­ts from do­cu­til­s, pyg­men­ts, and mo­re.

What min­css does is exa­mi­ne your HT­ML and your CSS, and re­mo­ve all the unu­s­ed CSS. So, I wro­te a script that exa­mi­nes the Niko­la ou­tput and ove­rw­ri­tes the CSS fi­les wi­th the mi­ni­mal things that are ac­tua­lly nee­ded the­re.

And the re­sul­t?

He­re is the be­fo­re/a­fter for ea­ch CSS fi­le in Niko­la's de­mo si­te:

bootstrap-responsive.min.css  16849  3251
bootstrap.min.css            106059 14737
code.css                       3670  2114
colorbox.css                   6457   774
rst.css                        6559  2581
theme.css                      1287  1061
-----------------------------------------
                             140881 24518

But wai­t, Niko­la su­ppor­ts bund­ling all tho­se fi­les in­to a sin­gle lar­ge CSS fi­le to avoid ne­two­rk re­ques­ts (u­sing we­ba­sse­ts). Does it wo­rk in that ca­se too?

We­ll ye­s:

all-nocdn.css                167457 29496

But that is not all. The min­css fi­les are not mi­ni­fie­d. Pa­s­sing all-­no­cd­n.­css th­rou­gh Yui-­com­pres­sor sh­ri­nks it fur­ther to 20599 by­tes. Whi­ch, gzi­ppe­d, is a pal­try 4801 by­tes. That means the com­ple­te sty­ling of the who­le si­te is a sin­gle CSS fi­le le­ss than 5KB in si­ze.

Tha­t, is im­pres­si­ve.

masklinn / 2013-06-19 20:17:

You could also check https://github.com/afrigger... it's more of a toy/demo, but who knows, it might do rather well


Contents © 2000-2020 Roberto Alsina