design-patterns: CSS guidelines about repeatitive structures vs particular instances

lundi 20 décembre 2021

Here are 3 equivalents pages:

I think 1) is the "classic" way of doing, and 3) is being "too smart".

I'm not a fan of 1) because I feel that we repeat "page", I kinda like 2 because the HTML is "cleaner".

I just realised I could also create page elements like this:

<html>
<body>
  <page id="page1"></page>
  <page id="page2"></page>
  <page id="page3"></page>
</body>
</html>

Maybe that's the cleanest: the HTML tag to express the repeative structure and CSS to express the particularities.

Is there a guide somewhere which would list CSS conventions/architecture guidelines reguarding this topic?

design-patterns