Есть ли «правильность» верстки?

Здравствуйте.
Если ли в верстке некая "правильность"?
То есть, я заметил что многие используют классы wrapper, row и так далее. Сам по себе я верстать умею, но меня напрягает что я могу что то делать неправильно. Вообще есть какой-то смысл в классах (я в плане комфортности сайта, его SEO)?
  • Вопрос задан
  • 1037 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Смысл есть в именах классов, то есть если назвать класс:

.brrrrrrr {.....}

Или:

.g6jdk4894 {.....}

Будет вообще непонятно к чему относится данный класс.

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

Блоки

page — корневой элемент страницы
header — шапка (страницы или элемента)
footer — подвал (страницы или элемента)
section — раздел контента (один из нескольких)
body — основная часть (страницы или элемента)
content — содержимое элемента
sidebar — боковая колонка (страницы или элемента)
aside — блок с дополнительной информацией
widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя
inner — внутренняя обёртка
container, holder, box — контейнер
grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)
row — контейнер в виде строки
col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы
control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером
dropdown — выпадающий список

Текст

title, subject, heading, headline, caption — заголовок
subtitle — подзаголовок
slogan — слоган
lead, tagline — лид-абзац в тексте
text — текстовый контент
desc — описание, вариант текстового контента
excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»
link — ссылка
copyright, copy — копирайт

и так далее...


Источник: https://github.com/yoksel/common-words

Нужно писать понятные классы, которые четко описывают суть своей работы или смысл, и неважно насколько длинным может быть класс, главное чтобы он был понятен сразу. Естественно и уровень качества верстки должен быть на высоте. Ведь иногда можно набросать костылей, а на самом деле можно было сделать и лучше и чище.

И, да, кстати имена классов следует писать исключительно на английском языке, без использования транслита.

Нечто в стиле:

.avatarka-polzovatelуa-izobrazenie {...}

Подобное выглядит очень и очень ужасно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
origami1024
@origami1024
went out for a night walk
Под правильной версткой чаще всего имеется ввиду семантическая.
Ответ написан
@itsjustmypage
Смысл в именовании и структурировании CSS-классов такой же, как смысл в именовании и структурировании переменных и функций в программировании. Поддержка кода в логичном понятном и значит легкоподдерживаемом состоянии.

Универсальное правило, если нет своего осознанного пути, использование БЭМ методологии и именование по смысловой нагрузке элемента.

Не .bigBlackButton, потому что кнопка большая и чёрная, а .sendNudesButton, потому что кнопка отправляет нудесы.

.wrapper, .row и прочее это универсальные утилитарные классы, их часто используют, когда, например, нужна какая-то обёртка ради обёртки или вроде того, которая не играет роли в структуре документа.

А что касается технической и пользовательской стороны, правильность заключается в соблюдении спецификации HTML (нужные семантические теги на нужных местах, правильная вложенность и т.д.) и поддержке доступности для пользователей с нарушениями зрения (всё на странице можно сделать с помощью клавиатуры, все составляющие документа правильно проговариваются в голосовых помощниках).
Ответ написан
Нет понятия "правильная" верстка. Чем больше будете верстать, тем лучше будет ваша верстка. В итоге все равно у Вас будет свой стиль и свое видение правильного, так и должно быть.
Ответ написан
@Vaultboy84
В любом производственном процессе есть методология. Можно работать по известной методологии и тогда ваш код будет понятен, тем кто ею владеет или не обременять себя этим и клепать как бог на душу положит. Все зависит от масштабов проекта, его задач и дальнейшего уровня поддержки. Уж не знаю, что там понаписали эксперты выше, лень честно говоря читать, но лично я вам рекомендую почитать про методологии сиэсэс. Это и пресловутый БЭМ и SMACSS и другие. Они охватывают и именование классов и структуризацию проекта и подходы к непосредственно верстке. Само применение методологии, когда оно оправдано несомненно плюс и является профессирнальным подходом, который необходим в производственной разработке. Если же вы клепаете лендинги и визитки, то для таких залач, на мой взгляд методологии избыточны.
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Просто открой сайт гугла, посмотри на верстку. Понятно что за что там отвечает? Да и не должно быть понятно, это не имеет значение, так как в разработке есть более важные вещи, нежели придумывание названий классов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы