Глобальный атрибут
class позволяет хранить набор строковых ключей, которые затем можно использовать в селекторах CSS для применения стилей или в JS для поиска элементов.Согласно спецификации, в
class можно указывать произвольные токены, разделённые пробелами. Как таковых, ограничений какими должны быть токены нет. Единственное — синтаксис HTML, где кавычка считается концом значения атрибута.Поэтому в
class можно указывать любые символы. Методология БЭМ использует договорённость по именованию токенов с использованием двойных подчёркиваний и тире __ и --. Tailwind отрывается по полной и использует разные символы как часть собственного специального синтаксиса. Кто-то использует эмодзи в качестве токенов.Энди Бэлл, автор CSS-методологии CUBE, предлагает использовать квадратные скобки
[ ] или вертикальную черту | для группировки классов. Идея в том, чтобы разделить разные классы на группы и записать их в нужном порядке, разделив группы для лучшей читаемости.<article
class="[ card ] [ section box ] [ bg-base color-primary ]"
data-state="reversed"
></article>
<article
class="card | section box | bg-base color-primary"
data-state="reversed"
></article>
Эту идею можно позаимствовать и использовать вне CUBE. Также для улучшения читаемости можно использовать переносы строк в атрибутах. Можно даже придумать условные обозначения для разных групп классов и использовать в разделителях групп. На этапе сборки всё лишнее можно удалять.
<article
class="
@[ card ]
#[ section box ]
$[ bg-base color-primary ]
"
></article>
#css