Как правильно назвать класс

Допустим есть базовый шрифт, который задан для body размером 14px. Есть ссылки, которые в большинстве случаев аналогичного размера, но встречаются места где такие же ссылки, отличаются только размером, т.е не 14px, а 12 или 16. Вопрос, как более правильно им давать класс? ведь надо давать класс из-за одного свойства всего лишь. Правильно ли дать класс .fs12 / .fs16? или link-small / link-large? И второй вопрос, лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс? к примеру так .block-parent a ?

Отслеживать
задан 22 июл 2021 в 23:02
15 3 3 бронзовых знака

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Однозначно ответить нельзя. Есть разные подходы и ситуации. Обычно есть какой-то компромисс и решение не идеальное с разных точек зрения. Бывает есть гайдлайны и там описаны все размеры и где они применяются, оттуда можно выделить классы. Чаще всего, особенно на фрилансе, всё это на усмотрение верстальщика, и выбор не сходится у разных людей. Из-за разного опыта или разной аргументации. Может быть например так:

• По умолчанию ссылка может брать размер от окружающего текста. Поэтому не следует задавать ссылкам размер для всего документа.
• Если по дизайну можно выделить постоянно повторяющийся размер текста, то можно сделать класс для него, не только для ссылок. Назвать лучше не числом, а словом типа text-small или text-middle , потому что число может измениться в будущем или на других размерах экранов (мобильники/телевизоры) в медиазапросах для данного класса. Вместо link-small обычно лучше text-small . Класс fs16 из вашего вопроса — это точно не правильно. Потому что вы через месяц или другой человек могут не понять что это значит.
• Если у ссылки можно определить какое-то предназначение, то лучше сделать класс предназначения, и в нём уже описывать особенности. включая размер. Например для тегов под постом класс post-tag и в нём размер.
• Если блок ссылок имеет какое-то особое назначение, например блок тегов, то селектор со стилем ссылки может отталкиваться от родителя, как вы описали в конце вопроса.

Отслеживать
ответ дан 23 июл 2021 в 0:04
user347472 user347472

Все перечисленные варианты правильны, т.к. все они валидны с точки зрения синтаксиса CSS. а других правил не существует.

Говоря не о правильности, но о хороших практиках в верстке. и не только в контексте вопроса, а о том что касается именования в целом:

• Читать имена-с-разделителями гораздо легче, чем именабезразделителей , и особенно когда в именах используются числа
• Имя утилити-класса логически должно соответствовать общему назначению, оно не должно быть привязано по смыслу к каким-то частным случаям применения
  _{(что если нужно будет еще и параграфу уменьшить шрифт. добавим ему нелогичный класс .link-small , или внесем еще один класс .paragraph-small ? Все это как-то неуклюже и неудобно. гораздо лучше, когда класс изначально назван как .font-small , например)}
• Имена по сущности, должны описывать именно сущность (например, .receipt-link ), а не ее визуальные свойства / зависимость / тип элемента / и т.д.
  _{(насчет типа спорно, т.к. есть распространенное мнение что например .link лучше чем a в плане специфичности. но сторонники такого мнения почему-то не могут внятно объяснить зачем же создавать в стилях такие серьезные проблемы приоритета, которые вынуждают повышать специфичность базовых стилей «зеркаля» типы элементов классами)}
• Имена характеризующих свойств желательно переиспользовать, если они применимы к нескольким сущностям
  _{(например, вместо .menu-item-active и .invoice-form-active использовать .menu-item.active и .invoice-form.active — добавляя класс используемый только вместе с классом какой-либо сущности, но не сам по себе)}
• Именование по сущности/характеристике предпочтительнее именования по значению
  _{(потому что если придется менять значения свойств — то придется менять и имена классов, например подобное будет с .fs-12 . тогда как с характеризующим именем, например с тем же .font-small , переименований не потребуется)}

лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс?

Вопросы такого рода уже не совсем об именах, они больше о методах организации стилей.
Если на уровне частного мнения, то я бы посоветовал использовать утилити-классы размера шрифта (типа .font- ) редко и точечно, на «особых» ссылках которые являются исключением из правил — а в большинстве остальных случаев, при зависимости от «места использования», применять селектор с комбинатором потомка (то есть, в контексте той сущности, к которой относятся ссылки).
Вот представь, что у тебя есть компонент «уведомление», в котором находится некий текст со ссылками на разделы сайта, плюс в нижней части уведомления еще содержатся ссылки с контактными данными (mailto:). Добавлять каждой из ссылок утилити-класс будет менее удобно, чем сначала описать общие стили ссылок в этом компоненте ( .notification a ) и затем лишь уточнить их для «подвида» контактных ссылок ( .notification .contacts ). ведь это схожие элементы — при грамотном дизайне, многие стили у них будут одинаковы. А еще, утилити-классы обманчиво удобны и поэтому имеют тенденцию разрастаться: в один прекрасный момент, ты можешь обнаружить себя выстраивающим целые поезда из классов, типа class=»underline-dashed font-small has-icon icon-left color-darkgreen hover-fade » — это безусловно жесть, которую трудно читать и поддерживать (т.к. вспомогательные классы предполагают !important , а это ведет к проблемам приоритета).

// Пожалуйста, пожалуйста, не именуй классы как .block : мало того что этот фрагмент никак не описывают именуемое, он еще и прочно ассоциируется с низкой технической грамотностью: когда у веб-специалиста в разметке и речи только «блёк, блёк» — о нем может сложиться негативное мнение (появляются сомнения насчет того, отличает ли он блок от html-элемента и структурного компонента страницы, понимает ли верстку в принципе, и т.д.).

// Еще, маленький совет относительно значений: в размерах шрифтов, вместо px лучше использовать rem или em (для того чтобы они масштабировались от «базового» размера шрифта браузера либо родителя). И не стоит указывать размер шрифта в стилях body — так ты делаешь неэффективной соотв. настройку браузера, а пользователей весьма раздражает необходимость вручную менять масштаб.

Как называть css-классы

Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.

0. Прежде чем думать о названии класса, выберите подходящее название для HTML-элементов

Если это поле, используйте элемент input

Читать HTML-документ будет гораздо легче.

Пример:

1. Назначайте классы как можно ниже по DOM-дереву

Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.

Пример:

 
Lorem ipsum
 

main.mainly p < /* Не делайте этого */ >/* Вместо этого присвойте название класса p : */ .paragraphly

Источник: Крис Койер

2. Называйте классы по содержимому

Пример:

.c-header-logo < /* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */ >

Источник: phpied.com

3. Не называйте класс по содержимому, если картинка нагляднее

Скажем, лого шапки на самом деле выглядит так:

Тогда не называйте его header-logo.

.guillotine < /* О, сразу видно, что мы хотим стилизовать */ >

4. Попробуйте суффикс -like для лучшей переносимости кода.

h3, .h3-like < /* какое-то оформление */ >

Источник: KNACSS v4

5. Не используйте верблюжийРегистр

Это затрудняет чтение

Пример:

.navToOneModuleICreated < font-size:2em; >/* против */ .nav-to-one-module-i-created

6. Пробуйте БЭМ

На сегодняшний день это одно из самых популярных соглашений.

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

(двойной дефис) означает вариант элемента.

(двойное подчёркивание) означает дочерний элемент.

Пример:

.btn--warning < /* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HTML-код. Какое облегчение! */ >.btn__text < /* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */ >

7. Пробуйте ещё страшнее

БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.

Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.

Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.

Пример:

.DIMENSIONS_OF_mycomponent < /* Куда ещё противнее. Зато теперь понятнее, о чём речь. */ /* Я использую его для классов-заготовок в SASS. */ /* Но всё же не злоупотребляйте этим правилом. */ >

8. Не сокращайте описывающие слова

Помимо уже устоявшихся nav , txt , url … следует избегать любых аббревиатур.

Источник: phpied.com

9. Пробуйте использовать только одну букву в качестве осмысленного префикса

В случае визуального компонента начинайте с c- , а в случае объекта (напр. макет) — с o- , мне просто нравится этот трюк Гарри Робертса.

Пример:

10. Пробуйте [] , когда слишком много классов одного типа

Этот небольшой трюк помогает быстрее изучить HTML. Заметьте, в CSS-файле нет классов .[ и .] , они нужны только здесь, чтобы помочь другим читать HTML.

Пример:

11. Используйте префикс js- , если он используется только для JavaScript

Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js- .

Пример:

12. Старайтесь отделить родительский элемент от дочернего

Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.

Пример:

13. Несемантические классы должны явно описывать свои свойства.

Большинство из них содержат только одно свойство, и незачем его скрывать.

.horizontal-alignment < /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */ text-align: center; >/* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */ .u-text-align--center

14. Явные хаки (I)

Если вы не довольны вашем CSS-селектором, скажите это всем.

Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.

Подберите в вашей команде слово, подходящее для таких случаев, и придерживайтесь его на протяжении всего проекта.

Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.

Пример:

.my-component < margin-left: -7px; /* ХАК здесь: магическое число, нужное, чтобы компенсировать пробел */ >

15. Явные хаки (II)

Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css

Опять же, Гарри Робертс подсказал

16. Старайтесь избегать более двух слов для одного имени

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

Пример:

.button < /* Хорошо */ >.dropdown-button < /* Всё ещё хорошо */ >.dropdown-button-part-one < /* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */ >.dropdown-button-part-one__button-admin < /* Ой, всё. */ >

17. Используйте атрибут data-state для указания состояния компонента

Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.

Пример:

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

18. Используйте префиксы has- или is- для состояния

Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.

Пример:

.activated < /* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */ >.is-activated < /* Да, вы оформляете состояние. */ >

19. Используйте дефис в качестве префикса при сочетании нескольких состояний

Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.

Пример:

Источник: Бен Смифет

20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных

Это упрощает чтение документа.

Пример:

Источник: я узнал это, когда работал с командой Predicsis

21. Не следуйте правилам

Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.

Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:

1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3) но избегайте переусложнения.

Если правило вам не подходит, просто пропустите его

Особая благодарность @HugoGiraudel, @kaelig и @gaetanbt за их отзывы.

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

�� Слова, часто используемые в CSS-классах

yoksel/common-words

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Cancel Create

• Local
• Codespaces

HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

9f76c09 Feb 23, 2023

Added size synonyms

Git stats

Files

Failed to load latest commit information.

Latest commit message
Commit time
November 7, 2016 11:09
December 2, 2022 01:54

README.md

Слова, часто используемые в CSS-классах

image , img , picture , pic — картинка

userpic , avatar — юзерпик, маленькая картинка пользователя

thumbnail , thumb — миниатюра, уменьшенное изображение

title , subject , heading , headline , caption — заголовок

lead , tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее. »

quote , blockquote — цитата

snippet — пример кода

copyright , copy — копирайт

list , items — список

item — элемент списка

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

main , body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

wrapper , wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container , holder , box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col )

row — контейнер в виде строки

col , column — контейнер в виде столбца

button , btn — кнопка, например, для отправки формы

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

dropdown — выпадающий список

phone , mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

notebook , laptop — ноутбуки

desktop — настольные компьютеры

tiny , xs — маленький, крохотный

small , sm — небольшой

medium , base — средний

big , large , lg — большой

huge , xl — огромный

socials — блок иконок соцсетей

advertisement , adv , commercial , promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features , benefits — список основных особенностей товара, услуги

slider , carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user , author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cart , basket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

more , all — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltip , tip — всплывающее подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

overlay — перекрывающий слой, например, для затемнения изображений или создания модальных окон

active , current — активный элемент, например, текущий пункт меню

visible — видимый элемент

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

ul class pl-s">list"> li class pl-s">item">Первоеli> li class pl-s">item">Второеli> li class pl-s">item">Третьеli> ul>

Картинка пользователя (юзерпик)

div class pl-s">user"> img class pl-s">user__img" src pl-s">userpic.png" alt pl-s">Дормидонт Петрович"> a class pl-s">user__link" href pl-s">#">Дормидонт Петровичa> div>

div class pl-s">gallery"> ul class pl-s">gallery__list"> li class pl-s">gallery__item"> img class pl-s">gallery__img" src pl-s">flowers.jpg" alt pl-s">Цветём как в последний раз"> li> li class pl-s">gallery__item"> img class pl-s">gallery__img" src pl-s">trees.jpg" alt pl-s">Парк «Три сосны»"> li> ul> div>

nav class pl-s">nav"> a class pl-s">nav__link nav__link--active">Главнаяa> a class pl-s">nav__link" href pl-s">#">Второстепеннаяa> a class pl-s">nav__link" href pl-s">#">Третья с концаa> a class pl-s">nav__link" href pl-s">#">Предпоследняяa> a class pl-s">nav__link" href pl-s">#">Совсем конецa> nav>

nav class pl-s">nav"> ul class pl-s">nav__list"> li class pl-s">nav__item nav__item--current"> a class pl-s">nav__link">Главнаяa> li> li class pl-s">nav__item"> a class pl-s">nav__link" href pl-s">#">Статьиa> li> li class pl-s">nav__item"> a class pl-s">nav__link" href pl-s">#">Фотогалереяa> li> li class pl-s">nav__item"> a class pl-s">nav__link" href pl-s">#">Контактыa> li> ul> nav>

Виджет в боковой колонке

div class pl-s">widget"> h4 class pl-s">widget__title">Выращиваем желеh4> div class pl-s">widget__content"> p>Чтобы вырастить общительное дружелюбное желе, нам потребуется рулон поролона, два килограмма сахара, три яйца и пол чайной чашки ацетона.p> a class pl-s">widget__link" href pl-s">#">Не читать дальше. a> div> div>

div class pl-s">news"> h3 class pl-s">news__title">Вчерашние новостиh3> ul class pl-s">news__list">   чтобы создать новое пространство имён --> li class pl-s">news__item item-news"> h4 class pl-s">item-news__title">Соревнования среди воблы по конькобежному спортуh4> div class pl-s">item-news__text"> p>Победила команда килек из Петрозаводскаp> a href pl-s">#" class pl-s">item-news__link">Читать дальшеa> div> li> li class pl-s">news__item item-news"> h4 class pl-s">item-news__title">Учёные уточнили роль напильника в уходе за ногтямиh4> div class pl-s">item-news__text"> p>Британские учёные высоко оценили вклад напильника в отращивание полутораметровых ногтей.p> a href pl-s">#" class pl-s">item-news__link">Не читать дальшеa> div> li> ul> div>

Статья или пост в блоге (простой вариант)

article class pl-s">article"> h3 class pl-s">article__title">Нащупываем чакры у пучка петрушкиh3> time class pl-s">article__datetime">32 мая, 10:87time> div class pl-s">article__author author-article"> img class pl-s">author-article__img" src pl-s">userpic.png" alt pl-s">Клешня Андреевна"> a class pl-s">author-article__link" href pl-s">#">Клешня Андреевна Долгорукаяa> div class pl-s">author-article__desc">Наш эксперт по чакрамdiv> div> div class pl-s">article__content"> Сходите на рынок и купите у старушек пучок петрушки грамм на 100. Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном, вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь к пучку петрушки. Ласково взгляните на него и как следует почешите за ухом, можно себе или коту. Перевяжите атласной ленточкой, непременно завяжите бант. Поздравляем! Теперь у вас есть полностью одомашненный пучок петрушки, который будет весело бегать за вами по пятам и проращивать свои семена в ваших тапках. div> article>

Статья или пост в блоге (сложный вариант)

article class pl-s">entry"> header class pl-s">entry__header"> h3 class pl-s">entry__title title-entry"> a class pl-s">title-entry__link" href pl-s">#">Резиновые уточки как способ самопознанияa> h3> time class pl-s">entry__datetime">32 мая, 10:87time> header> div class pl-s">entry__author author-entry"> img class pl-s">author-entry__img" src pl-s">userpic.png" alt pl-s">Василиса Сергеевич"> a class pl-s">author-entry__link" href pl-s">#">Василиса Сергеевичa> div> div class pl-s">entry__content"> Достаньте с чердака коробку с полусотней резиновых уточек, оставшихся после празднования нового года. Из уточек и горящих свечей выложите пентаграмму на полу комнаты. Сядьте посередине в позу лотоса, в каждую руку возьмите по немецко-бразильскому словарю, прокашляйтесь, наберите полную грудь воздуха и громко и уверенно, с полной самоотдачей скажите "Кря!" div> div class pl-s">entry__tags tags-entry"> h4 class pl-s">tags-entry__title">Меткиh4> ul class pl-s">tags-entry__list"> li class pl-s">tags-entry__item"> a class pl-s">tags-entry__link" href pl-s">#">хоровод своими рукамиa> li> li class pl-s">tags-entry__item"> a class pl-s">tags-entry__link" href pl-s">#">фарфоровые тапкиa> li> li class pl-s">tags-entry__item"> a class pl-s">tags-entry__link" href pl-s">#">гуталин в кулинарииa> li> ul> div> div class pl-s">entry__actions actions-entry"> ul class pl-s">actions-entry__list"> li class pl-s">actions-entry__item actions-entry__item--read"> a class pl-s">actions-entry__link" href pl-s">#">238 ответовa> li> li class pl-s">actions-entry__item actions-entry__item--write"> a class pl-s">actions-entry__link" href pl-s">#">Написать в спортлотоa> li> li class pl-s">actions-entry__item actions-entry__item--share"> a class pl-s">actions-entry__link" href pl-s">#">Поделитьсяa> li> ul> div> article>

About

�� Слова, часто используемые в CSS-классах

Как правильно называть классы в css

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

Разберём некоторые популярные методологии и инструменты для работы с ЦСС и ХТМЛ .

Методологии

OOCSS (Объектно‑ориентированный ЦСС ). Суть методологии заключается в двух принципах:

Разделение структуры и оформления.
Разделение контейнера и содержания.

Выполнение первого принципа позволяет «нанизывать» стили классов‑модификаторов на каждый экземпляр элемента и максимально переиспользовать их. Второй принцип обеспечивает одинаковое поведение элемента, вне зависимости от того, в какое место сайта он помещён. Множество других методологий имеют схожие подходы. OOCSS не регламентирует правила именования селекторов.

/* Стили структуры определяют то, как элемент расположен и как он влияет на соседние элементы */ .button < display: inline-block; width: 180px; height: 36px; >

/* Стили оформления в классах-модификаторах определяют внешний вид элемента */ .button-blue < color: white; background: blue; >

.button-red

/* Второй принцип нарушен — заголовок зависит от контейнера .news */ .news h2 < . >

/* Второй принцип выполняется — заголовок независим и может быть использован в любом контейнере */ .news-heading

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб‑разработке, придуманный в Яндексе. По этой методологии все элементы делятся на две группы — блоки и элементы. Блоки — независимые элементы, которые могут быть использованы в любом месте страницы. Элементы — части блоков, которые не могут существовать вне своих блоков. У каждого элемента или блока могут быть модификаторы, изменяющие вид или поведение элемента. БЭМ позволяет разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая дублирования.

/* Блок */ .header < display: flex; >

/* Элемент */ .header__title < font-size: 24px; line-height: 30px; >

/* Модификатор */ .header__title_big

БЭМ и OOCSS можно использовать даже в статичной ХТМЛ ‑вёрстке.

ЦСС ‑модули перекладывают задачу изоляции компонентов на машину. Стили для каждого компонента описываются в отдельном файле‑модуле. Ко всем именам ЦСС ‑классов автоматически добавляется суффикс или префикс, специфичный для модуля. Такой способ именования позволяет использовать любые, самые общие названия классов, и при этом они не будут конфликтовать с другими модулями. Это полностью снимает проблему изоляции и пересечения стилей. Над именами классов и планированием ЦСС ‑архитектуры больше не нужно думать столь тщательно.

Использование ЦСС ‑модулей не отменяет возможности использовать глобальные селекторы. Механика ЦСС ‑модулей реализуется различными ЦСС ‑препроцессорами и инструментами сборки. Вероятно, самый популярный способ собирать страницы с ЦСС ‑модулями — использовать Вебпак с его лоадерами и плагинами.

// Использование с Реактом import React from 'react'; import styles from './CustomButton.css';

export const CustomButton = () => < return ( > Go ) >

/* CustomButton.css */ .button

Класс в итоговом ЦСС ‑коде имеет уникальное имя, относящееся только к конкретному элементу конкретного компонента:

/* Скомпилированный ЦСС */ .CustomButton_button_3AUEufg

Некоторые популярные ЦСС ‑фреймворки

Bootstrap . Наверное, самый популярный фреймворк, который можно использовать как хороший фундамент для построения сайтов с единой дизайн‑системой. Каркас фреймворка составляют утилитарные классы, которые помогают решать стандартные задачи в вёрстке, не изобретая велосипед. Кроме утилитарных классов, в Бутстрапе есть уже готовые интерактивные компоненты — попапы, уведомления, элементы форм и многое другое.

Бутстрап легко настраивается под собственные нужды, если использовать препроцессор и подойти к этому процессу правильно. Цвета, размеры, значения отступов и прочие параметры конфигурируются через SASS ‑переменные.

Primary Secondary Success Danger Warning Info Light Dark Link

Tailwind CSS . Фишка фреймворка — утилитарный подход к управлению стилями. Вместо того, чтобы собирать ЦСС‑правила в одном классе, используется подход, когда мы навешиваем элементу различные классы с предустановленными правилами. Такой подход снимает проблему придумывания названий классов для элементов. Базовые утилитарные классы можно объединять в шаблоны с названием. Авторы рекомендуют устанавливать фреймворк как плагин для препроцессора ПостЦСС, но есть и другие варианты использования.

 
Заголовок
 
Тоталитарный тип политической культуры приводит субъект политического процесса одинаково по всем направлениям. Выставка директивно ограничивает экранированный имидж предприятия. Еще Траут показал, что аффинное преобразование однократно. Изменение глобальной стратегии, как правило, нейтрализует Каллисто. Гамма-квант доказывает ионный хвост, выслеживая яркие, броские образования.
 

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

А какими инструментами пользуетесь вы?