Как называть блоки в html

Ошибки именования в вёрстке

Именование — сложная задача как для начинающих, так и для опытных разработчиков. Выбор правильного названия элемента — залог читабельной вёрстки, при которой она понятна при одном взгляде на классы. Неважно, что вы используете в работе: БЭМ, OOCSS, SMACSS, или не используете методологий вообще — выбирайте имя с умом.

Что же отличает хорошее именование от плохого? Идеально, если класс раскрывает суть блока. Если это компонент, то он должен быть назван так, чтобы по нему можно было понять, какую структуру он представляет. Если это класс с одним единственным стилем, который не привязан к компоненту, как это делается в Atomic CSS, такой класс должен полностью описывать свойство, которое используется.

Смысл

Это одна из самых частых ошибок в именовании. Встретив в HTML класс section-top , можно запутаться:

• Это первая секция?
• Это область заголовка внутри секции?
• Это фиксированная секция?

Без изучения вёрстки и CSS узнать это невозможно.

Другая проблема: указание порядка нахождения секции в классе. Взгляните на пример:

 class="section-one">  class="section-two"> 

Сейчас всё расположено логично, проблем не будет. Но вот приходит заказчик и просит поменять секции местами. Теперь вёрстка выглядит так:

 class="section-two">  class="section-one"> 

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

Опишите то, о чём секция, если в этом есть необходимость. Если секция содержит список цен, то класс pricing , pricing_section будет хорошим вариантом. Если стили этих классов совпадают, то имеет смысл создать отдельный класс, например container или section-wrapper .

Нотация

Разные подходы к написанию CSS породили разные варианты написания классов. Это могут быть:

• button-blue
• button_blue
• button—blue

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

 class="pricing">  class="pricing-header-wrapper">  class="pricing--header">Цены на наши услуги   class="pricing__element">  class="pricing--items">   

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

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

 class="container pricing">  class="pricing__header">Цены на продукцию  class="row">  class="col col-md-3 pricing-items--blue">