How to competently lay out a lot of similar pages?

Question

css

Good day. We have to work on laying out a lot of rather similar pages (30 - 50 pieces). How to do it more competently, what assemblers, or maybe loaders from webpack, can you advise? To write reusable code, like a component approach, so as not to repeat yourself? The layout will be planted in the future on a trivial CMS service, I don’t know which one.

Answer 1

includeHTML - allows you to "on-the-fly" insert HTML blocks into the markup ("stitch" through a tag or using javascript) and check the layout (display) locally: in addition to http/https, the file:/// protocol is also supported.
If necessary, tags can be easily replaced with include functions for PHP.
You can also create a fully working menu with different page layouts (layouts), which will fully function when clicked (even without hosting!).

Answer 2

I recommend that you determine in advance which blocks will be repeated and which are unique. Define the overall structure.
I make preparations with atomic classes in order to transfer some of the very common styles from css to html classes, for example, a class like .ta-c {text-align: center;}, .cur-p{cursor: pointer;} and already in html I insert classes, I also create atomic dn (display: none), db ... Such things are sometimes common, and as for me, it’s easier to just add a class than to write in css, although preprocessors simplify the whole thing, but it’s more convenient for me . If you suddenly need to remove this property everywhere, then you can simply redefine the class.
Look at what colors, font sizes, paddings, margins are used, and everywhere in the preprocessor write not values, but variables that you declare in a separate file, do not forget to import it only.
Be sure to use BEM. On small sites, it does not provide tangible benefits, but on such large sites it is simply more expensive without it.
For html, try preprocessors/templates, otherwise it will take you four hours to fix one item in the header (copy all 50 pages...). Even here the other day, one person shared this thing: link . Allows you to include html templates.
As for the rest, I'm very interested in who will advise what. I will subscribe and read.