Как правильно называть классы в CSS
В CSS, классы – это способ идентификации и группировки элементов на веб-странице. Классы позволяют вам определить стили, которые можно применить к определенным элементам или группам элементов, не меняя стили других элементов на странице.
Вот несколько причин, почему классы в CSS являются полезными:
- Многократное использование стилей: Классы позволяют вам определить набор стилей, которые можно применить к нескольким элементам на странице. Это облегчает создание и поддержку единообразного внешнего вида для различных частей страницы.
- Организация и структурирование кода: Использование классов помогает в организации и разделении стилей на более логические блоки. Это улучшает читаемость и облегчает настройку и изменение стилей в будущем.
- Приоритет и уникальность стилей: Классы позволяют определить стили, которые будут применяться только к определенным элементам или группам элементов. Это дает вам большую гибкость в настройке стилей для конкретных частей страницы, не затрагивая другие элементы.
- Улучшение семантики: Можно использовать классы для определения специфических стилей, связанных с определенными типами контента или функциональностью. Например, класс "sidebar" может быть применен к боковой панели, чтобы отделить ее стили от остальной части страницы.
- Совместное использование с JavaScript: Классы также используются в JavaScript для обращения к определенным элементам на странице и добавления или удаления стилей и функциональности с помощью JavaScript или библиотек, таких как jQuery.
Все это делает классы в CSS важным инструментом для создания гибких, модульных и легко настраиваемых стилей на веб-странице.
CSS содержит много разных классов, которые могут использоваться для стилизации элементов на веб-странице. Ниже приведены некоторые из наиболее распространенных классов:
| БЛОКИ | |
|---|---|
| page | корневой элемент страницы |
| header | шапка (страницы или элемента) |
| footer | подвал (страницы или элемента) |
| section | раздел контента (один из нескольких) |
| body | основная часть (страницы или элемента) |
| content | содержимое элемента |
| sidebar | боковая колонка (страницы или элемента) |
| aside | блок с дополнительной информацией |
| widget | виджет, например, в боковой колонке |
| РАСКЛАДКА | |
| wrapper, wrap | обёртка, обычно внешняя |
| inner | внутренняя обёртка |
| container, holder, box | контейнер |
| grid | раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col) |
| row | контейнер в виде строки |
| col, column | контейнер в виде столбца |
| ТЕКСТ | |
| title, subject, heading, headline, caption | заголовок |
| subtitle | подзаголовок |
| slogan | слоган |
| lead, tagline | лид-абзац в тексте |
| text | текстовый контент |
| desc | описание, вариант текстового контента |
| excerpt | отрывок текста, обычно используется перед ссылкой «Читать далее…» |
| copyright, copy | копирайт |
| ССЫЛКИ, КНОПКИ | |
| link | ссылка |
| button, btn | кнопка, например, для отправки формы |
| СПИСКИ | |
| list, items | список |
| item | элемент списка |
| ИЗОБРАЖЕНИЯ | |
| image, img, picture, pic | картинка |
| icon | иконка |
| logo | логотип |
| userpic, avatar | юзерпик, маленькая картинка пользователя |
| thumbnail, thumb | миниатюра, уменьшенное изображение |
| ЭЛЕМЕНТЫ УПРАВЛЕНИЯ | |
| control | элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером |
| dropdown | выпадающий список |
| search | поиск |
| slider, carousel | слайдер, интерактивный элемент с прокруткой содержимого |
| pagination | постраничная навигация |
| bullet | переключатели в пагинации |
| modal | модальное (диалоговое) окно |
| popup | всплывающее окно |
| tooltip, tip | всплывающие подсказки |
| preview | анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию |
| breadcrumbs | навигационная цепочка, «хлебные крошки» |
| МЕДИА ВЫРАЖЕНИЯ | |
| phone, mobile | мобильные устройства |
| phablet | телефоны с большим экраном (6-7″) |
| tablet | планшеты |
| notebook, laptop | ноутбуки |
| desktop | настольные компьютеры |
| РАЗМЕРЫ | |
| tiny, xs | маленький, крохотный |
| small, sm | небольшой |
| medium, md | средний |
| big, large, lg | большой |
| huge, xl | огромный |
| narrow | узкий |
| wide | широкий |
| СОСТОЯНИЯ | |
| active, current | активный элемент, например, текущий пункт меню |
| hidden | скрытый элемент |
| error | статус ошибки |
| warning | статус предупреждения |
| success | статус успешного выполнения задачи |
| pending | состояние ожидания, например, перед сменой статуса на error или success |
| ДОПОЛНИТЕЛЬНО | |
| socials | блок иконок соцсетей |
| advertisement, adv, commercial, promo | рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой) |
| features, benefits | список основных особенностей товара, услуги |
| user, author | пользователь, автор записи или комментария |
| meta | блок с дополнительной информацией, например, блок тегов и даты в посте |
| cart, basket | корзина |
| more, all | ссылка на полную информацию |
