Excessively long and redundant CSS class names

[theurgi]

CSS class names generated by Plasmic are very long resulting in a larger than necessary network payload and DOM.

Using the plasmic.app/ landing page as an example, here is an excerpt of a single <section> element:

<section 
  class="plasmic_default__all plasmic_default__section root_reset_kjuFFTSZb8fanzCHT2C1jz 
  plasmic_default_styles plasmic_mixins plasmic_tokens plasmic_tokens plasmic_tokens 
  ValuePropSection__root__xWxy2 ValuePropSection__rootbackgroundColor_blue2__xWxy22MZuk 
  ValuePropSection__rootextras_centerAligned__xWxy2Twsav 
  ValuePropSection__rootextras_withExtraSlot1__xWxy2VufcP 
  __wab_instance IntegrateAnywhereSection__root___7GnNc __wab_instance 
  CommonLandingPage__integrateAnywhereSection___1RP03"
>
...
</section>

There are many such elements with similar sized class lists nested inside.

There also appears to be many instances where a child element redundantly lists a class that it inherits from its parent (though I'm no CSS expert). For example:

<div class="plasmic_default__all plasmic_default__div ...">
  <div class="plasmic_default__all plasmic_default__div ...">
    <div class="plasmic_default__all plasmic_default__div ...">
       ...
    </div>
  </div>
</div

Analyzing ./index.html further...

• total size across the wire is ~210kB
• class names in HTML elements alone amount for ~143kB (68% of total)
• average class name length = ~22 chars = 176 bits

If my calculations are correct, if these class names could somehow be hashed to 6 characters (which is what Google uses) that would reduce the total document size by at least 50%.