Developer

Методологии: БЭМ, scoped styles, CSS Modules

↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Как организовать CSS в большом проекте и не конфликтовать по именам.

Объяснение

Проблема CSS — глобальная область видимости. Способы изоляции:

ПодходСуть
БЭМ (Block__Element—Modifier)договорённость по именам: .card, .card__title, .card--featured
Vue <style scoped>компилятор добавляет data-v-xxx к элементам и селекторам
CSS Modulesлокальные хэшированные имена классов (styles.card)
Shadow DOMполная изоляция (Web Components)
CSS-in-JSстили в JS (styled-components, Emotion)
Utility-first (Tailwind, UnoCSS)маленькие атомарные классы
@layer, @scopeконтроль каскада и области
<div class="card card--featured">
  <h3 class="card__title">Заголовок</h3>
</div>
<template><button class="btn">OK</button></template>
<style scoped>
.btn { padding: 8px 16px; }                 /* только этот компонент */
:deep(.q-field__native) { color: red; }     /* пробить в дочерние (осторожно) */
:slotted(.item) { margin: 0; }
</style>
<style module>.title { font-weight: 600; }</style>   <!-- CSS Modules: $style.title -->

Выбор: во Vue — scoped + токены/переменные; для библиотечных компонентов — БЭМ/@layer; для утилитарной вёрстки — Tailwind/UnoCSS.

Нюансы и подводные камни

  • scoped увеличивает специфичность и усложняет переопределение стилей UI-библиотек (нужен :deep).
  • Слишком глубокая БЭМ-вложенность (.a__b__c) — признак плохой декомпозиции.
  • Глобальные стили (reset, токены, типографика) — отдельным слоем.
  • Утилитарные классы ускоряют разработку, но перегружают шаблон — извлекайте компоненты.
  • CSS-in-JS в рантайме дороже по производительности.

Практика

  1. Перепишите компонент на БЭМ и на scoped, сравните.
  2. Настройте :deep для кастомизации Quasar-компонента.
  3. Ввести @layer для сторонних стилей.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки