Atomic CSS и Tailwind: отличный стек для масштабируемой вёрстки | Валентин Ульянов #37
В этом выпуске мы поговорили с Валентином Ульяновым — software engineer из Р7. Разобрали, как сам язык CSS за последние годы превратился в полноценный инструмент для создания сложных интерфейсов — без необходимости подключать тяжеловесные фреймворки. Валентин объяснил, почему CSS сегодня — это уже не просто «оформление», а настоящая платформа, способная решать задачи логики, адаптивности и масштабируемости. Поговорили о современных возможностях языка: контейнерные запросы, каскадные слои, scoped-стили и многое другое. Обсудили, как эти инструменты влияют на производительность, упрощают архитектуру проектов и позволяют возвращаться к более чистому и понятному фронтенду. Этот выпуск будет полезен как тем, кто только начинает путь в интерфейсной разработке, так и опытным разработчикам, которые хотят переосмыслить свой стек и открыть для себя новые грани CSS. ✅ Подписывайтесь на канал «Организованное программирование» в Telegram: https://ttttt.me/orgprog – Список подкаст-платформ (Apple Podcast, Google Podcast, Spotify, Яндекс.Музыка и другие): https://podcast.ru/1734325321 – Смотреть в YouTube: https://youtu.be/mmmmllrf3ws Полезные ссылки: https://t.me/blog150 https://150.lv - сайт гостя https://github.com/mr150/mlut - open source проект - mlut. Инструмент для верстки с подходом Atomic CSS. https://habr.com/ru/articles/833712/ 00:00 Введение и анонс 00:55 Взрывное развитие: как браузеры прокачали CSS 03:43 Контейнерные запросы: новый уровень адаптивности 08:27 Псевдоселектор has: смотрим на родителя иначе 11:19 Сила переменных: CSS, который подстраивается под вас 14:08 Каскадные слои: упорядочиваем хаос в проектах 16:58 Гриды: станут ли они новой базой лейаута? 18:52 CSS как язык программирования? 21:41 Препроцессоры: жива ли эпоха Sass и Less? 23:33 Модульность и миксины: что даёт современный Sass 24:29 Автопрефиксы: прошлый век или всё ещё незаменимы? 27:21 Пять методов написания стилей: выберите свой путь 34:53 Почему CSS-модули так популярны? 35:50 Готовые библиотеки: благословение или проклятие? 38:40 PrimeReact + Bootstrap: секрет сочетания 41:31 Atomic CSS: почему все заговорили об этом? 44:23 Разбираемся на примерах: что такое атомарный подход 46:18 Рост HTML против снижения CSS: где золотая середина? 47:15 Порог вхождения: насколько тяжело освоить атомарные стили? 50:06 Сокращаем и оптимизируем: техники атомарного CSS 52:56 Алиасы: тайное оружие против простыней классов 55:48 Atomic CSS в реальных проектах: где подвох? 59:33 Обёртки над Tailwind: спасение для больших команд 01:02:22 Новая кастомизация в Tailwind 4 01:03:18 Готовые UI-киты: риск зависеть от чужого кода 01:04:57 Typed CSS - CSS-in-TS в $mol 01:09:00 JIT-движок и классические шаблонизаторы: сложности интеграции 01:11:49 Описание утилит в конфиге: новая гибкость mlut и Tailwind 01:14:40 Tailwind и mlut для сложных кейсов 01:16:33 Автокомплит и валидация: где взять эти фишки в Atomic CSS 01:20:21 Когда CSS не нужен вовсе 01:22:17 Нужно ли делить фронтенд и верстку? 01:24:11 Веб-компоненты: жизнь без фреймворков? 01:34:29 1.5 миллиона строк кода: как живут большие продукты Atomic CSS и Tailwind: отличный стек для масштабируемой вёрстки | Валентин Ульянов #37
В этом выпуске мы поговорили с Валентином Ульяновым — software engineer из Р7. Разобрали, как сам язык CSS за последние годы превратился в полноценный инструмент для создания сложных интерфейсов — без необходимости подключать тяжеловесные фреймворки. Валентин объяснил, почему CSS сегодня — это уже не просто «оформление», а настоящая платформа, способная решать задачи логики, адаптивности и масштабируемости. Поговорили о современных возможностях языка: контейнерные запросы, каскадные слои, scoped-стили и многое другое. Обсудили, как эти инструменты влияют на производительность, упрощают архитектуру проектов и позволяют возвращаться к более чистому и понятному фронтенду. Этот выпуск будет полезен как тем, кто только начинает путь в интерфейсной разработке, так и опытным разработчикам, которые хотят переосмыслить свой стек и открыть для себя новые грани CSS. ✅ Подписывайтесь на канал «Организованное программирование» в Telegram: https://ttttt.me/orgprog – Список подкаст-платформ (Apple Podcast, Google Podcast, Spotify, Яндекс.Музыка и другие): https://podcast.ru/1734325321 – Смотреть в YouTube: https://youtu.be/mmmmllrf3ws Полезные ссылки: https://t.me/blog150 https://150.lv - сайт гостя https://github.com/mr150/mlut - open source проект - mlut. Инструмент для верстки с подходом Atomic CSS. https://habr.com/ru/articles/833712/ 00:00 Введение и анонс 00:55 Взрывное развитие: как браузеры прокачали CSS 03:43 Контейнерные запросы: новый уровень адаптивности 08:27 Псевдоселектор has: смотрим на родителя иначе 11:19 Сила переменных: CSS, который подстраивается под вас 14:08 Каскадные слои: упорядочиваем хаос в проектах 16:58 Гриды: станут ли они новой базой лейаута? 18:52 CSS как язык программирования? 21:41 Препроцессоры: жива ли эпоха Sass и Less? 23:33 Модульность и миксины: что даёт современный Sass 24:29 Автопрефиксы: прошлый век или всё ещё незаменимы? 27:21 Пять методов написания стилей: выберите свой путь 34:53 Почему CSS-модули так популярны? 35:50 Готовые библиотеки: благословение или проклятие? 38:40 PrimeReact + Bootstrap: секрет сочетания 41:31 Atomic CSS: почему все заговорили об этом? 44:23 Разбираемся на примерах: что такое атомарный подход 46:18 Рост HTML против снижения CSS: где золотая середина? 47:15 Порог вхождения: насколько тяжело освоить атомарные стили? 50:06 Сокращаем и оптимизируем: техники атомарного CSS 52:56 Алиасы: тайное оружие против простыней классов 55:48 Atomic CSS в реальных проектах: где подвох? 59:33 Обёртки над Tailwind: спасение для больших команд 01:02:22 Новая кастомизация в Tailwind 4 01:03:18 Готовые UI-киты: риск зависеть от чужого кода 01:04:57 Typed CSS - CSS-in-TS в $mol 01:09:00 JIT-движок и классические шаблонизаторы: сложности интеграции 01:11:49 Описание утилит в конфиге: новая гибкость mlut и Tailwind 01:14:40 Tailwind и mlut для сложных кейсов 01:16:33 Автокомплит и валидация: где взять эти фишки в Atomic CSS 01:20:21 Когда CSS не нужен вовсе 01:22:17 Нужно ли делить фронтенд и верстку? 01:24:11 Веб-компоненты: жизнь без фреймворков? 01:34:29 1.5 миллиона строк кода: как живут большие продукты Atomic CSS и Tailwind: отличный стек для масштабируемой вёрстки | Валентин Ульянов #37