Перейти на PRO

Как реализовать изоляцию CSS в компонентах Vue

Тип вопроса: Vue Вероятность: 10% Категория: Frontend Разработчик

Ответ

В Vue можно изолировать CSS для компонентов несколькими способами:

  1. Scoped стили
    Добавляем атрибут scoped в тег <style> компонента:
<style scoped>
.button {
  color: red;
}
</style>

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

  1. CSS Modules
    Используем module для генерации уникальных имен классов:
<template>
  <button :class="$style.button">Click</button>
</template>

<style module>
.button {
  background: blue;
}
</style>
  1. Композиционный API (Vue 3)
    Можно использовать useCssModule для доступа к классам модуля в setup:
import { useCssModule } from 'vue'

export default {
  setup() {
    const style = useCssModule()
    return { style }
  }
}

Важно: Scoped стили не защищают от глобальных стилей, а лишь добавляют специфичность. Для полной изоляции лучше использовать CSS Modules или решения типа Shadow DOM.

Ответ 18+ 🔞

Ну, слушай, вот сидишь ты, верстаешь компонент, всё красиво, кнопочка красненькая. А потом, блядь, открываешь другой компонент — а там твоя кнопка тоже красная, ёпта! Как будто её всю жизнь красной красили! Это ж пиздец, чувак, стили попёрли через все компоненты, как тараканы по кухне.

Так вот, чтобы эта ебля не происходила, в Vue есть несколько способов засунуть свои стили в отдельную комнату и не пускать их гулять по всему приложению.

Первый способ — как надеть на стили намордник (Scoped стили) Просто пишешь в компоненте scoped, и всё, понты нахуй. Vue сам навешает на твои селекторы уникальные атрибуты, типа data-v-12345, и они будут работать только внутри этого компонента. Красота!

<style scoped>
.button {
  color: red; /* Эта краснота теперь привязана к этому компоненту, как собака на цепи */
}
</style>

Второй способ — полный паранойя-мод (CSS Modules) Тут уже не просто намордник, а каждому классу выдают паспорт с чужим именем. В <template> обращаешься к стилям через $style, как к строгому бухгалтеру.

<template>
  <button :class="$style.button">Click</button> <!-- Класс будет что-то вроде `_button_1f3h8_1` -->
</template>

<style module> <!-- Видишь `module`? Всё, пошли криптонимы -->
.button {
  background: blue;
}
</style>

Третий способ — для любителей нового, Vue 3 и его Composition API Тут уже можно в setup() функции достать эти зашифрованные стили через useCssModule(). Выглядит серьёзно, будто шпион какой.

<script>
import { useCssModule } from 'vue'

export default {
  setup() {
    const style = useCssModule() // Достаём наш чемоданчик со стилями
    return { style }
  }
}
</script>

Но вот, блядь, важный момент, в рот меня чих-пых! Scoped стили — это не бронежилет. Это скорее знак "Не трогать, моё!". Глобальные стили с большей специфичностью всё равно могут пролезть и нагадить. Если тебе нужна полная изоляция, как в банковском сейфе — смотри в сторону CSS Modules или, на худой конец, Shadow DOM. А так — выбирай, что душе угодно, лишь бы не было мучительно больно, когда всё полетит к чертям.

© ХакСобесов, 2026
support@hacksobesov.com