Структура CSS библиотеки

Стилизация компонентов Choices.js построена вокруг модульной структуры классов, отражающих внутреннее состояние виджета и его визуальные состояния. Основной подход — изоляция каждого функционального блока через BEM-подобную систему именования, где корневой класс .choices выступает контейнером, а вложенные элементы получают префиксную иерархию.

Корневой контейнер .choices

Главная обёртка компонента задаётся классом:

.choices { }

Этот элемент формирует базовую структуру виджета и служит точкой привязки для всех последующих вложенных элементов. Через него задаются:

  • общие размеры компонента
  • позиционирование относительно документа
  • базовые шрифты и типографика
  • контекст для абсолютного позиционирования dropdown

В большинстве реализаций именно .choices становится основным селектором для кастомизации внешнего вида всего компонента.

Состояния компонента

CSS-архитектура Choices.js активно использует классы состояния, которые добавляются динамически через JavaScript.

.is-open

Активное раскрытие списка:

.choices.is-open { }

Отвечает за отображение выпадающего списка. Обычно управляет:

  • visibility dropdown
  • transform-анимациями
  • изменением стрелки

.is-focused

Фокусировка на инпуте:

.choices.is-focused { }

Используется для визуального выделения активного компонента. Часто влияет на:

  • border-color
  • box-shadow
  • фон контейнера

.is-disabled

Состояние блокировки:

.choices.is-disabled { }

Применяется для полной деактивации взаимодействия:

  • pointer-events: none
  • пониженная opacity
  • серые цвета текста

.is-flipped

Инверсия выпадающего списка:

.choices.is-flipped { }

Используется при нехватке места снизу. Меняет направление раскрытия dropdown вверх. Обычно сопровождается:

  • изменением top/bottom
  • корректировкой тени
  • поворотом стрелки

Внутренняя структура DOM и CSS классы

Choices.js строит DOM иерархию, где каждый элемент имеет свой CSS-класс.

.choices__inner

Основной визуальный контейнер инпута:

.choices__inner { }

Функционально представляет собой оболочку для:

  • текста выбранных значений
  • input-поля (в режиме поиска)
  • элементов управления

Часто именно здесь задаются:

  • padding
  • border-radius
  • background
  • минимальная высота

.choices__input

Поле ввода поиска:

.choices__input { }

Используется в searchable режимах. Его поведение:

  • встроен в поток выбранных значений
  • динамически расширяется по ширине
  • наследует шрифты контейнера

Типичные стили:

  • outline: none
  • border: 0
  • background: transparent

.choices__list

Универсальный контейнер списков:

.choices__list { }

Используется в нескольких контекстах:

  • список выбранных элементов
  • dropdown список опций
  • группа элементов

.choices__list--single

Контейнер для одиночного выбора:

.choices__list--single { }

Отображает текущее выбранное значение. Важные особенности:

  • всегда один элемент
  • обрезка overflow текста
  • выравнивание по центру или baseline

.choices__list--multiple

Контейнер для множественного выбора:

.choices__list--multiple { }

Содержит набор тегов (chips). Основные свойства:

  • flex-wrap: wrap
  • gap между элементами
  • управление переносом строк

.choices__list--dropdown

Выпадающий список:

.choices__list--dropdown { }

Ключевой визуальный блок компонента. Управляет:

  • позиционированием (absolute)
  • максимальной высотой
  • прокруткой (overflow-y)

Также может иметь модификаторы состояния:

  • .is-active — отображение
  • .is-hidden — скрытие

.choices__item

Базовый элемент списка:

.choices__item { }

Используется для:

  • опций в dropdown
  • выбранных значений
  • групповых элементов

.choices__item--selectable

Выбираемый элемент:

.choices__item--selectable { }

Добавляет интерактивность:

  • hover эффекты
  • cursor: pointer
  • состояния активного наведения

.choices__item--disabled

Недоступный элемент:

.choices__item--disabled { }

Применяется к:

  • заблокированным опциям
  • недоступным группам

Обычно визуально приглушается и исключается из взаимодействия.

Теги в множественном выборе

В режиме multiple каждый выбранный элемент превращается в отдельный визуальный компонент.

.choices__item--choice

Элемент выбора в dropdown:

.choices__item--choice { }

Представляет опцию списка. Может комбинироваться с состояниями:

  • .is-selected
  • .is-highlighted

.choices__item--selectable.is-highlighted

Активно выделенный элемент:

.choices__item--selectable.is-highlighted { }

Используется при навигации клавиатурой или hover:

  • изменяет background
  • усиливает контраст текста
  • добавляет визуальную рамку фокуса

.choices__button

Кнопка удаления элемента:

.choices__button { }

Используется внутри тегов multiple-режима. Основные особенности:

  • позиционирование внутри chip
  • иконка удаления (обычно ×)
  • минимальная интерактивная область

Состояния:

  • hover — изменение цвета
  • focus — outline для доступности

Модификаторы группировки

.choices__group

Группа опций:

.choices__group { }

Используется для логической организации списка. Включает:

  • заголовок группы
  • вложенные элементы

.choices__heading

Заголовок группы:

.choices__heading { }

Служит для визуального разделения секций dropdown. Часто стилизуется как:

  • uppercase текст
  • уменьшенный font-size
  • увеличенный letter-spacing

Система видимости и анимации

CSS Choices.js активно использует классы для управления отображением без inline-стилей.

.is-active

Универсальный переключатель видимости:

.choices__list--dropdown.is-active { }

Отвечает за показ dropdown. Обычно связан с:

  • opacity: 1
  • transform: translateY(0)
  • visibility: visible

.is-hidden

Скрытое состояние:

.choices__list--dropdown.is-hidden { }

Используется для полного исключения элемента из визуального потока.

Взаимодействие с input состояниями

Компонент тесно связан с input-поведенческими состояниями.

  • фокус инпута влияет на .choices.is-focused
  • ввод текста активирует фильтрацию dropdown
  • наличие текста изменяет размеры input

Наследование и переопределение стилей

CSS Choices.js построен так, чтобы легко переопределяться внешними стилями:

  • все классы имеют явные селекторы
  • отсутствуют глубоко вложенные селекторы
  • минимальное использование !important в базовой версии

Это позволяет:

  • подключать кастомные темы
  • интегрировать библиотеку в дизайн-системы
  • заменять отдельные блоки без разрушения структуры

Подход к масштабированию стилей

Архитектура CSS в Choices.js рассчитана на расширение:

  • добавление новых модификаторов через классы
  • минимизация зависимости от DOM-структуры
  • разделение логики состояний и визуального представления

Компонент остаётся предсказуемым при изменении темы, так как все ключевые состояния выражены через классы, а не inline-стили или сложные селекторы.

Оглавление