Чому надмірна вкладеність - антипатерн?

Надмірна вкладеність вважається антипатерном, тому що вона погіршує якість CSS і призводить до проблем із підтримкою. Основні причини:

#1. Зростання специфічності і "ламкий" каскад

Глибокі вкладені селектори автоматично підвищують специфічність. Це призводить до ситуації, коли для будь-якої невеликої правки потрібен ще більш "сильний" селектор. Підсумок - боротьба зі стилями й каскадом замість нормальної роботи.

#2. Складність супроводу

Коли вкладеність сягає 4-6 рівнів, стає складно зрозуміти, звідки прийшли стилі і які елементи вони зачіпають. Будь-яка зміна може зачепити зайві вузли, і розробник втрачає контроль.

#3. Прив'язка до структури HTML

Глибока вкладеність жорстко пов'язує CSS і DOM. Найменша зміна HTML-структури ламає стилі, тому що логіка селектора "прив'язана" до конкретного шляху. Це заважає гнучкості й перевикористанню.

#4. Роздутий підсумковий CSS

Препроцесор розгортає вкладеність у довгі селектори. Чим глибша вкладеність, тим більше повторень у підсумковому CSS, а отже - більше ваги, більше дублювання і повільніше завантаження.

Короткий висновок: Вкладеність корисна тільки на 1-2 рівні для логічної структури. Усе, що глибше, погіршує читабельність, перевикористовність і підтримку коду, і з часом перетворює стилі на важкий і погано керований каскад.