Есть ли какие нибудь примеры разметки близкой к эталону? От чего вы будете плеваться или как делать ни за что не нужно?
К более конкретным вопросам:
- Есть ли разница между 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;
Это тоже плохо?
