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

Just because a file is 28% smaller doesn't mean the gzipped file is the
same. Your example would compress well, I suspect the improvement would be
minimal at best. Please *actually* gzip it to see, don't just speculate.

On Mon, Oct 21, 2019, 02:49 Sergey Romanov <serhioromano@outlook.com> wrote:

> 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 <serhioromano@outlook.com>
> *Sent: *October 20, 2019 7:48 AM
> *To: *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
>
>
>