Compilation/Minification of HTML, CSS and class names

Question

On the CSS side I already do the compilation and minification of the CSS file.

Doubts began to arise when I noticed that some sites work with a type of Compile including in`HTML files. In other cases, such as Facebook, there are several classes with the name well differentiated, it seems that was encoded, as in the photo below:

Is this really some kind of encoding of the classes/names? It seemed strange, since both the file css like the html are easily accessible to the customer.

But on the other hand, I see some positive points in using it. It may give a slightly greater difficulty in understanding the context/purpose of that class, since it would not have such an intuitive name as nav.menu_mobile. Or else leave the source of the project with greater freedom in the use of class names without leaving an extensive and exaggerated HTML. For example, you could create classes with names cadastro_cliente, cadastro_cliente_dependente, and in the compilation would be only a simple code of 4-5 letters, as in the example.

Would this then really be a form of compilation or just an internal convention already starting from development?

Another question would be in the compilation part of the HTML file. I already know it’s possible, but I don’t know how recommended this practice is, since in some cases the HTML hierarchy changes structural behavior (depending on the CSS structure). For example:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

It has a different behavior from this code:

<ul><li></li><li></li><li></li></ul>

I’m new to big project maintenance. Now I am working on one that is being really challenging and grand so I would like to know how far I can/should go with these questions. I know that in terms of performance this may not have such a significant impact that it is advantageous to spend so much time focused on this aspect.

But if it’s something worthwhile, for the sake of optimization, organization and improvement, I think it’s worth it.

Answer 1

I already talk about the minification in another question. It is interesting in elements that change little. HTML usually changes a lot, so it is better to compress or leave without any size gain. But there are cases that HTML can change little too, this occurs increasingly with the so-called "application pages" (SPA).

What can be done in cases where HTML changes with each call is to minimize the size of some things that change little even when HTML is generated. The generation of HTML itself can take care of minifying it.

HTML is all text, so any text that is large and can get smaller is done. It can be done even before generating HTML.

It is possible to abstract certain elements in such a way that the specific text that will be used to assemble the HTML is not even known to the programmer who is mounting that page. So he uses something that for him is cadastro_cliente, but what will actually be used in HTML is _2gyi.

Modern programming is to create abstractions to facilitate the work of coding and get a better concrete result. Unite useful to pleasant.

I don’t know if we can call this a compilation. Looking at the strict definition of the term, I think not, but creating an HTML is still a compilation of texts coming from various sources. There the term is more literal to what we know outside of computing.

Transforming ready-made HTML into another minified HTML is still a compilation, although the term minification would be better in this case.

Obviously these techniques outweigh more on high traffic sites.

In general it is good to minify the HTML (static). Good mini-finders know how far they can go without compromising anything. If you are going to create an algorithm that will mount minified HTML, you have to know all the rules to not pass the point.

I do not know of any problem in using the HTML lists in the two forms presented. For me they work the same way. If this is not the case demonstrate this (preferably in another question, it is already too wide).