- в имени класса не стоит использовать цифры
<!-- ❌ Неправильно --> <div class="element-1">...</div> <!-- ✅ Правильно --> <div class="first-element">...</div>
- имя класса лучше писать в нижнем регистре в
kebab-caseнотации, где каждое слово разделено символом дефиса<!-- ❌ Неправильно --> <div class="userinfo">...</div> <div class="Userinfo">...</div> <div class="userInfo">...</div> <div class="UserInfo">...</div> <div class="USERINFO">...</div> <div class="USER-INFO">...</div> <div class="USER_INFO">...</div> <!-- ✅ Правильно --> <div class="user-info">...</div>
- имя класса не должно состоять из одной буквы
<!-- ❌ Неправильно --> <div class="w">...</div> <!-- ✅ Правильно --> <div class="wrapper">...</div>
- в имени класса не стоит злоупотреблять сокращениями: лучше написать
buttonвместоbtnиlinkвместоlnk(помните – код мы пишем один раз, а читать его мы и другие разработчики будем гораздо чаще, так что экономить буквы не стоит)<!-- ❌ Неправильно --> <button class="btn">...</button> <a class="lnk">...</a> <!-- ✅ Правильно --> <button class="button">...</button> <a class="link">...</a>
- имя класса в большинстве случаев не должно дублировать имя тега элемента, к которому класс применяется
<!-- ❌ Неправильно --> <p class="p">...</p> <div class="div">...</div> <a class="a">...</a> <!-- ✅ Правильно --> <p class="paragraph">...</p> <div class="wrapper">...</div> <a class="link">...</a>
- имя класса элемента в целом должно отражать его функцию или стиль
<!-- ❌ Неправильно --> <button class="some-button">Кнопка</button> <button class="some-red-button">Красная кнопка</button> <div class="some-block">Тултип</div> <!-- ✅ Правильно --> <button class="button">Кнопка</button> <button class="button red">Красная кнопка</button> <div class="tooltip">Тултип</div>
- имя класса может состоять из нескольких слов, по количеству – без ограничений, однако логично, что чем меньше слов в имени класса, тем проще его написать, прочесть и запомнить
<!-- ✅ Допустимо --> <span class="user-name-first-letter">A</span>
- в именах классов можно и нужно комбинировать слова, если этого требует контекст элемента (например, блок с классом
userможет содержать внутри себя блоки с классамиuser-imageиuser-name, аuser-nameможет содержать, например, элемент с классомuser-name-first-letter)<!-- ✅ Правильно --> <div class="user"> <img class="user-image" /> <div class="user-name"> <span class="user-name-first-letter">А</span>лександр </div> </div>
- зачастую для имени класса лучше использовать существительные, в редких случаях – прилагательные, например, когда класс является неким модификатором компонента; глаголы же в качестве имени классов обычно не используют вовсе
<!-- ❌ Неправильно --> <a class="go-back">...</a> <button class="submit">...</button> <form class="create-user">...</form> <div class="run-slider">...</div> <!-- ✅ Правильно --> <a class="go-back-link">...</a> <button class="submit-button">...</button> <form class="create-user-form">...</form> <div class="slider">...</div> <!-- ⚠️ Тоже правильно --> <button class="button red wide bold">...</button> <section class="section large-padding-y">...</section>
- существование абсолютно каждого класса в проекте должно быть оправдано: например, если у вас есть 5 абсолютно одинаковых по стилю секций, но с разным наполнением, то не стоит для каждой секции придумывать собственный класс, лучше обойтись одним унифицированным
<!-- ❌ Неправильно --> <section class="banner">...</section> <section class="features">...</section> <section class="catalog">...</section> <section class="about">...</section> <section class="contacts">...</section> <style> .banner { padding-block: 30px } .features { padding-block: 30px } .catalog { padding-block: 30px } .about { padding-block: 30px } .contacts { padding-block: 30px } </style> <!-- ✅ Правильно --> <section class="section">...</section> <section class="section">...</section> <section class="section">...</section> <section class="section">...</section> <section class="section">...</section> <style> .section { padding-block: 30px } </style>
page— элемент<html>или<body>header— элемент `content,main— элемент<main>footer— элемент<footer>section— элемент<section>aside,sidebar,widget— элемент<aside>nav,menu,navigation— элемент<nav>
inner,body— вспомогательный элементwrapper,wrap— вспомогательный элемент-оберткаcontainer— контейнер, ограничивающий ширину контентной частиgrid— сетка а-ля таблицаrow— строка в грид-сеткеcolumn,col,cel— столбец (ячейка) в грид-сетке
list,items— элементы<ul>,<ol>и<dl>item— элемент<li>
card— элемент<article>
imageimgpicturepicthumbnailthumbavatarlogoicon
title,subtitle,heading,subheading,headline,subject,caption,label— элементы от<h1>до<h6>slogan,description,text— слоганы и описанияblockquote,quote— цитатыcopyright— копирайтlink— ссылкиcode,snippet— вставки кода
form— элемент<form>form-group— элемент<fieldset>form-group-name,form-group-title,form-group-label— элемент<legend>form-item— структурный элемент формы, оборачивающий элементы полей ввода
field— корневой элемент<div>компонента поля вводаfield-label— элемент<label>field-control— элементы<input />,<textarea>,<select>
checkbox— корневой элемент<label>компонента чекбоксаcheckbox-control— элемент<input />компонента чекбоксаcheckbox-emulator— элемент<span>компонента чекбокса для эмуляции "квадрата"checkbox-label— элемент<span>компонента чекбокса для подписи
radios— корневой элемент<fieldset>компонента радиокнопокradios-label— элемент<legend>компонента радиокнопок
button— элемент<button>dropdown— выпадающий списокaccordion,spoiler— компонент "аккордеон"modal,popup— модальное окноoverlay,backdrop— затемняющий фон (прим. под модальными окнами)tooltip,hint— тултип, всплывающая подсказкаslider,carousel— слайдерpagination— пагинация (горизонтальное меню с номерами страниц и стрелками влево-вправо)breadcrumbs— "хлебные крошки" (навигация по иерархии веб-приложения, часто следует сразу после шапки страницы)basket,cart— корзинаsummary,total,amount— сумма чего-либо (прим. итоговая сумма заказа)search,quick-search— форма поискаuser— элемент с данными о пользователеfeatures,advantages,benefints— элемент с перечислением каких-то особенностей / преимуществ товара или услугиsocials,soc1als— социальные сети
smalltinymediumbasebiglargehugenarrowwide
has-iconhas-errorhas-underline
is-current— текущий пункт менюis-active— активная кнопкаis-visible,is-shown— видимый тултипis-hidden,hidden— скрытая информацияis-open— открытое модальное окноis-expanded— раскрытый выпадающий списокis-invalid,is-error— поле ввода с некорректными введенными даннымиwarning— предупреждениеalert,notification— уведомлениеsuccess— статус успешного выполнения чего-либоloading,processing,pending— статус загрузки