Как избежать глубокой вложенности в CSS?

Question

[Alex_87]

Здравствуйте! Скажите пожалуйста, как избежать глубокой вложенности в CSS. Предположим, у нас большое дерево элементов в HTML. Элемент, до которого мы хотим добраться, лежит на 4 уровне. Насколько я понимаю, будет не правильно создавать цепочку до этого элемента, к примеру:
.class1 .class2 .class3 .class4
Что в этой ситуации делать, как написать правильно, где об этом можно прочитать?

Comments

[Rustam Bainazarov]

BEM.

https://ru.bem.info

При верном его использовании вы будете генерировать уникальные селекторы, которые не зависят от вложенности в 99,8% случаев.

[Alex_87]

Рустам Байназаров, Даже, если я буду писать на LESS?

[Rustam Bainazarov]

Alex_87, вот другой пример на SASS просто попроще, старый комментарий удалил:


Генерирует стили вот такие:

.s-section {
  margin: 0;
}

.s-section__header {
  margin: 0;
}

.s-section__title {
  padding: 0;
}

.s-section__data-sample {
  text-decoration: none;
}

.s-section__data-name {
  margin: 0;
  font-size: 2em;
}

.s-section__data-title {
  font-weight: bold;
}

[Alex_87]

Рустам Байназаров, к примеру, вот этот код:

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>

в less, приведёт к следующему:

.block{
   .block__elem1{
       .block__elem2{
            .block__elem3{

            }
       }
    }
}

что в итоге, в css, преобразуется в это:

.block .block__elem1 .block__elem2 .block__elem3{

}

? ... И ещё, в ссылке, что вы мне дали, сказано:

Создавайте блок
Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Значит, необязательно ВСЮ страницу, писать по BEM... а лишь только с над теми элементами, которые должны повторяться в коде, я правильно?

[Rustam Bainazarov]

Alex_87, посмотрите на директиву @at-root, которую я использую в SASS (пример): она выносит правило внутри за пределы вложенности на самый верх, сохраняя в исходнике визуальную вложенность. Поищите, какой там аналог этому в LESS, я его не знаю.

Значит, необязательно ВСЮ страницу, писать по BEM... а лишь только с над теми элементами, которые должны повторяться в коде, я правильно?

Нет. Изучайте дальше, смотрите примеры.

[Rustam Bainazarov]

Alex_87, ну если лень, то тупое решение вот такое:

.block {
   &__elem1 {

    }

   &__elem2 {

    }

   &__elem3 {

    }

   &__elem4 {

    }

}

И не очень оно хорошее — не видно иерархии.

P. S. Я не помню, чтобы в LESS был аналог @at-root. И в целом, мне SASS больше нравится, чем LESS.

Answer 1

[Moskus]

Зачем включать в селектор все элементы вложенности? Конструкция, как в вашем примере, может быть нужна только если ваш class4 может содержаться в десятке разных структур дерева и, главное, иметь разное оформление. БЭМ, который многие считают чуть ли не панацеей - техника, которая была придумана для разметки, генерируемой автоматически. Если верстка делается вручную, у вас есть возможность подумать головой и спланировать разметку.

Comments

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

Бем нужен для изоляции блоков друг от друга и организации стилей, чтоб было интуитивно понятно что где редактируется. Экономит время когда страниц не 3, а 3 сотни. Средства автоматизации уже поверх сделаны.

[Moskus]

Алекс Глебов, зачем вы мне это объясняете, ещё и учитывая, что вы не знаете историю этой методологии? Фанатов БЭМ я ни о чём не спрашивал. Считаете, что вам есть что сказать - пишите свой ответ на вопрос.

[Rustam Bainazarov]

Moskus, а какие есть иные варианты, если в проекте нет обфускации селекторов или styled components? Панацеи, к сожалению, не бывает вовсе, есть инструмент, который выполняет ту или иную задачу с разной степенью успешности. BEM достойная методология для нейминга и структуризации CSS, если в проекте нет ни обфускации селекторов, ни styled components.

[Moskus]

Рустам Байназаров, альтернатива - думать головой. А то превратили БЭМ в икону и молятся на него, буквально. А потом ещё удивляются, почему это фронтенд-разработчиков все остальные считают говнокодерами.
Набегающие в комментарии к любому критическому замечанию по поводу БЭМ - лучшее наглядное доказательство этого карго-культа и фетишизма.

[Rustam Bainazarov]

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

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

Мне кажется, вопрос самой структуры построения вёрстки — это уже отдельная тема. И да, более важная: тут можно соблюдать в точности любую методологию и делать при этом плохую вёрстку с безумной логикой и архитектурой. Или использовать, не думая, метологию там, где это не нужно. Только это уже проблема разработчика, нежели любой методологии/технологии/метода.

[Alex_87]

Ребята, оставьте пожалуйста своё мнение относительно моего комментария(рисунок внизу). Вот я к примеру, не знаю, что делать с цепочкой, которая образуется в CSS из LESS.
И по поводу CSS(поскольку сейчас, мне нужно писать именно на нём)! Я так понимаю, что на нём невозможно написать код, без огромной цепочки, если такова разметка?

[MamaLuyba]

Alex_87, почему нельзя просто сослаться на .block__elem3, раз нужен именно он?

[Alex_87]

MamaLuyba, а как? Ведь в таком случае, у вас теряется структура по разметки html. Вы будете смотреть в Less и не понимать, какой элемент и где находиться. А так, всё видно, но минусом такого подхода, как я говорил, является то, что создаётся длинная цепочка в css

[MamaLuyba]

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

[Alex_87]

MamaLuyba, с бэмом пока до конца не разобрался... Понятно только что в блоке может быть элемент, а в элементе блок. Но как определить, что есть блок. а что элемент? Ведь во вложенности может быть и 3 и 4 блока....

[MamaLuyba]

Alex_87, ну яндекс это рассматривает на примере световых мечей: меч - блок, лезвие-луч - элемент, цвет лезвия/тип эфеса - модификатор. я сам в бэме особо не разбирался, т.к., как по мне, городить километры стилей - так себе затея. и все это еще и запоминать, что у тебя подразумевается в 'input-form-submit__block-type-single--grey'. если на работе припрет - буду разбираться.

Answer 2

[Сергей delphinpro]

Ответ очень прост — не используйте глубокую вложенность.
Кто вас заставляет писать .class1 .class2 .class3 {}, если можно просто написать .class3 {}