Как влияет на Relayout селектор на родителя в CSS?

Как селекторы на родителя влияют на Relayout

Этот вопрос касается понимания CSS селекторов, специфичности и того, как браузер пересчитывает стили при изменении состояния родителя.

CSS селекторы и область применения

Браузер применяет CSS правила вниз по дереву (cascade). Когда ты пишешь селектор на родителя, он влияет только на стили, которые наследуются от родителя:

/* Влияет на наследуемые свойства (color, font, line-height и т.д.) */
parent {
  color: red;      /* наследуется */
  font-size: 16px; /* наследуется */
  padding: 10px;   /* НЕ наследуется */
  margin: 10px;    /* НЕ наследуется */
}

/* Не наследуется */
parent {
  width: 100px;    /* только у parent */
  height: 100px;   /* только у parent */
  background: blue; /* только у parent */
}

:has() селектор - новая беда

В современном CSS есть :has() - селектор, который позволяет выбрать родителя на основе его потомков:

/* Старый подход - нельзя было */
/* Нет селектора "родитель div если у него есть button" */

/* Новый подход с :has() */
ul:has(li.active) {
  background: yellow; /* ul станет желтым если есть активный li */
}

form:has(input:invalid) {
  border: 2px solid red; /* форма станет красной если есть невалидное поле */
}

Важно: :has() может привести к множественным relayout'ам!

Что такое Relayout

Relayout (он же Reflow) - это пересчет геометрии элементов браузером:

1. JavaScript изменяет DOM или CSS
2. Браузер пересчитывает layout (размеры, позиции)
3. Браузер перекрашивает (paint)
4. Браузер отправляет на видеокарту (composite)

Это медленная операция! На мобильных может заметить юзер.

Когда селектор на родителя вызывает Relayout

Сценарий 1: Изменение наследуемых свойств

<div class="parent">
  <p>Text</p>
  <p>Text 2</p>
</div>

<style>
  .parent { color: blue; }
  .parent:hover { color: red; } /* При hover - relayout всех потомков */
</style>

Когда родитель hover:

1. color: red применяется к .parent
2. Все потомки наследуют новый color
3. Браузер пересчитывает размер текста (если есть font-size, letter-spacing и т.д.)
4. Может потребоваться relayout всего поддерева

Сценарий 2: Изменение box-model свойств

<div class="parent">
  <div class="child">Content</div>
</div>

<style>
  .parent {
    padding: 10px;
    width: 200px;
  }
  
  .parent:hover {
    padding: 20px;  /* Размер родителя изменился */
    width: 220px;   /* Размер родителя изменился */
  }
</style>

При hover:

1. Родитель стал больше на 20px
2. Все дети должны пересчитать свои размеры (если % или flexbox)
3. Полный relayout поддерева

Сценарий 3: :has() селектор на родителя

<form>
  <input type="email" />
  <input type="text" />
  <button>Submit</button>
</form>

<style>
  form:has(input:invalid) {
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid red;
  }
</style>

Когда юзер вводит неправильный email:

1. input:invalid срабатывает
2. Браузер понимает что :has() условие выполнено
3. Применяет стили к form
4. Relayout формы и всех потомков

Производительность: Cascading vs :has()

Cascading (хорошо для производительности):

/* Браузер знает: изменение в .parent влияет только на .parent */
.parent { color: red; }

:has() (плохо для производительности):

/* Браузер должен проверить: есть ли в поддереве элемент со статусом invalid? */
form:has(input:invalid) { border: 2px solid red; }

/* На каждое изменение input браузер должен:
   1. Проверить :invalid статус
   2. Если изменился - применить стили к form
   3. Relayout формы
*/

Оптимизация Relayout

1. Избегай селекторов на родителей

/* Плохо - relayout родителя */
.parent:has(child.active) { background: yellow; }

/* Хорошо - измени только ребенка */
.parent .child.active { color: blue; }

2. Используй will-change (осторожно!)

.parent {
  will-change: transform; /* Подсказка браузеру что это будет меняться */
}

3. Батчируй DOM изменения

// Плохо - 10 relayout'ов
for (let i = 0; i < 10; i++) {
  element.style.width = i + 'px'; // каждое изменение = relayout
}

// Хорошо - 1 relayout
element.style.cssText = `width: 10px; height: 20px; padding: 5px;`;

4. Используй transform вместо position

/* Плохо - relayout */
.element {
  left: 10px;
  transition: left 0.3s;
}
.element:hover { left: 50px; }

/* Хорошо - только composite (быстро) */
.element {
  transform: translateX(0);
  transition: transform 0.3s;
}
.element:hover { transform: translateX(50px); }

Профилирование Relayout

Chrome DevTools:

Inspect -> Performance -> Запись -> Взаимодействие -> Стоп

Лугаешь:
- Layout (фиолетовый)
- Paint (зеленый)
- Composite (кончик ноября)

Если Layout занимает >16ms - замечание для 60fps
Если >50ms - критично для 30fps

Вывод

1. Селекторы на родителя влияют на relayout если они меняют:

   • Наследуемые свойства (color, font-size)
   • Box-model (width, height, padding)
   • :has() селекторы (новые и опасные)

2. Reflow это дорого на мобильных

3. Оптимизируй:

   • Избегай часто срабатывающих :has()
   • Используй transform вместо position
   • Батчируй изменения
   • Профилируй в DevTools

4. Современный подход:

   • Container Queries для зависимостей
   • CSS Grid/Flexbox уменьшают relayout
   • :has() осторожнее