Остерегайтесь гнездования селекторов в Sass

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

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

Когда можно использовать вложение?

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

Если вы спросите меня сейчас, я чувствую, что добавление псевдоклассов и псевдоэлементов — практически единственный случай, когда это нормально. Например:

 .element { /* Some CSS declarations */ &:hover, &:focus { /* More CSS declarations for hover/focus state */ } &::before { /* Some CSS declarations for before pseudo-element */ } } 

Это лучший вариант использования для вложения селекторов, который я могу себе представить. Он не только избегает повторения одного и того же селектора, но также охватывает все элементы этого элемента (состояния и виртуальные дочерние элементы) в одном и том же наборе правил CSS. Кроме того, & не является двусмысленным: это означает .element , не больше, не меньше.

Другой случай, когда я думаю, что вложение интересно, когда вы хотите применить некоторые пользовательские стили к простому селектору на основе верхнего контекста. Например, при использовании CSS-хуков Modernizr:

 .element { /* Some CSS declarations */ .no-csstransforms & { /* Some CSS declarations when CSS transforms are not supported */ } } 

В этом сценарии я чувствую, что это достаточно ясно, что .no-csstransforms & предназначен для контекстуализации текущего селектора всякий раз, когда CSS-преобразования не поддерживаются. Хотя это может быть на грани того, что я считаю приемлемым.

Каковы мои рекомендации?

Напишите простой CSS. Давайте возьмем пример Мики, который немного сложен, но не настолько сложен, что было бы больно переписывать.

Это текущий код, очевидно предназначенный для стилизации некоторых вкладок:

 .tabs { overflow: hidden; .tab { background: red; &:hover { background: white; } .tab-link { color: white; @at-root #{selector-replace(&, '.tab', '.tab:hover')} { color: red; } } } } 

Вместо этого мы могли бы написать это так:

 .tabs { overflow: hidden; } .tab { background: red; &:hover { background: white; } } .tab-link { color: white; .tab:hover & { color: red; } } 

Я не могу придумать единственной причины, по которой кто-то предпочитает первый фрагмент кода. Он не только длиннее, но и менее явен и использует функции Sass, которые не обязательно известны всем разработчикам.

Обратите внимание, что вывод CSS не совсем тот же, потому что мы также упростили код. Вместо того, чтобы иметь селекторы до тех пор, пока .tabs .tab .tab-link , мы перешли к более простым вещам, таким как .tab-link .

На данный момент это не столько вложенность селекторов, сколько соглашения об именах и методология селекторов. Например, при использовании BEM вы называете вещи в соответствии с тем, что они есть, а не с тем, где они находятся, что часто приводит к простым селекторам (здесь простой означает не составной ), что означает отсутствие вложенности.

В соответствии с Руководством по CSS от Гарри Робертса:

При написании CSS важно правильно распределять наши селекторы и выбирать правильные вещи по правильным причинам […] Учитывая постоянно меняющийся характер большинства проектов пользовательского интерфейса и переход к более компонентно-ориентированным архитектурам, в наших интересах не стилизовать вещи, основываясь на том, где они находятся, а на том, что они есть.

Хорошее эмпирическое правило, когда дело доходит до селекторов CSS, чем короче, тем лучше . Мало того, что лучше на любом уровне (производительность, простота, переносимость, намерение и т. Д.), Но оказывается, что гораздо проще не испортить вложенность, когда селекторы короткие.

Последние мысли

Всякий раз, когда я говорю, что я думаю, что вложение селекторов не такая уж хорошая идея, люди всегда говорят мне: «У меня никогда не было проблем», «мы используем это каждый день, нет проблем», «это потому, что вы делаете сумасшедшие вещи с этим ». Конечно, нет ничего плохого в этой функции.

Препроцессоры не выводят плохой код, плохие разработчики делают. И здесь речь идет даже не о выходе, а о входе. Код становится все менее читаемым, когда мы добавляем дополнительные уровни сложности. Вложенные селекторы — один из тех слоев.

Нам дали вложенность, поэтому мы злоупотребили его силой. Затем нам дали селекторные функции, поэтому мы использовали их для того, чтобы исправить неразбериху, которую мы сделали с вложением. Это не правильно.

Используйте Sass или любой другой препроцессор, чтобы упростить ваш код, а не сделать его более сложным.

Эта статья была переведена на французский язык на La Cascade . Мерси, Пьер!