Подключение стилей

Базовая система оформления

Библиотека Choices.js использует собственный набор CSS-стилей, который отвечает за внешний вид выпадающих списков, мультивыбора, тегов и интерактивных состояний компонентов. Визуальная часть отделена от логики, поэтому корректное подключение стилей является обязательным условием полноценной работы интерфейса.

Основной файл стилей содержит:

  • структуру выпадающего списка
  • оформление выбранных элементов
  • стили состояний фокуса и наведения
  • адаптацию для мультивыбора
  • базовую анимацию раскрытия
  • поддержку доступности (ARIA-состояния)

Без подключения CSS библиотека сохраняет функциональность, но интерфейс становится нефункциональным с точки зрения UX: элементы теряют визуальную иерархию и интерактивную читаемость.

Подключение через готовый CSS-файл

Наиболее простой вариант интеграции заключается в подключении готового файла стилей, поставляемого вместе с библиотекой.

При использовании CDN подключение выполняется через стандартный <link>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">

Данный файл содержит минимизированную production-версию стилей и подходит для быстрого старта или простых проектов без сборки.

При локальной установке через менеджеры пакетов CSS находится в директории:

node_modules/choices.js/public/assets/styles/choices.min.css

Подключение осуществляется через импорт в основной файл стилей приложения:

@import "node_modules/choices.js/public/assets/styles/choices.min.css";

Подключение в модульной архитектуре

В современных сборщиках, таких как Webpack, Vite или Rollup, предпочтительным способом считается импорт CSS непосредственно в JavaScript-модуль.

import 'choices.js/public/assets/styles/choices.min.css';

Такой подход обеспечивает:

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

В Vite и аналогичных системах стили обрабатываются как часть графа модулей, что позволяет избежать ручного подключения в HTML.

Структура CSS Choices.js

Внутренняя организация стилей построена на классовой системе, которая отражает состояние компонента.

Основные классы:

  • .choices — корневой контейнер компонента
  • .choices__inner — внутренняя область инпута
  • .choices__list — список элементов
  • .choices__item — отдельный элемент списка
  • .choices__item--selectable — выбираемый элемент
  • .choices__item--selected — выбранное значение
  • .is-open — состояние раскрытого списка
  • .is-focused — состояние фокуса
  • .is-disabled — неактивное состояние

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

Переопределение базовых стилей

Кастомизация внешнего вида выполняется через переопределение CSS-классов. Базовая структура допускает расширение без модификации исходных файлов библиотеки.

Пример изменения контейнера:

.choices {
  border-radius: 10px;
  border: 1px solid #d0d0d0;
}

Изменение внутренней области:

.choices__inner {
  min-height: 44px;
  padding: 6px 12px;
  background-color: #ffffff;
}

Стили выбранных элементов:

.choices__item--selectable {
  font-weight: 500;
  color: #333;
}

Работа с темизацией

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

Для построения темизации обычно используется подход CSS-переменных:

:root {
  --choices-bg: #ffffff;
  --choices-border: #cccccc;
  --choices-text: #222222;
  --choices-focus: #2684ff;
}

Переопределение базовых классов через переменные:

.choices__inner {
  background-color: var(--choices-bg);
  border-color: var(--choices-border);
  color: var(--choices-text);
}

.choices.is-focused {
  border-color: var(--choices-focus);
}

Такой подход упрощает переключение тем и интеграцию с системами дизайна, основанными на токенах.

Адаптация под тёмную тему

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

Медиа-запрос:

@media (prefers-color-scheme: dark) {
  .choices__inner {
    background-color: #1e1e1e;
    color: #f1f1f1;
    border-color: #333;
  }

  .choices__list--dropdown {
    background-color: #1e1e1e;
  }
}

Классовый вариант:

.theme-dark .choices__inner {
  background-color: #1e1e1e;
  color: #f1f1f1;
  border-color: #333;
}

Второй подход обеспечивает более контролируемое переключение темы в рамках приложения.

Стилизация выпадающего списка

Выпадающий список является отдельным визуальным слоем, который позиционируется поверх интерфейса.

Основные элементы:

.choices__list--dropdown {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  overflow: hidden;
}

Элементы списка:

.choices__list--dropdown .choices__item {
  padding: 10px 12px;
  cursor: pointer;
}

Состояние наведения:

.choices__list--dropdown .choices__item--selectable:hover {
  background-color: #f2f6ff;
}

Стили мультивыбора и тегов

Режим мультивыбора добавляет визуальные элементы в виде тегов.

Контейнер тегов:

.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

Отдельный тег:

.choices__item--selectable {
  background-color: #2684ff;
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}

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

.choices__button {
  margin-left: 6px;
  cursor: pointer;
}

Управление состояниями компонента

Система классов состояния позволяет визуально отражать поведение компонента без JavaScript-манипуляций DOM-стилями.

Состояние фокуса:

.choices.is-focused .choices__inner {
  border-color: #2684ff;
}

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

.choices.is-open .choices__list--dropdown {
  display: block;
}

Состояние отключения:

.choices.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

Переопределение анимаций

Анимации раскрытия и взаимодействия задаются через CSS-переходы.

.choices__list--dropdown {
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-4px);
  opacity: 0;
}

.choices.is-open .choices__list--dropdown {
  transform: translateY(0);
  opacity: 1;
}

Использование переходов вместо JavaScript-анимаций снижает нагрузку на основной поток и улучшает отзывчивость интерфейса.

Интеграция с CSS-препроцессорами

При использовании SCSS структура стилей может быть включена как модуль:

@import "choices.js/public/assets/styles/choices";

Далее возможно расширение через вложенность:

.choices {
  &__inner {
    border-radius: 8px;
  }

  &.is-open {
    border-color: #2684ff;
  }
}

Подобная организация упрощает масштабирование стилей в крупных проектах.

Изоляция стилей и предотвращение конфликтов

Choices.js использует уникальную нейминг-систему классов, что снижает риск конфликтов с глобальными стилями приложения.

Для дополнительной изоляции применяется:

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

При необходимости усиленной изоляции компонент может быть помещён в контейнер с собственным namespace:

.form-field .choices__inner {
  font-size: 14px;
}

Настройка плотности и размеров

Адаптация под различные интерфейсные плотности выполняется через изменение padding и font-size:

.choices__inner {
  min-height: 36px;
  font-size: 13px;
}

.choices__item {
  padding: 6px 10px;
}

Для компактных интерфейсов используется уменьшение отступов, для десктопных панелей — увеличение интерактивных зон.

Оглавление