Имеет ли смысл использование SCSS при именовании классов по BEM?

Question

[ymfront]

Есть такой SCSS-код (вложенность блоков с именованием классов по BEM):

.banner {
	свойства
	&__text {
		свойства
	}
	&__img {
		свойства
	}
}

Есть ли смысл в таком написании стилей, использую вложенность при именовании классов по BEM?
Или лучше делать без вложенности?

.banner {
	свойства
}

.banner__text {
	свойства
}

.banner__img  {
	свойства
}

Т.к. например, при правке стилей класс найти проще, если стили написаны без вложенности.

Comments

[Владислав Лысков]

имеет смысла делать так как тебе удобно\делают в твоей команде
если тебе кажется - что использовать scss не имеет смысла/затруднительно, не имеет смысла его использовать (для чего?)

[Ankhena]

Т.к. например, при правке стилей класс найти проще, если стили написаны без вложенности.

Поддерживаю второй вариант.

А так да, в зависимости от кодгайда, принятого в команде или указанного в ТЗ. Если его нет, то как вам больше нравится.

[Александр Васильев]

Без вложенности будет осложнена навигация, как только появятся модификаторы

[Aetae]

Это вкусовщина.
Моё мнение - первый вариант: весь код конкретного блока в одном месте, можно свернуть его и он не будет мешать.
Проблема с поиском - не проблема: все IDE умеют работасть с scss или из коробки или через плагины, всё находится в один клик.

Answer 1

[Никита Геннадич]

Во всех больших проектах, в которых я работал, использовали первый вариант.

Как тут верно заметили - искать нужный стиль, при таком подходе по всей кодовой базе может быть не удобно или даже вообще нереально в некоторых случаях. Все россказни про "один файл - один класс" это тоже бред... Бывает так что компонентов в проекте тысяча и невозможно знать какой конкретно компонент рисует нужный элемент. А как его искать непонятно, потому что там может не быть строк, например.

Что касается моего мнения, так БЭМ это в принципе шизофрения, эти нижние слэши делают из стилей мусор.

Comments

[Владислав Лысков]

Последний абзац… как я поддерживаю

[Виталий Першин]

Что касается моего мнения, так БЭМ это в принципе шизофрения, эти нижние слэши делают из стилей мусор.

БЭМ это лучшее что придумало человечество, если у вас получается мусор, значит вы что-то делаете не так.

[Никита Геннадич]

Виталий Першин, если вам нужен БЭМ, значит вы не понимаете одного из базовых принципов CSS.

[Виталий Першин]

Никита Геннадич

Разработчики всего мира:
Проводят исследования, разрабатывают методологию БЭМ, согласованно решают поставленные задачи.

Рандомный чел с хабра:

если вам нужен БЭМ, значит вы не понимаете одного из базовых принципов CSS.

[Никита Геннадич]

Виталий Першин, хспде, какая чушь...

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

Во-вторых, аппеляция к авторитету это впечатляющий уровень дискуссий. Извините, мне не очень интересно в подобном участвовать.

[Виталий Першин]

Никита Геннадич, Вы просто лишний раз подчеркнули свою некомпетентность в данном вопросе. Ведь БЭМ это одна из концепций у которой есть другие аналоги, в частности SMACSS. Данный концепция давно вышла за пределы Яндекса и набрала популярности именно благодаря тому, что здраво мыслящие люди могут оценить её преимущества. А чтобы не получался мусор, как вы сами сказали, нужно просто научиться, понять и тогда все станет на свои места. Все это опыт многих разработчиков из разных компаний, который в какой-то момент задокументировали и дали название.

сейчас они сами им далеко не везде пользуются.

То есть вы думаете раз они разработали методологию, то можно остановится и дальше ничего не делать? Они дальше работают и пробуют что-то новое именно поэтому на свет появляются разные концепции от атомарного css до методологий по типу БЭМ.

Сейчас уже не вспомню, но пару лет назад гугл в одном из своих проект использовал именно БЭМ и об этом была статья. Так что не надо думать, что все идиоты и один вы "понимаете один из базовых принципов CSS"

Я даже спрашивать не хочу, что там за принцип такой, который не позволяет использовать БЭМ, чтобы лишний раз "рука-лицо" не делать.

[Никита Геннадич]

Виталий Першин, вы чота смысл написанного походу слабо улавливаете.

То есть вы думаете раз они разработали методологию, то можно остановится и дальше ничего не делать?

Никто не говорил что они ничего не делают, вы это сами нафантазировали? Вопрос другой - если БЭМ столь хорош, то почему же они сами перестают его использовать?

В целом ваш уровень аргументации "а вот такое даже в гугле использовали" (а весь ваш трёп к этому и сводится), говорит о том, что вы в принципе не особо понимаете как веб работает. Мне на таком уровне дискутировать интереса нету, извините.

[Виталий Першин]

Никита Геннадич, Просто у меня есть аргументы на любой ваш выпук, а вы только юлите, как обычный диванный "эксперт".

Мне на таком уровне дискутировать интереса нету, извините.

Извиняю, поэтому и общаюсь с вами, чтобы хоть немного поднять ваш уровень.

Answer 2

[Александр Новиков]

BEM имеет смысл!

Comments

[Владислав Лысков]

От бэма смысла не больше, чем от этого ответа

Answer 3

[Виталий Першин]

Лично мне использование амперсанда принесло больше вреда чем пользы, поэтому я придерживаюсь второго варианта:

.banner {
  свойства
}

.banner__text {
  свойства
}

.banner__img  {
  свойства
}

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

Но SCSS это не только амперсанд, поэтому одно другому не мешает, хотя я использую только postCSS

Comments

[Сергей delphinpro]

А если блоки не разбиты на файлы, то функциональность Code Folding позволяет свернуть весь блок, облегчая визуальную навигацию по файлу. В вашем случае такой возможности нет.

[Виталий Першин]

Сергей delphinpro, Если блоки не разбиты на файлы, можно только посочувствовать

Answer 4

[Сергей delphinpro]

Т.к. например, при правке стилей класс найти проще, если стили написаны без вложенности.

Почему? Если вы придерживаетесь правила - один класс- один файл, то вам всего лишь нужно кликнуть по селектору блока и вы перейдете в нужный файл. А там найти элемент не сложно.

Comments

[imko]

Для VSC есть даже плагин который "понимает" сасс селекторы и позволяет "go to defenition" с разметки на любой такой с parent-селектором

[Ankhena]

imko, и так и так два хода.
Либо открыть файл блока и в нем элемент.
Либо найти сначала в разметке, потом кликнуть и попасть в стили.

[imko]

Ankhena, ну это со старта) а если уже в разметке че-то пишешь то один. Еще помогает в говнопроектах, где селекторов под которые попадает элемент миллион в миллионе мест)