Semantics, markup, naming. What does the ideal markup look like?

Question

css

Are there any examples of markup close to the standard? What will you spit on or how to do it for no reason?

To more specific questions:

- Is there a difference between p and span?
In terms of SEO, in terms of perception and maintainability?
For example, which looks better:

<div class="white-section__header">
       <h2 class="white-section__title">Title text</h2>
       <span class="white-section_text">Some text.</span>
   </div>

or

<div class="white-section__header">
       <h2 class="white-section__title">Title text</h2>
       <p class="white-section_text">Some text.</p>
   </div>

How do you feel about classes in the p tag ?
Or would you wrap them in a div at all?)

- How to name classes?
Is it ok to use the name white-section__header or white-section__header-box or should it look like this? - white-section-header-box ? - Somewhere I've seen such a design...

Or is everything strictly according to BEM? For example: news__top , news__top-box .

And if you need a common title for a frequently repeated block, should it be as descriptive as possible, like white-section__header-box ?

Is it bad to use such long class names or is it still acceptable?

- div, how not to overdo it?
For example this markup:

<section class="consultation">
        <div class="container">
            <div class="consultation__inner">
                <div class="consultation__items">
                    <div class="consultation__head-indent white-section__header">
                        <h2 class="white-section__title">Title text</h2>
                        <span class="white-section__text">Some text</span>
                    </div>
                    <div class="consultation__form">
                        <form>
                            <div class="consultation__form-box">
                                <div class="form-box__left">
                                    ...
                                </div>
                                <div class="form-box__right">
                                    ...
                                </div>
                            </div>    
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

If I just wrote " display: flex " for the form ? How bad is that? - flexbox Everywhere they write - do not abuse. Is it still relevant? For example, there is a div with text and a link in the block, you need to scatter around the edges. It makes you want to write "justify-content: space-between ". Is this a bad choice? - Perfect pixel Is it worth bothering at the initial stages? What if the template is a curve, and you center and distribute evenly? - I.e. really not symmetrical distance) What to do with the text? - Text blocks are sometimes not constrained by visual borders in the template and even if I have chosen the width perfectly, the text can still behave a little differently in the browser.





Is there any acceptable difference? Or perfect like a perfectionist?
When performing a test task, would you be scolded for a slight double vision?

- When is margin and when is padding?
Actually what are the rules? block padding or margin? If it does not matter the scope of the event or visual stretch, such as buttons with a background or border.
How would you push the elements down one by one? Left and right are, I guess, almost always margin ? If there are cards with goods or information blocks with several positions per line.
Margins - padding .
What else?
I read an old article on Habré, it said that elements do not repel themselves, is that true? For example:

position: absolut;
top: 15px;

Is that bad too?

Answer 1

1. p- for a set of paragraphs, if this is not it, then you can safely take span.
2. Classes on p → perfect, except for user input.
3. Class strictly according to BEM (well, almost).
4. Flexbox really should not be thoughtlessly abused, as there is always a risk of shooting yourself in the foot.
5. PP → in the layout it is worth looking for patterns and releasing them, but checking for overflow, since user input is not dormant.
6. position: absolut;→ position: absolute;
7. Padding is entirely dependent on the context, for example, if you need to make a card with a background color, then most likely you will apply padding so that there are padding from the edges.

Answer 2

I only use div, span and list. Well, there are little things a, img. Because all this semantics is needed not for design, but for the text on the site. And if this is a site design, then all sorts of p and others are simply not needed. And if you make websites yourself, then do what is more convenient for you. For example, I myself sometimes come up with tags, for example, <mytag></mytag>to group elements. Silly, but I'm more comfortable