Система организации стилей на 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: https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/components/base?ref_type=heads 〰️ Расширение Alternate File для VSCode: https://marketplace.visualstudio.com/items?itemName=will-wow.vscode-alternate-file 〰️ Плагин stylelint-order: https://github.com/hudochenkov/stylelint-order 〰️ Библиотека миксинов more-sass: https://morevm.github.io/more-sass/ru/ 〰️ Про миксины и функции в нативном CSS: https://css.oddbird.net/sasslike/mixins-functions/ 👨💻Автор: 〰️ Github: https://github.com/MorevM 〰️ Telegram: https://t.me/max_seainside

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