Какие существуют «общие» правила по верстке web страниц?

Question

[Persotr27]

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

Comments

[Lord_Dantes]

qoso, я удалил потому-что посчитал нужным.

[Сергей delphinpro]

Посмотрите здесь CSS best practice

[ska_live]

Статья на Хабре ТЫК

[Толстый Лорри]

Ух, не совсем то, что имел в виду ТС, но, кмк, тема слишком важная, чтобы не считать ее "общим правилом по вёрстке" - компонентность via BEM.

Answer 1

[itsjustmypage]

Перевести блочную модель в привычный вид (*, *::before, *::after {box-sizing: border-box;}
Подключить normalize.css (body margin 0 там тоже есть).
Верстка семантическими тегами. Header, main, footer, section, article, aside, вот это всё. О том где и как их применять подробно в спецификации https://www.w3.org/TR/html/fullindex.html#index-el...
Сохранять семантичность и доступность при кастомизации форм всех видов (input, button). Пример правильной кастомизации чекбоксов https://www.youtube.com/watch?v=E6kLaaQFctU
Размечать документ, сохраняя правильную структуру заголовков (h1-h6), что такое правильная структура есть в спецификации https://www.w3.org/TR/html/sections.html#the-h1-h2...
Использовать какую-либо методологию вёрстки (обычно БЭМ).
Верстать модульно, максимально независимыми блоками (см пункт о методологии).
Сжимать изображения, использовать SVG при возможности (векторные иконки, косые и криволинейные украшательства и т.д.)
Использовать автопрефиксер для автоматического проставления префиксов в CSS.
Стили для обработки пользовательского ввода (на случай, если текста будет слишком много/мало, длинные слова и т.д.)
Как-нибудь обработать FOUT(мерцание нестилизованного текста)/FOIT(мерцание невидимого текста). Как правило это просто font-display: swap.

Пока не знаю что ещё добавить, можешь погуглить чеклисты вёрстки, взять что-то из них.
И здесь посмотреть webmasters.teamdev.com

Answer 2

[Александр]

Святая книга версальщика

Answer 3

[RESURT]

- Использован normalize.css.
- К страницам подключён один стилевой файл (с учётом normalize.css к каждой странице могут быть подключены два стилевых файла).
- Стилевой файл подключён внутри .
- Документ проходит проверку на валидность validator.w3.org/nu/.
- Вся собственная стилизация выполнена в одном стилевом файле.
- Подключены правильные шрифты, их размеры, высота строк, цвет и толщина равны соответствующим параметрам в макетах и техническом задании.
- Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.
- Вёрстка идентично отображается в последних версиях браузеров Chrome, Firefox, Safari, Edge, Internet Explorer.
- В корне проекта имеются папки css, img, js или аналогичные. Главная страница имеет название index.html. В названиях и расширениях файлов нет заглавных букв и пробелов, использованы только латинские символы.
- Выбран подходящий формат изображений.
- У всех изображений в теге прописан размер.
- Нет вложенности селекторов больше двух. (Длинные цепочки селекторов усложняют код и его поддержку. Хорошим подходом считается использовать вложенность не больше двух уровней. Псевдоэлементы и псевдоклассы вложенность не увеличивают.)
- При использовании блочно-строчных элементов явно указывайте вертикальное выравнивание (По умолчанию элементы inline-block имеют выравнивание baseline, которое может приводить к нежелательному поведению элементов, например, когда внутри них разное количество строк.)
- Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет)
- Отсутствует транслит в названиях классов, атрибутах, названиях файлов и так далее.
- Проведена базовая оптимизация: минифицированы стили и скрипты (при наличии)

Answer 4

[lamer350]

Единых правил нет. Есть разные подходы, вам нужно выбрать свой.
Единственные всеобщее правила: верстка должны быть валидной. Остальное все можно оспорить) Начать можно с банально: Как сбрасывать дефолтные стили браузера? Банальный вопрос, вариантов несколько и правильного ни одного нет хD

Comments

[Stalker_RED]

И даже это правило можно иногда нарушать)

[lamer350]

Stalker_RED, хD я сам уже лет 5 даже не проверяю на валидность))))

[cssfish]

вопрос еще лучше - зачем их сбрасывать )

Answer 5

[timokins]

Подробный чек-лист:
https://github.com/thedaviddias/Front-End-Checklist

Answer 6

[Андрей Саныч]

https://github.com/ihorzenich/html5checklist

Answer 7

[Александр Соловей]

Методология БЭМ https://ru.bem.info/