Адекватно ли делать большую вложенность в css?

Question

[KotovDenis]

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

Comments

[Алекс Глебов]

Это сломается если изменится разметка. Не верстка, а плакат получился.
Второй уровень вложенности - потолок в общем

[Ankhena]

Или есть какой-то максимальный уровень каскада

Вложенность это не каскад.

Двух уровней достаточно (за редким исключением).

Answer 1

[Андрей]

Нет, хорошая практика это https://ru.bem.info/methodology/css/
Использование id это уже никуда не годится

Comments

[KotovDenis]

Работаю в большинстве с CMS - и использование БЭМ в wordpress и opencart(который построен на бутстраповский классах - без БЭМ) - не особо рационально. БЭМ использую когда пишу проект с нуля. И делю всё на блоки - используя DRY.

[Вова Дружаев]

тся

[Андрей]

Владимир Дружаев, Простите

Answer 2

[Lord_Dantes]

Мой ментор мне говорил: "Славик будешь делать больше 2-3х(максимум) вложенностей в SASS, будешь потом переписывать."

Comments

[Andrew]

"Славик всё х, давай по новой" © хороший Человек

[Lord_Dantes]

Andrew, да)))

Answer 3

[Вова Дружаев]

Не адекватно.

Больший вес селекторов - больший бардак, больший вес файла - медленная загрузка.
Используй префиксы (.mypref_product) - если bem не под силу.

id - это костыль для перевеса. Потом вдруг понадобится ему перевес сделать - это выстрел в ногу (как и important)

Еще как признак дурного вкуса к длинным префиксам - плагин elementor сделал префикс "elementor" - вы бы посмотрели какие монструозные конструкции появляются с этим именем. А плагин активно используют несколько миллионов юзеров. Такая жесть elementor.com - гляньте что там в верстке за каша

Answer 4

[Илья Сергеев]

Большая вложенность селекторов неизменно ведёт к большой связанности кода. Если Вы захотите поменять какой-то один селектор, Вам неизбежно придётся поменять его во всех каскадах. К тому же, переиспользование кода при таком подходе стремится к нулю.
Я бы предложил посмотреть в сторону rscss.
Если предпочтительнее БЭМ, то используйте его, но у него есть известная проблема с длиной и количеством классов. При разработке крайне трудно ориентироваться в дереве.
В любом случае для комфортной работы жизненно необходим препроцессор на Ваш вкус. Мне вот больше всего Sass/SCSS приглянулся.