CSS Modules интеграция

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

В Vue компоненты обычно определяются в формате .vue, содержащем три секции: <template>, <script> и <style>. Для использования CSS Modules в секции <style> необходимо добавить атрибут module:

<template>
  <div :class="$style.container">
    Пример использования CSS Modules
  </div>
</template>

<script>
export default {
  name: 'CssModuleExample'
}
</script>

<style module>
.container {
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
}
</style>

Особенности синтаксиса

  1. Селекторы: Все классы внутри CSS Module автоматически генерируют уникальные имена. Это исключает возможность случайного переопределения стилей другими компонентами.
  2. Доступ к классам: Для привязки классов используется объект $style, доступный внутри шаблона. Класс передается динамически через :class="$style.className".
  3. Комбинирование стилей: Для добавления нескольких классов можно использовать массив или объект:
<div :class="[$style.container, $style.active]">Контент</div>
<div :class="{ [$style.container]: true, [$style.active]: isActive }">Контент</div>

Локальные и глобальные стили

CSS Modules позволяют смешивать локальные и глобальные стили. Для этого используется специальный синтаксис :global:

<style module>
:global(.global-class) {
  color: red;
}

.localClass {
  font-size: 16px;
}
</style>
  • :global делает класс доступным глобально, исключая его из процесса генерации уникальных имен.
  • Все остальные классы остаются локальными и доступны только через $style.

Использование с препроцессорами

CSS Modules полностью совместимы с препроцессорами, такими как SCSS или LESS. Для этого достаточно указать язык в атрибуте lang:

<style module lang="scss">
$primary-color: #3498db;

.container {
  padding: 20px;
  background-color: $primary-color;
  border-radius: 8px;
}
</style>

Сборщики вроде Vite или Webpack автоматически обрабатывают модули и преобразуют SCSS в CSS, сохраняя уникальность классов.

Динамическое изменение стилей

CSS Modules позволяют динамически применять стили на основе состояния компонента:

<template>
  <button :class="[$style.button, isActive ? $style.active : '']">
    Кнопка
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

<style module>
.button {
  padding: 10px 20px;
  border: none;
  background-color: #ccc;
}

.active {
  background-color: #42b983;
  color: white;
}
</style>

Это позволяет легко управлять стилями без глобальных селекторов и сложных каскадов.

Интеграция с библиотеками и внешними стилями

При работе с внешними библиотеками CSS Modules можно использовать :global для классов, которые необходимо оставить неизменными:

<style module>
:global(.external-library-class) {
  font-weight: bold;
}
</style>

Также можно комбинировать локальные и глобальные стили в одном элементе:

<div :class="[$style.localClass, 'external-library-class']">Текст</div>

Преимущества CSS Modules

  • Изоляция стилей: исключает конфликты между компонентами.
  • Поддержка динамических классов: легко применять стили на основе состояния компонента.
  • Совместимость с препроцессорами: SCSS, LESS и другие.
  • Упрощение поддержки больших проектов: локальные стили легче масштабировать.

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

Оглавление