Grid and/or whole site mangling

[mondeja]

Kind of issue

• Feature
• Bug
• Design
• Other, namely:

Description

We have a lot of code to render each icon grid item.

Produced HTML for each icon

<li class="grid-item" order-color="522" order-alpha="0" aliases="[&quot;Dotenv&quot;]"><div class="grid-item__row mv-2 fg-2"><button class="grid-item__preview copy-button copy-svg" title=".ENV SVG"><img class="icon-preview" src="/icons/dotenv.svg" loading="lazy" alt="ícone .ENV"></button></div><div class="grid-item__row"><h2 class="grid-item__title copy-button copy-slug">.ENV</h2></div><div class="grid-item__footer"><button class="grid-item__color copy-button copy-color contrast-dark" style="background-color: #ECD53F" title=".ENV color">#ECD53F</button><button class="grid-item__button view-button" title="ver .ENV" index="0"><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.136 20.694-4.41-4.413a1.93 1.93 0 0 0-1.186-.551 9.632 9.632 0 0 0 2.13-6.044C19.67 4.344 15.325 0 9.983 0 4.642 0 .297 4.344.297 9.686c0 5.34 4.344 9.685 9.685 9.685 2.016 0 3.89-.62 5.44-1.677.01.48.195.957.563 1.325l4.413 4.413c.377.38.874.568 1.369.568s.992-.189 1.369-.568a1.935 1.935 0 0 0 0-2.738zm-13.154-4.55a6.465 6.465 0 0 1-6.458-6.458 6.465 6.465 0 0 1 6.458-6.458 6.465 6.465 0 0 1 6.458 6.458 6.465 6.465 0 0 1-6.458 6.458z"></path></svg></button><a class="grid-item__button" href="/icons/dotenv.svg" role="button" download=""><svg role="img" viewBox="0 0 24 24"><use href="#cp"></use></svg></a></div></li>

Load times and (maybe) performance could be improved if we mangle CSS classes. Mangling is the process of reduce the size of arbitrary attributes like classes and ids. The problem with manual mangling is that the maintainment cost increases.

Some ideas

• Use ericcornelissen's webmangler or maybe an integrated solution for webpack, I don't know if it exists.
• Replace background-color by background inline CSS property (Some mangling, refactoring and fix PDF download #287)
• Use an @apply approach to merge several classes in one like TailwindCSS recommends. Exists something like that in pure CSS?
• Style the whole grid item in CSS with parent-child selectors, just ul.grid > li .... This could be the most straightforward solution. If we comment this CSS selectors we can't reduce the maintainment cost generated.
• Merge order-color and order-alpha attributes into one order attribute and separate the values by a character like -. (Some mangling, refactoring and fix PDF download #287)
• Remove xmlns attribute from SVGs as xmlns attributes are not needed inlining SVGs in HTMLs (see this question in Stackoverflow). (Some mangling, refactoring and fix PDF download #287)
• Remove duplication of download link href and preview src attributes. (Some mangling, refactoring and fix PDF download #287)

Do you have more ideas?