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
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 
VK: https://vk..com/serhioromano
YouTube: https://www.youtube.com/user/serhioromano
Mobile/Whatsapp/Viber/Telegram/Imo:  +996 705 73 74 39