Семантика, разметка, наименование. Как выглядит идеальная разметка?

Question

[MyQuestion]

Есть ли какие нибудь примеры разметки близкой к эталону? От чего вы будете плеваться или как делать ни за что не нужно?

К более конкретным вопросам:

- Есть ли разница между p и span?
С точки зрения СЕО, с точки зрения восприятия и поддерживаемости?
Например, что выглядит лучше:

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

или

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

Как вы относитесь к классам в теге p?
Или вы бы их вообще в div завернули?)

- Как именовать классы?
Нормально ли использовать название white-section__header или white-section__header-box или может это должно выглядеть так? - white-section-header-box ? - Где-то я встречал такое оформление...

Или всё строго по БЭМ? Например: news__top, news__top-box.

А если нужно общее название для часто повторяющегося блока, должно ли оно быть максимально информативным, как например white-section__header-box?

Плохо ли использовать такие длинные названия класса или всё же допустимо?

- div, как не перебарщивать?
Например такая разметка:

<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>

Если бы я просто для form написал "display: flex"? Насколько это плохо?

- flexbox
Везде пишут - не злоупотреблять. Это до сих пор актуально? Например есть div c текстом и ссылка в блоке, нужно раскидать по краям. Так и хочется написать "justify-content: space-between". Это плохой вариант?

- Perfect pixel
Стоит заморачиваться на начальных этапах?
Что делать, если шаблон кривой, а ты центрируешь и распределяешь ровно? - Т.е. реально не симметричное расстояние)
Что делать с текстом? - Текстовые блоки иногда не ограничены визуальными границами в шаблоне и даже если я подобрал ширину идеально, текст всё равно может вести себя немного по другому в браузере.
Есть ли какое-то допустимое расхождение? Или перфект как у перфекциониста?
При выполнение тестового задания, ругали бы за небольшое двоение?

- Когда margin, а когда padding?
Собственно какие правила? padding блоку или margin? Если не имеет значения область события или визуальное растягивание, например кнопки с фоном или рамкой.
А как бы вы отталкивали элементы один за другим вниз? Слева и справа, я полагаю, почти всегда margin? Если идут карточки с товаром или информационные блоки по несколько позиций в строке.
Поля - padding.
Что ещё?
Читал старую статью на хабре, там говорилось о том, что элементы сами себя не отталкивают, это верно? Например:

position: absolut;
top: 15px;

Это тоже плохо?

Comments

[Ankhena]

white-section

Отвратительно.
Если дизайнер передумает, то будете переименовывать и в html в css или плюнете и зададите красный фон в white-section?
Аналогично со словами top, right и т.д.
Могут быть классы-хелперы, типа h-center. Но используя препроцессоры, они скорее будут примесями.

- Есть ли разница между p и span?

Назначение тегов написано в спецификации. Увлекательное чтение - не пожалеете.

- Как именовать классы?

Название класса должно говорить само за себя (по возможности). Из всех придуманных (всем понятных!) вариантов выбирайте самый короткий.

Если бы я просто для form написал "display: flex"? Насколько это плохо?

Тег form точно такой же тег, как и все остальные.
Обращение к тегам без классов не лучшая практика.

- div, как не перебарщивать?

Лишние обертки они лишние :) Но если это помогает лучше видеть и понимать структуру документа, то они не лишние. div тег безликий, не имеющий семантической нагрузки, если вы добавляете его исключительно для того, чтобы не писать стили для form, то это ерунда.

Так и хочется написать "justify-content: space-between". Это плохой вариант?

Вообще отличный.

- flexbox
Везде пишут - не злоупотреблять. Это до сих пор актуально?

Злоупотреблять чем-либо будет актуально в любое время и не важно про флексы это или еще про что-нибудь другое.
Если флекс нужен - используйте. Не нужен - не используйте.
Например, многие любят написать флекс колонками для того, чтобы блоки внутри него выстроились в столбик. И всё, больше нет других целей. Но блочные элементы сами по себе, по умолчанию, так делают. Зачем писать лишний код?

- Perfect pixel
Стоит заморачиваться на начальных этапах?

В смысле вначале будете делать свою работу криво, а потом когда-нибудь "вот вырасту большой. полечу в космос" стану делать ровненько.
Заморачиваться с попаданием прямо точечек в точечки не нужно. И шрифты по разному рендерятся и видяшки с настройками разные и контент потом поменяется клиентом.
Но есть разумные допуски, 10-20px по вертикали и 5 по горизонтали для границ блоков (не для текста)

Что делать, если шаблон кривой, а ты центрируешь и распределяешь ровно? - Т.е. реально не симметричное расстояние)

Нужно выяснить причину.
Это дизайнер кривой или так специально сделано, чтобы компенсировать визуальный "вес" элементов.
Дальше по обстоятельствам.

- Когда margin, а когда padding?

По макету.

А как бы вы отталкивали элементы один за другим вниз?

Холиваров по этому поводу и так больше, чем нужно.

[MyQuestion]

Отвратительно.

Действительно )
Интересно, я об этом не подумал. Ну тогда light background? Вообще там - "зебра", чередуется тёмный и светлый блок. Если дизайнер начнёт истерику и зальёт тёмным фоном светлый фон, тогда скорее всего он будет весь шаблон перекраивать ) Наверное, тогда мне ничего не останется, как повторяющиеся блоки закатать в переменные препроцессора или автозаменой переименовывать всё. Но мысль дельная, я Вас понял )

И всё-таки я спрашивал немного о другом. - Нормально формировать таким способом классы? - например tournament-list__first-step или tournament-list__heading-box или tournament-list-heading-box или word1-word2__word3-word4. Я про оформление класса, про БЭМ.
Если про смысловую часть, то было бы интересно посмотреть, как Вы оформляете повторяющиеся блоки. И стоит ли их делать?

Назначение тегов написано в спецификации. Увлекательное чтение - не пожалеете.

Я попробую ) Просто какие-то стереотипы, предрассудки со времён студенчества, я должен был их развеять... Типо классы пишем только в блоках или если очень хочется то в span. Эх...

По макету.

Ну, просто можно оттолкнуть нижний текстовый блок с помощью padding, а можно с помощью margin.

Спасибо! Всё довольно по существу!

Answer 1

[Арсений Матыцин]

1. p — для набора параграфов, если это не он, то можно смело брать span.
2. Классы на p → идеально, исключением составляет пользовательский ввод.
3. Класс строго по БЭМ (ну почти).
4. Флексбоксами действительно не стоит бездумно злоупотреблять, так как всегда есть риск выстрелить себе в ногу.
5. PP → в макете стоит искать закономерности и их релизовывать, но проверять на переполнение, так как пользовательский ввод не дремлет.
6. position: absolut; → position: absolute;
7. Отступы всецело зависят от контекста, например если тебе надо сделать карточку с фоноцветом, то скорее всего ты применишь padding, дабы были отступы от краев.

Answer 2

[xmoonlight]

Просто делайте html5-семантику и где требуется дополнительные секции/блоки - div.
Тексты - как обычно (p - параграф, span - текстовый элемент).
Межблочный отступ - margin.
Внутренний отступ до границ блока - padding.
Структура блоков - flex.
Текстовая сетка - с "вертикальным ритом".

Comments

[MyQuestion]

Спасибо.
А какие семантические теги Вы используете? Кроме header, nav, main, section, footer? Ну хотя бы те, без которых точно никак, если в структуре документа предполагается возможность их использование. Например article или aside? В вордпресс, так вообще в каждой статье, в каждом посте, можно встретить:

<article>
    <header>
        ...
    </header>
    <section>
        ...
    </section>
    <footer>
        ...
    </footer>
</article>

Как вам? Используете такое?

[xmoonlight]

MyQuestion, я использую все теги семантической разметки и потом тестирую на валидность вложенности.
Просто это сильно влияет в лучшую стороноу на хорошую индексацию поисковыми роботами, а я - очень люблю хорошую индексацию)