Why structure main css style sheet like this?

I am studying someone’s free templates to learn a few things. I have a general question about why someone would structure their main style sheet like this. I have dumped the index and main style sheet into codepen: here. Why like this? In lines 8-25 they have defined a whole bunch of classes with these selectors:

{ margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}

In the very next line they define (redefine or add more definition) six of them again:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section

{
display: block;}

My question is what is the purpose of reusing the same class name over again to add to the declarations…

IFFFF I understand the css order of precedence the last line of code overrides the previous ones…so for instance body is defined at least 6 or seven times. The property changes…Does this CYA somehow? Hope this makes sense!

Hey,

The CSS you’re observing in lines 8-25 is a common pattern for a CSS reset or normalize stylesheet. It aims to reduce browser inconsistencies in the default rendering of HTML elements by establishing a baseline for common properties like `margin`, `padding`, and `border`.

The second block, starting with `article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }`, explicitly sets these HTML5 elements to `display: block;`. This is crucial for older browsers that might not recognize these new semantic tags by default, ensuring they render correctly in the document flow.

The subsequent redefinitions of `body` or other selectors are typically for applying specific styles later in the stylesheet, leveraging CSS cascade rules. The last defined property for a given selector and property will take precedence, allowing for progressive styling or overrides. This is not “CYA” but standard CSS practice to define a base, then refine.

@free-help Please do not post LLM generated content to the forum.

1 Like

@muzammil123 @pkdvalis I do not know what LLM is. I looked it up and it says it is AI generated. Please tell me how to know what is AI generated?

1 Like

I just realized I am not even sure if the request to not post LLM is directed to me or @free-help . Please clarify.

This is not addressed to you.

1 Like

I realize now that the comment about posting LLM generated content was not directed at me, but can you explain how you recognized it as being LLM generated? How do I know what to look for in the future. Thank you.

Using the same elements over again makes sense, when a group of elements share same attributes, like display: block; and than another group of elements also share a different attribute, but there are two parts on lines 31-33 and 53-55 for body element wich I don´t know why there are not merged together.
I have seen such thing a few times before, why is that a practice?

I don´t think if there is a fix method to find out if a text is AI generated or not, but it is a strong sign when somebody writes a “way to technical” answer, like @free-help did above.

1 Like