Как ускорить написание бэм классов?

Question

[Андрей Зернов]

Попался мне на доработку боевой проект от какого то крутого разработчика. Проект построен в связке gulp+jade+scss. Что мне бросилось в глаза - длиннющие бэм классы в jade и даже в scss файлах, причем без вложенностей и амперсандов!
в jade:

p.paragraph.paragraph_align_center.paragraph_size_l.

в scss:

.introductory-block__paragraph {
}
.introductory-block__text_ar{
}

Очень сомнительно, что все это набиралось вручную. Какие есть способы быстрого набора классов?
Для верстки я использую ST3. Желательно найти решение под него. Плагин AllAutocomplete как то не очень то помогает. Возможно его как то настроить надо..
Но если IDE легко решают такие проблемы, тогда мне есть смысл попробовать их..

Comments

[alvvi]

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

[Андрей Зернов]

Илья Ростопка: меня интересует рабочее решение, которое сейчас в тренде. к сожалению, я самоучка и на работе меня тоже учить некому. а в интернете сами понимаете - в основном старье. и если с scss еще можно разобраться - плагин TAG + использовать вложенности, то когда увидел, что человек так фигачит в jade - это меня навело на мысль, что возможно я упускаю что то важное.

Answer 1

[alvvi]

Решения для Pug, которое сам использую: bemto.

Миксины для sass есть тут, но мне это кажется слегка излишним.

Проще этого только использовать весь БЭМ-стек.

Comments

[Андрей Зернов]

т.е. это можно прямо в pug использовать? спасибо, сейчас почитаю на своем деревянном английском)

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

[alvvi]

Андрей Зернов: да, это просто набор миксинов по сути.

Раскидывание нужно делегировать сборщикам типа gulp'a.

[Андрей Зернов]

Илья Ростопка: спасибо, принцип понял. не радует только, что итоговые классы только после компиляции в html получаются. хотелось бы их видеть именно в Pug, в т.ч., чтоб потом не заморачиваться с экспортом классов в sass. теоретически можно из html их вывод настроить? я с gulp пока что на Вы...

[alvvi]

Андрей Зернов: зависит от того, куда и зачем вы хотите их выводить. Я sass ручками пишу, но с учетом PostHTML, это не проблема.

[Андрей Зернов]

Илья Ростопка: да, что то туплю. все, разобрался) ручками писать не охота. лень - двигатель прогресса :)