D
D
Dmitry Katyushin2015-06-18 12:01:52
css
Dmitry Katyushin, 2015-06-18 12:01:52

How do you super-duper compress HTML/CSS code?

Recently, it became very interesting how such code is made:

<li class="iukp14 _eV kno-fb-ctx img-kc-m bili uh_r rg_el" style="width:151px" data-ved="0CHQQ-x0oADAO"><div style="height:151px;width:151px" class="bicc"><a class="bia uh_rl" href="/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=15&amp;cad=rja&amp;uact=8&amp;ved=0CHUQ_B0wDg&amp;url=https%3A%2F%2Fplus.google.com%2Fu%2F0%2F116899029375914044550&amp;ei=yIaCVciqL8y9Ufeyg5gH&amp;usg=AFQjCNF0JbMeF9yxqTTcAwzkFgQ8uzIKgA&amp;sig2=_KCQF1dLqRs6Ph4jKHDg7g&amp;bvm=bv.96041959,d.d24" id="4DBV4mzkv25nWM:" role="link" style="height:151px;margin-left:0px;margin-right:0px;margin-top:0px;width:151px" tag="bia" tabindex="0" jsaction="fire.ir_hc" onmousedown="return rwt(this,'','','','15','AFQjCNF0JbMeF9yxqTTcAwzkFgQ8uzIKgA','_KCQF1dLqRs6Ph4jKHDg7g','0CHUQ_B0wDg','','',event)" target="_blank" data-href="https://plus.google.com/u/0/116899029375914044550">

The example was taken straight from Google. It is clear that no one will manually prescribe such classes, so this one is done by some kind of thing. Or maybe it's a way to organize the code like this, very similar to Atomic CSS. About six months ago I saw something about such optimization on Habré, but now I don’t even remember. MB Gulpa has such a plugin that renames everything to shorter names, while not forgetting about css (where it should give exactly the same name). Written not very beautifully, but I think it is clear. Thanks in advance for your replies.
UPD.: Something similar is used by fb, for example, the classes of one of the buttons:
<button value="1" class="_42ft _4jy0 _4jy3 _517h _51sy" type="submit"><i class="_3-8_ img sp_ix95biPEpOf sx_7a0a78"></i>Добавить в друзья</button>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
V
Victor Victor, 2015-06-18
@A1ike

There is a GRUNT plugin
compressing-class-names-and-ids-in-html-with-grunt

U
ummahusla, 2015-06-18
@Antonoff

What a perversion. Inline-css, a shitty cloud of classes that are no better than inline-css, people apparently haven't heard about SASS and @extend.
HTML compression is done by using gzipa on the server.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question