Re: [Proposal] CSS Property and Class Alias for CSS file compression

Why doubts? It is obvious from my example that it makes file smaller 28%. And remember you can still Gzip that file and get 28% smaller Gziped file. I do not know but I would call 450 bytes to 300 bytes a significant gain to me. I remember I read an article on how Microsoft website optimized code to be like a hundred bytes smaller and it resulted in terabytes of traffic monthly economy. Would you consider car drive 25% longer on the same amount of gas a significant gain? Or airconditioner consume 28% less energy to produce the same amount of cold significant gain?

I believe that there is a was for every extra byte especialy nowadays with SPA taking over. All the source code has to be downloaded by browser unlike server-side apps where all logic stays on the server, and that can be a lot of code. JS is easy to uglify and compress. But not CSS. And CSS become more and more important, and CSS files become bigger. It may take 100 lines of code to create simple 2 keyframes animation compatible for all browsers.

For instance, I made a proposal to the Bootstrap library to add new classes, and they refused it not because it was not a good idea, they liked it, but because it will make CSS file significantly bigger. Significantly in their terms is another 300 bytes.  It is important for CSS library developers. They have to balance between size and features. But this possibility would open the door for them to add so much more.

Google estimates how fast the site would be loaded, as a new Mobile-First strategy, to give it a rank. So it is important for Google and they think for everyone in the world.

The good side of this feature, it might be implemented by Browsers in no time. It is just aliases. There is no new render logic that is usually hard to implement.

Sincerely
Sergey Romanov

Skype: serhioromano
Facebook: https://www.facebook.com/serhioromano
VK: https://vk.com/serhioromano
YouTube: https://www.youtube.com/user/serhioromano
Mobile/Whatsapp/Viber/Telegram/Imo:  +996 705 73 74 39
________________________________
From: Andrew Fedoniouk <andrew.fedoniouk@gmail.com>
Sent: Sunday, October 20, 2019 22:27
To: Sergey Romanov <serhioromano@outlook.com>; www-style@w3.org <www-style@w3.org>
Subject: RE: [Proposal] CSS Property and Class Alias for CSS file compression


I think that you should start with some numbers.



Normally http/https data is GZIPed before sending.



So it makes sense to compare GZIPed version of normal set of CSS declarations with that cryptic version of yours.



Will we get any significant gains? I have some doubts…



Andrew Fedoniouk

Terra Informatica Software, Inc.

Richmond, BC, Canada

phone:+1(604)244-1074
mailto:andrew@sciter.com
http://sciter.com



From: Sergey Romanov<mailto:serhioromano@outlook.com>
Sent: October 20, 2019 7:48 AM
To: www-style@w3.org<mailto:www-style@w3.org>
Subject: [Proposal] CSS Property and Class Alias for CSS file compression



I was looking through the archive, but I am not a native language speaker, and I  was not sure which keywords to use, so I am sure this was discussed already. I am sorry if I double.



The main purpose of this proposal to make it possible to compress CSS file sizes.



1) Class Alias. At the beginning of CSS, document users may create map of classes. For example:



:root {

    .class-name: alias;

    #idname: alias;

}



later users can use an alias name in CSS file to define properties. Very often save class is used a few times in CSS. Let's take an example from Bootstrap.



.btn-group > .btn:not(:first-child),

.btn-group > .btn-group:not(:first-child) {

  margin-left: -1px;

}



.btn-group > .btn:not(:last-child):not(.dropdown-toggle),

.btn-group > .btn-group:not(:last-child) > .btn {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}



.btn-group > .btn:not(:first-child),

.btn-group > .btn-group:not(:first-child) > .btn {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}



Look how it could be with class alias



:root {

    .btn-group: btg;

}



.btg > .btn:not(:first-child),

.btg > .btg:not(:first-child) {

  margin-left: -1px;

}



.btg > .btn:not(:last-child):not(.dropdown-toggle),

.btg > .btg:not(:last-child) > .btn {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}



.btg > .btn:not(:first-child),

.btg > .btg:not(:first-child) > .btn {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}



This significantly reduce size of the document if applicable to all classes.



This allows end-user to use `btn-group` class and in CSS use a shorter version of it for file size reduction.



2) Property aliases. These aliases are not for the user to set. This is a proposal to be a part of the specification. Those are short versions of CSS properties. For instance, border-bottom-left-radius will have alias bblr. It is not for a developer to use. A developer will use classic property names or if he which he can use aliases of course. But the main Idea that these aliases could be used by 3d party post-processing packages. They will reduce CSS file sizу by replacing the full property name with shot one.  Look for example the same  CSS code. But here I made :last-child an alias too.





:root {

    .btn-group: btg;

    .dropdown-toggle: ddt;

}



.btg > .btn:not(:fc),

.btg > .btg:not(:fc) {

  ml: -1px;

}



.btg > .btn:not(:lc):not(.ddt),

.btg > .btg:not(:lc) > .btn {

  btrr: 0;

  bbrr: 0;

}



.btg > .btn:not(:fc),

.btg > .btg:not(:fc) > .btn {

  btlr: 0;

  bblr: 0;

}



This implementation will allow developers to continue using classic property names and even browser inspectors to show the full property names even if there are short properties in a CSS file. At the same time it will allow post-process CSS and reduce size not even twice but 3 or even 4 folds. ше will be completely transparent. I mean no one will see those short versions until look into the source. All the other dive developers as in his CSS as in a browser inspector see full properties, and webpack, grunt or gulp tools automatically compress it.



Sincerely
Sergey Romanov

Skype: serhioromano

Facebook: https://www.facebook.com/serhioromano<https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.facebook.com%2Fserhioromano&data=02%7C01%7C%7C7da6a4bdd103463f71ce08d7557a6640%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637071856496438056&sdata=zfLTCfz5qgzCQmFYiuQPfQn7VplGHO3aFi7%2Bq3xJ1rI%3D&reserved=0>

VK: https://vk..com/serhioromano<https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fvk.com%2Fserhioromano&data=02%7C01%7C%7C7da6a4bdd103463f71ce08d7557a6640%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637071856496438056&sdata=s576CSGqBnZkVptkJPP%2FF%2F8F4iMrcVzefpGPR4qup98%3D&reserved=0>

YouTube: https://www.youtube.com/user/serhioromano<https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.youtube.com%2Fuser%2Fserhioromano&data=02%7C01%7C%7C7da6a4bdd103463f71ce08d7557a6640%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637071856496448064&sdata=LEKdCrUPQZKaUY0WM6xGQNpyY3w0AFOtgX9f0e%2BshX4%3D&reserved=0>

Mobile/Whatsapp/Viber/Telegram/Imo:  +996 705 73 74 39