Вложенность CSS

Вложенность — запись правил для дочерних элементов внутри правила родителя. С 2023 года она входит в стандарт CSS и работает в новых браузерах без сборки. postcss-preset-env разворачивает её в обычные плоские селекторы, если в вашем списке Browserslist есть браузеры без поддержки. При списке defaults это так.

Вложенные правила

Отдельно ничего устанавливать не нужно — вложенность входит в postcss-preset-env из прошлого урока. Пишите стили карточки поста в styles/main.css:

/* styles/main.css */
.post-card {
  padding: 16px;
 
  h2 {
    margin: 0;
  }
 
  &:hover {
    border-color: #2563eb;
  }
}

После npx postcss styles/main.css -o css/main.css:

.post-card {
  padding: 16px;
}
.post-card h2 {
    margin: 0;
  }
.post-card:hover {
    border-color: #2563eb;
  }

Вложенное h2 стало селектором потомка .post-card h2. Знак & обозначает сам родительский селектор, поэтому &:hover превратился в .post-card:hover. Лишние отступы во вложенных правилах — особенность плагина, браузеру они не мешают.

& в другой позиции

& можно поставить не только в начало. Так задаются стили карточки внутри другого блока:

/* styles/main.css */
.post-card {
  padding: 16px;
 
  .is-featured & {
    border-width: 2px;
  }
 
  @media (min-width: 768px) {
    padding: 32px;
  }
}

.post-card {
  padding: 16px;
}
.is-featured .post-card {
    border-width: 2px;
  }
@media (min-width: 768px) {
  .post-card {
    padding: 32px;
}
  }

Запись .is-featured & дала .is-featured .post-card, а медиазапрос вынесен наружу с повтором селектора.

Отдельный плагин

Если остальные возможности postcss-preset-env не нужны, подключите только вложенность — плагин postcss-nesting:

npm install --save-dev postcss-nesting

// postcss.config.js
import postcssNesting from 'postcss-nesting';
 
export default {
  plugins: [postcssNesting()],
};

Он разворачивает вложенность всегда, не глядя на список браузеров.