Правильно ли писать данным образом sass?

Question

[Aslan]

Стоит ли таким образом стоить каскад? При сборе sass компилится в 1 файл style.min.css

.callback{
	padding: 20px 0;
	&__header{
		font-size: em(22);
		line-height: 30px;
		font-weight: 600;
		text-align: center;
	}
	&__subheader{
		font-size: 18px;
		font-weight: 400;
		line-height: 40px;
		color: $grey_color;
		text-align: center;
		
	}
	&-form{
		float: none;
		margin: 0 auto;
		&__name{
			width: 100%;
		}
	}
}

Answer 1

[Сергей delphinpro]

Да. Почти.
У вас здесь два блока (БЭМ-блока)

.callback {}
.callback-form{}

Лучше писать писать их отдельно. А элементы вполне норм.

Comments

[zooks]

Их и должно быть два - один для блока, другой для формы. Это не вдаваясь в содержимое селекторов.

Answer 2

[zooks]

Да, все верно.

Answer 3

[metaf]

В будущем такие штуки &__header превратятся в АД, если у вас проект разрастется на десятки отдельных .scss не будет sourcemap. Потому что найти нужный элемент будет нереально.

Comments

[zooks]

Не соглашусь, БЭМ рулит.

[metaf]

zooks: БЭМ рулит, но такая вложенность в Scss - отстой. Почитайте, например: https://www.sitepoint.com/beware-selector-nesting-sass/

[Aslan]

metaf: при таком использовании не бывает такой вложенности в css prntscr.com/bken0n

[zooks]

Aslan: да, вложенности не будет, это БЭМ. metaf, почитайте справку Sass, конкретно про оператор &.

[metaf]

zooks: Я знаю что не будет вложенности! Бить селектор на куски в scss - не правильно. Вы сами-то прочитайте статью в моем ответе.

[abberati]

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

[abberati]

metaf: по поводу статьи: там написано, что при таком именовании невозможно найти селектор в коде. Да, всё верно. Сам с этой проблемой каждый день сталкиваюсь. Но проблема исчезает, если толково организовать структуру и использовать настоящую IDE вместо текстового редактора.

vk.cc/5js7qP

[zooks]

metaf: просмотрел статью, нет убедительных аргументов кроме всяких

I don’t like

и "мне кажется, что код станет запутанным".

[Артем Каюн]

abberati: Тут всего 3 уровня вложенности, 3! Подключайте сорсмапы и никогда вы не запутаетесь.

[Артем Каюн]

Называйте файлы иенами блоков. Как их можно не найти.

[abberati]

Артем Каюн: а почему ответ мне?
Я же привожу скрин из своего проекта иллюстрируя "структура + IDE". У меня всё в порядке, это автор статьи (несколько комментариев выше) затрудняется найти селектор.

[Артем Каюн]

abberati: Перепутал, это не вам)) Это я metaf

[Serj-One]

metaf: Не несите бред. Никаких проблем с поиском такой подход не вызывает. Скорей наоборот, позволяет получить боле удобную структуру.

[Сергей delphinpro]

>>не будет sourcemap
А почему это вдруг его не будет? Нет, если вы сам себе злобный буратино, тогда конечно...

[Сергей delphinpro]

>> Потому что найти нужный элемент будет нереально.
Не кажется ли вам, что найти нужный блок поиском вполне достаточно (раз уж у вас сорсмапов нет :) )
А уж в блоке-то элемент отыщется.

[metaf]

Сергей: Не кажется ли вам, что кроме вас может работать еще несколько разработчиков? Как им разбираться в вашем нечитаемом коде?

[metaf]

abberati: А если будет еще один разработчик? Или вы к своему коду пишете стйлгайды и именуете файлы и классы только по ним? Сами свой код посмотрите! .article-page, .article-category-page {&__inner > a {}} это не БЭМ! И отвратительный код!

[metaf]

Артем Каюн: На каждый блок по файлу?? Вы, видимо, считаете блоком всю страницу? Или разбиваете проект на миллион файлов, которые потом собираются по 10 минут?

[metaf]

Serj-One: это вам сейчас удобно. А если откроете проект через год, будете за голову хвататься.

[Сергей delphinpro]

metaf: Ну основоположники БЭМа рекомендуют не только блоки, но отдельные элементы и модификаторы по файлам раскидывать. Так что блок на файл - это еще норм :)
Лично я раскидываю именно блок на файл. Бывает по 200-300 файлов. Собирается гальпом мгновенно.

По поводу нескольких разработчиков. Работаем. Нормально читается. Возможно дело привычки. Не буду спорить.

Стайлгайды по БЭМу давно описаны ребятами из Яндекса. Зачем еще раз писать?

[Serj-One]

metaf: Есть проекты, которые поддерживаю уже несколько лет. Никаких сложностей не испытываю.

[metaf]

Сергей: Gulp это хорошо, реально быстрый. А вот Grunt - очень тормозит на множестве файлов. И организация файлов по БЭМу мне не нравится)).
Мне тоже раньше было проще побить все на &__ &--, но с селекторами целиком код выглядит чище и более читаемым. И по разбитым селекторам я ничуть не скучаю :)