Описание

CSS-in-JS — это современный подход к стилизации веб-приложений. Он расширяет возможности CSS при помощи JavaScript и позволяет преодолеть ряд ограничений и проблем традиционных методов работы со стилями.

Необходимые знания: HTML, CSS, JavaScript и React. Тема курса разбирается на примере библиотеки styled-components.

Задача курса — дать глубокое понимание подхода CSS-in-JS и показать разные варианты его реализации.
После прохождения курса вы сможете осознанно выбирать и использовать инструменты для работы с CSS-in-JS, а также будете понимать, как эти инструменты устроены внутри.

Программа курса:

Раздел 1 Введение

Узнаем, что такое CSS-in-JS и почему он появился. Ознакомимся с основными идеями на практике по ходу стилизации небольшого компонента.
‍
— Что такое CSS-in-JS и почему он появился
‍
Практика
— Кейс: пошаговая демонстрация — разработка компонента кнопки
— Задание: разработка компонента кнопки
— Кейс: эталонное решение — разработка компонента кнопки
‍
— Тест по первому разделу

— Дополнительные материалы

Раздел 2 Глобальные стили

Начнем работу над проектами курса и подготовим базовые стили.

— Обзор демо-проекта
— Формирование глобальных стилей при помощи CSS-in-JS
— Кейс: подключение дизайн-токенов и ресетов стилей в проекте
‍
Практика
— Обзор учебного проекта
— Задание: подключение дизайн-токенов и ресетов стилей
— Кейс: эталонная реализация подключения дизайн-токенов и ресетов стилей в проекте

— Тест по второму разделу

Раздел 3 Компоненты

Продолжим работу над проектами курса и разработаем различные компоненты – простые и посложнее.

— Разработка компонентов в терминах CSS-in-JS

Типографика и иконки
— Кейс: пошаговая демонстрация — реализация компонентов для работы с типографикой и иконками
— Задание: разработка компонентов для работы с типографикой и иконками
— Кейс: эталонное решение — разработка компонентов для работы с типографикой и иконками

Кнопки
— Кейс: реализация «кнопочных» компонентов
— Задание: разработка «кнопочных» компонентов
— Кейс: эталонное решение — разработка «кнопочных» компонентов в проекте

Чекбокс и тоггл
— Кейс: реализация компонента чекбокса
— Задание: разработка компонента переключателя
— Кейс: эталонное решение — разработка компонента тоггла в проекте

Фильтр и поля форм
— Кейс: реализация компонента фильтра
— Задание: разработка полей форм
— Кейс: эталонное решение — разработка полей форм в проекте

Карточки
— Кейс: реализация «карточных» компонентов в проекте
— Задание: разработка «карточных» компонентов
— Кейс: эталонное решение — разработка «карточных» компонентов в проекте
‍
— Тест по третьему разделу

Раздел 4 Крупные разделы и страницы

Реализуем страницы для проектов курса.

— Стилизация крупных разделов и целых страниц при помощи CSS-in-JS

Хедер, футер и базовый лейаут
— Кейс: реализация компонентов хедера, футера и базового лейаута
— Задание: разработка компонентов шапки, подвала и базового лейаута
— Кейс: разработка компонентов хедера, футера и базового лейаута в проекте
‍
Главная страница
— Кейс: реализация главной страницы
— Задание: разработка главной страницы
— Кейс: разработка главной страницы в проекте
‍
Страница каталога товаров
— Кейс: реализация страницы каталога товаров в проекте
— Задание: разработка страницы каталога товаров
— Кейс: разработка страницы каталога товаров в проекте

— Тест по четвёртому разделу

Раздел 5 Темизация

Реализуем альтернативные темы для проектов курса.
‍
— Темизация приложения при помощи CSS-in-JS
— Кейс: пошаговая демонстрация — темизация в проекте

Практика‍
— Задание: темизация приложения
— Кейс: темизация в проекте, эталонное решение

— Обзор применяемых на курсе инструментов СSS-in-JS.

— Тест по пятому разделу

Раздел 6 Альтернативные реализации идей CSS-in-JS

Ознакомимся с новыми библиотеками для работы с CSS-in-JS и научимся выбирать наиболее подходящее под задачу решение, а также подведём итоги курса.
‍
— Дополнительные возможности и альтернативные реализации CSS-in-JS
— Кейс: дополнительные возможности библиотеки styled-components в проекте
— Кейс: альтернативные подходы к стилизации в терминах CSS-in-JS в проекте

Практика
— Задание: дополнительные возможности библиотеки styled-components
— Кейс: дополнительные возможности библиотеки styled-components в проекте

Итоги
— Как выбрать библиотеку для работы с CSS-in-JS?
— Минусы CSS-in-JS

— Итоговый тест

Дополнительные материалы
— Сравнение библиотек для работы с CSS-in-JS
— Сборник полезных материалов по теме CSS-in-JS