В 2022 году в одной из веб-команд, работающих над системой управления контентом, возникла задача — визуально отобразить иерархию разделов без использования встроенных списков. Традиционные элементы <ol> и <ul> не подходили: они не позволяли контролировать индексацию, не обеспечивали гибкость при динамическом изменении структуры, а при редактировании контента часто приводили к ошибкам в отображении порядка.
Решение пришло не из теории, а из практики. Разработчики столкнулись с тем, что стандартные подходы к нумерации не позволяли вести счёт вложенных элементов, не теряя при этом семантической чёткости. Тогда в команде начали изучать возможности CSS, которые ранее считались узкоспециализированными — в частности, кастомные счётчики. Вместо того чтобы ограничиваться встроенным поведением, они пошли дальше: начали применять эти инструменты в рамках подхода Atomic CSS — где каждый элемент и его стиль определяются через чёткие, независимые утилиты.
Что такое кастомные счётчики и зачем они нужны
Кастомные счётчики — это механизм, позволяющий вручную создавать и управлять числами, которые отображаются в элементах веб-интерфейса. Они не зависят от встроенных структур, таких как списки, и не привязаны к конкретному содержимому. Вместо этого счётчики работают как внутренние переменные, которые могут быть инициализированы, изменены и отображены по требованию. Их можно использовать для нумерации вложенных блоков, отображения иерархии, создания динамических меток или даже реализации простых игровых механик в интерфейсе.
Ключевое преимущество — независимость. Счётчики не требуют введения новых HTML-элементов или изменений структуры разметки. Они работают на уровне стилей, что делает их идеальными для систем, где структура контента может меняться в ходе разработки или при работе с пользователями.
Ключевые особенности реализации
counter-reset — позволяет создать новый счётчик с именем и начальным значением. Если счётчик с таким именем уже существует, он создаётся вложенный, что важно при наследовании от родительских элементов. Например, при инициализации счётчика paragraphs с начальным значением 5, все дочерние элементы автоматически получают этот параметр, и его можно изменять в дальнейшем.
counter-increment — позволяет увеличивать значение счётчика на заданное число. При повторном вызове в одном элементе счётчик может быть проинкрементирован несколько раз, что даёт возможность создавать нелинейные последовательности. Например, вызов счётчика трижды приведёт к увеличению на 2, затем на 1 — итоговое значение будет отображаться как 3.
counter-set — даёт возможность прописать значение счётчика вручную, не через последовательные инкременты. Это особенно полезно при работе с динамическими блоками, где нужно установить начальное состояние без привязки к логике отображения. Счётчик может быть переопределён, даже если он уже был инициализирован.
наследование — счётчики передаются от родительского элемента к дочерним. Это означает, что структура иерархии автоматически сохраняется, даже если элементы добавляются или удаляются. Это позволяет строить интерфейсы, которые масштабируются без ручного вмешательства.
Как это работает: техническая реализация
Работа счётчиков строится на последовательности инициализации, инкрементации и отображения. При создании элемента с утилитой counter-reset система запускает внутренний механизм, который сохраняет значение счётчика в стилевом контексте. Далее, при каждом вызове утилиты counter-increment, значение увеличивается на указанную величину. Отображение происходит через CSS-свойство content, которое вставляет символ или текст, соответствующий текущему значению.
Критически важно, что счётчики не привязаны к конкретному элементу HTML. Они работают как глобальные переменные в стилевом пространстве. При изменении структуры разметки, например, при добавлении нового блока, счётчик автоматически адаптируется — он не теряет связь с родительским контекстом. Это делает систему устойчивой к изменениям и позволяет избежать ручного пересчёта.
При использовании counter-set система не просто увеличивает значение — она переписывает его полностью. Это позволяет создавать «перезапускаемые» блоки, где счётчик может быть сброшен до нуля или установлен в произвольное значение, не нарушая логики инкрементации.
Кому подойдёт и в каких сценариях
Технология подойдёт разработчикам, работающим с динамическими или сложными иерархиями контента. Это особенно актуально при создании систем управления контентом, приложения для блогов, платформ с вложенными категориями или приложений, где важна визуальная структура и последовательность. Она идеальна для тех, кто стремится к минимизации вмешательства в HTML и максимизации контроля над визуальной логикой через стили.
Подводя итог
Кастомные счётчики CSS — это не просто технический трюк, а фундаментальный инструмент для построения гибких, масштабируемых и семантически чётких интерфейсов. В условиях Atomic CSS они становятся частью архитектуры, позволяя управлять иерархией без изменения структуры разметки. Их применение демонстрирует, как простые механизмы могут решать сложные задачи, сохраняя при этом чёткость и устойчивость системы.
