Система организации стилей на frontend-проекте. Как правильно совмещать BEM и SCSS?

✏️ Рассказываю о том, как выстроить работу со стилями при помощи компонентного подхода, методологии BEM и SCSS так, чтобы это не доставляло проблем.
Рассказываю о достоинствах SCSS по сравнению с обычным CSS и о том, почему технология всё ещё актуальна, а также как из неё выжать максимум пользы.
🔴 Таймлайн:
▶ 00:00 | Вступление, что к чему
▶ 00:57 | Перечисление ингредиентов нашей организации
▶ 01:31 | О компонентном подходе
▶ 01:56 | Самый важный совет о расположении стилевых файлов и структуре компонентов
▶ 02:50 | А как структурировать по-другому и зачем?
▶ 04:40 | Про однофайловые компоненты и отдельные файлы
▶ 05:52 | Чуть-чуть про расширение Alternate File
▶ 06:41 | Про SASS-нестинг и его искусственное ограничение
▶ 07:21 | Что не так с SASS-нестингом? Сравнение процесса при работе с SCSS и CSS. Конкретный пример неправильной организации.
▶ 11:29 | Как сделать правильный SASS-нестинг при использовании БЭМ
▶ 12:53 | Про то, как SASS добавляет уверенности и контроля
▶ 18:06 | Вступление про media-запросы
▶ 19:05 | 4 способа работы с media-запросами
▶ 21:55 | Правильный вариант работы с media-запросами
▶ 22:37 | Пара исключений из общего правила
▶ 25:10 | Внешние модификации элемента - внутри самого элемента
▶ 27:30 | Костыль ( :( ) для псевдоэлементов
▶ 29:20 | Про дополнительные инструменты, доступные в SASS
▶ 30:08 | Миксины в SASS
▶ 34:09 | Отступление про вертикальное пространство и лаконичность
▶ 34:47 | Про функции и миксины в нативном CSS
▶ 35:17 | Недостатки миксинов
▶ 37:37 | SASS Variables vs CSS Custom Properties
▶ 39:25 | Итоги материала, повторение ключевых вещей
▶ 41:11 | Призыв к действию и беда с диваном :)
📚 Ссылки из видео:
〰️ Gitlab UI: gitlab.com/git...
〰️ Расширение Alternate File для VSCode: marketplace.vi...
〰️ Плагин stylelint-order: github.com/hud...
〰️ Библиотека миксинов more-sass: morevm.github....
〰️ Про миксины и функции в нативном CSS: css.oddbird.ne...
👨💻Автор:
〰️ Github: github.com/MorevM
〰️ Telegram: t.me/max_seain...

[@ГришаВеденский]

Заинтересовали с первой минуты) Продолжайте, буду ждать видео. Странно, что просмотров и комментов мало. Знаю что в ютуб среде популярен ютифай

[@КириллВологин-г5ф]

Это капитально перевернуло мой мир!

[@pierre9368]

BEM, ты с дуба рухнул? Оно мёртворождённое!

[@MorevOnline]

Классический BEM-стек (тот который ru.bem.info/technologies/classic/ ) - согласен.
BEM как CSS-методология живее всех живых и внятных альтернатив не имеет, только узкие вариации на тему.
Что уродилось без пороков и даже дышит, на твой взгляд? :)

[@polinakogan4394]

чел, ну ты 🤡