Что плохого в каскадности?

Question

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

Я начинающий разработчик.

.parent-block .element{...}
Вроде бы есть понимание, что это плохо. Но помогите сформулировать это словами.
Элемент из родителя в другое место врятли когда-нибудь перемещается. Если это не что-то глобальное, вроде кнопок и ссылок.

Каких проблем или конфликтов поможет избежать такая запись:
.parent-block_element{...}
Или это просто аккуратней выглядит и легче читается?
Еще вопрос во времени, коллеги говорят что каскадность - быстрее, и нет смысла называть классы по бему.

Верстаю в основном корпоративные сайты и лендинги.

Answer 1

[Сергей delphinpro]

Термин неверный. Это не "каскадность", а "вложенность селекторов".
Каскад - это переопределение стилей. Когдав браузере определен стиль по умолчанию для тега, потом в файле вы определили стиль для класса присвоенного этому тегу, потом еще раз переопределили в теге style на странице и наконец последний каскад - в атрибуте style тега. Стили каскадно переопределяются.

Еще вопрос во времени, коллеги говорят что каскадность - быстрее, и нет смысла называть классы по бему.

Вложенность априори не может быть быстрее одиночного селектора. Так как селекторы обрабатываются справа налево. Возьмем селектор .parent.child
Сначала браузер найдет все селекторы .child на странице, потом среди них отфильтрует те, что вложены в .parent.
Очевидно, что это будет дольше, чем просто найти селектор .parent__child

Answer 2

[Алексей Струков]

Оба подхода имеют право на существование. Каскадность "плоха" тем, что она немного замедляет парсинг страницы браузером, а также порой бывает избыточна. Лучше всего ее применять например в больших списках и таблицах, когда проще написать одну конструкцию типа ul > li , чем каждому элементу списка присваивать дополнительный класс, особенно если их там много и они должны быть однородными.
С другой стороны, не БЭМом единым жив верстальщик. Есть другие методологии, которые содержат в себе здравые мысли. Можно скомпилировать свой собственный подход, используя лучшее из всех методологий, а можно придерживаться БЭМа, чтобы при работе в команде ваш код был понятен остальным участникам проекта, или например другому человеку, который будет работать над проектом после вас, ибо БЭМ сейчас самый распространенный подход по моему. Но я лично сторонник смеси принципов БЭМа с вкраплениями atomicCSS.

Answer 3

[bro-dev]

Очевидно же что это значительно усложняет доработку стилей другими верстальщиками. У
.parent-block .element{...}
специфичность больше чем у
.parent-block_element{...}
Допишешь стиль в конец файла а он не сработает. Кстати не рекомендуемую БЭМ для наименования классов ксс. БЭМ избыточен, а ксс слишком узок, просто на его основе ченить свое придумайте.

Comments

[Сергей delphinpro]

Любой язык программирования "избыточен". Компьютеру нужны лишь нолики и единицы. Но мы не пишем программы ноликами и единичками. Мы придумали абстракцию над ними в виде разных ЯП. В самих ЯП мы придумали процедуры и функции, чтобы еще более абстрагироваться от низкоуровневых процессов, потом придумали объекты, повышая уровень абстракции и внося еще большую избыточность.
К чему я все это? Избыточность - это плата за удобство разработки, и в ней нет ничего плохого. Компромисс между скоростью программы и скоростью разработки, если хотите.

[bro-dev]

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

[Сергей delphinpro]

Роман Бережнов: Это формирующийся стандарт (ну ладно, не стандарт :) но к тому идет). Я все чаще встречаю в ТЗ требование соблюдать в именовании классов нотацию БЭМ (только не путайте с требованием использования полного стека БЭМ). Я считаю, не стоит изобретать что-то свое, когда уже есть довольно популярная штука. Вы же понимаете, что разбираться в чужом коде, следующем какому-то стандарту намного проще, чем ковырять велосипеды?

[itsjustmypage]

Сергей: Веб-компоненты - формирующийся стандарт, а БЭМ лишь одно из временных решений, которое спустя годы развития CSS исчезнет за ненадобностью.

Я согласен, что БЭМ действительно избыточен, для маленьких и средних систем более подходящей будет любая другая методология. Лично я использую rscss.io + разбивку по папкам от smacss.com + называю блоки с заглавной буквы, так проще их выделить в разметке.

Независимость элементов блока в rscss вместо именования block_element определяется с помощью жесткой структуры как .block > .element.

[bro-dev]

itsjustmypage: .block > .element. такие конструкции ломаются при применении сторонних каруселей например, которые между элементами вставят свою прослойку.