Как правильнее верстать?

Question

[wakenbyWork]

В общем верстаю по bem методологии, максимально дроблю проект на блоки и вот так они выглядит:




Т.е у меня весь проект состоит из pug + scss, и я эти блоки подключаю куда нужно. Но все это начало надоедать, хотя я написал cli которая генерирует все файлы, все равно есть ощущение что только усложняю себе работу.

Еще этим блокам из вне нужно добавлять классы и ты блин все время пишешь вот такое:

mixin button()
  .button(class=attributes.class) //- (class=attributes.class) Вот такое к каждому блоку к которому нужно добавлять класс

В общем как правильно верстать в плане архитектуры? Правильно ли я дроблю весь проект на частицы?

По ощущениям что я только усложнил себе работу чем упростил

Comments

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

По ощущениям что я только усложнил себе работу чем упростил

Хорошо != Быстро :(

[Ростислав]

Вообще правильно, но я не думал что в наше время кто-то использует ноду вместе с шаблонизатором, думал такое только с php еще живо. В каком-то реакте/вью это все выглядело бы гармоничней. У тебя же при сборке надеюсь все эти файлики обедняются в бандлы?

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

[wakenbyWork]

Ростислав, Я только верстаю с минимум логики на js, после это идет в backend на cms натягиваться))

[wakenbyWork]

Виталий Першин, Тогда я все правильно делаю? (В вопросе не уточнил: Каждый bem блок это pug + scss; А частицы это bem блоки)

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

wakenbyWork,

Тогда я все правильно делаю?

Ну в целом двигаетесь в правильном направлении, утверждать о том что правильно мне кажется вообще не имеет смысла. У меня к примеру сейчас такая структура:


Все файлы, которые относятся к блоку хранятся в одной папке, в итоге перенос в другой проект происходит в пару кликов.

Но я как минимум раз в год экспериментирую со своей сборкой пытаясь найти более удобную структуру.

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

Update. Да, кажется что сделаешь хорошую сборку и будешь делать все в 2 клика, но на практике лично я только больше времени стал тратить. Но это не потому что себе проблем создал. Наоборот, освободившись от некоторой рутины, начинаешь погружаться в качество кода, оптимизацию, рефакторинг, продумываешь структуру. В итоге когда ко мне обращаются за доработками например через год-два, я без проблем ориентируюсь в коде и точно знаю, что ничего не сломаю изменив тот или иной блок, добавив что-то или удалив. С хорошо организованным кодом приятно работать.

[imko]

Виталий Першин, свой код тоже без проблем читаю и редактирую и на проектах 20+ страниц, когда читаешь чужой во-первых нет гарантии что он правильно его написал соответственно БЭМу и обдумывать что есть что все равно приходится, да и если стили читать умеешь то проблем особых не составляет проект и вольного стиля править если его не придурок писал

Answer 1

[imko]

Это большое усложнение, помимо того что на создание блока у тебя много времени уходит, так и на изменения будет еще больше уходить, а собираться это будет по сто лет. Вместо БЭМа есть CSS-селекторы, а вместо PUGа изменения вручную.
Если тебе критично иметь такую строгую структуру имен и ты не можешь по каким-то причинам использовать селекторы и хочешь городить гигантские классы в html то БЭМ тебе необходим. А если ты еще имеешь на паре десятков страниц экземпляры одного блока который тебе надо менять только в одном (очень условно одном, если у тебя генерация из массива например то нифига не в одном) месте то PUG тебе тоже необходим)
В общем я бы не усложнял на твоем месте

Comments

[wakenbyWork]

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

От БЕМ отказываться глупо, он очень крутой, я верстку не по BEM вообще не воспринимаю.

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

Нет ничего хуже вложенных селекторов. В перспективе это просто разваливает проект, затыкаешь одну дырку и прорывает еще десяток. Отвратительный подход в основном для тех кто хочет срубить бабала по быстрому и свалить, либо для тех кто не знает ни одной методологии и не хочет понять их полезность.

[imko]

Виталий Першин, а каким образом он разваливает проект можно поконкретнее?

[imko]

Виталий Першин, вложенные селекторы вроде как изменение блока контекстом как раз.
Кстати кто-то хотел срубить на хабре бабла по-быстрому раз не написал модификатор

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

imko,
Вы сами ответили на оба свои вопроса. Но если хочется еще больше конкретики, то вот я писал статью в которой описывал проблему данного подхода.

[imko]

Виталий Першин, я скажу лучше придумывать как стили написать, а не как их супер-жестко структурировать и потом оргазмировать от гигантских классов, чтоб элементы не скакали как ошалевшие друг на друге)

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

imko,

я скажу лучше придумывать как стили написать, а не как их супер-жестко структурировать

Одно другому не мешает, а дополняет, тем самым улучшается качество кода и возможность длительной поддержки без костылей. Как правильнее верстать?

[imko]

Виталий Першин, в статье вижу говнокод, который превращен в нормальный с БЭМ

1. излишняя универсальность, стили не применятся там где они не нужны если селектить через родительский блок
   
2. мы же не дураки чтобы менять имена класов только в разметке да? а если мы меняем их в коде и тоже как умные люди пишем sass то все селекторы изменятся соответственно и все продолжит работать, насчет кривой стуктуры я поддержу)
   
3. что если мы захотим поместить то что предназначено для одного места в другое? мы сделали это зря)
   
4. это ошибка кодера а не методологии
   
5. в любом случае просто так очень редко переносится блок, а который в разных местах существует может быть и без БЭМа заложен нормально, собственно если элемент перенести то тоже все пойдет по одному месту, они не менее специфичны
   

.stickers {
	position: relative;

	.sticker {
		&.top {
			top: 0;
		}

		&.left {
			left: 0;
		}

		&.right {
			right: 0;
		}

		&.bottom {
			bottom: 0;
		}

		img {
			border: none;
			padding: 0;
		}
	}
}

не вижу проблем сделать так и уносить его потом куда угодно, кстати в моем случае у меня аж 9 позиций для стикера а не 4. А миллиард комбинаций вложенности элементов только все усложнит. Код CSS в любом случае будет потом оптимизирован и дублирование правил не повредит. Зато сразу понятно что border: none; padding: 0; только у картинки в стикере а не у любой картинки где угодно находящейся
мне кажется вы путатете (БЭМ ∈ структура) со (структура = БЭМ)

[imko]

Виталий Першин, если есть inline - block -inline последовательность как не обзови их хоть дважды бэмом, при переносе одного из блоков на место другого оно все сломается.
если есть марджины у блока а они есть почти всегда то тоже сломается при переносе и один переиспользуемый элемент придется допиливать созданием нескольких модификаторов или селекторами вложенности

[imko]

Виталий Першин, далеко идти не будем за примером) я просто поменял последовательность (даже не вложенность) элементов в комменте а все уже пошло по одному месту

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

imko,

не вижу проблем сделать так

Вы их видите, просто считаете это нормальным. Я ведь тоже много писал вложенными селекторами и прекрасно понимаю вашу логику, но я это уже прошел и мне было тяжело себя перепрограммировать, документация и примеры не дают того понимания, которые приходят с опытом. Я вам желаю не ограничиваться и развиваться дальше.

[imko]

Виталий Першин, звучит честно говоря бессмысленно совершенно