🗺️ CSS

Стилизация, layout, анимации, адаптив.

С чего начать

1. Что такое CSS
2. Блочная модель
3. Каскад и специфичность
4. Единицы измерения
5. display -- block, inline, inline-block, none

Основы

• Что такое CSS · Блочная модель · Каскад и специфичность · Наследование
• Единицы измерения · CSS переменные
• box-sizing -- content-box vs border-box · width и height · display -- block, inline, inline-block, none

Layout

Flexbox → _MOC Flexbox

• Основы: Основы Flexbox · CSS Flexbox · Flex-контейнер и flex-элементы · Главная и поперечная оси
• Свойства контейнера: display flex и inline-flex · Свойства контейнера · gap -- отступы между элементами
• Свойства элементов: Свойства элементов · align-self -- индивидуальное выравнивание · order -- порядок элементов
• Выравнивание: justify-items и align-items · justify-self и align-self · place-items и place-content · Как Flexbox рассчитывает размеры · min-width 0 и overflow в Flexbox · Flex и auto margins
• Паттерны: Flexbox -- центрирование элементов · Flexbox -- Holy Grail Layout · Flexbox -- sticky footer · Flexbox -- карточная раскладка · Flexbox -- навигационная панель · Flexbox -- форма с инлайн-полями · Flexbox -- практические паттерны · Flexbox -- распространённые баги и фиксы · Flexbox -- доступность и порядок · Flexbox внутри Grid

Grid → _MOC Grid

• Основы: display grid и inline-grid · Grid-контейнер и grid-элементы · Строки, колонки и ячейки · Явная и неявная сетка · Flexbox vs Grid · Практика Grid
• Свойства: Grid template · grid-template-areas -- именованные области · grid-column и grid-row · grid-area -- сокращённое свойство · Grid auto flow · grid-auto-flow -- направление заполнения · grid-auto-rows и grid-auto-columns · grid-gap и области (areas) · Выравнивание в Grid
• Треки и линии: Единица fr -- дробные доли · repeat() -- повторение треков · minmax() -- границы размеров · Именованные grid-линии · Grid-линии и grid-области · Наложение элементов в Grid · Subgrid
• Паттерны: Grid -- макет страницы (page layout) · Grid -- Holy Grail Layout · Grid -- карточная сетка · Grid -- галерея изображений · Grid -- дашборд · Grid и aspect-ratio · Grid и media queries · Grid -- доступность и порядок элементов · Grid -- распространённые ошибки

Позиционирование

• Position · Display · Float и clear · Overflow · Margin и Padding

Адаптивность

• Responsive Design -- принципы · Mobile-first подход
• Media queries · Viewport units · Адаптивная типографика
• Responsive Grid без media queries · Responsive images -- CSS подходы
• fluid: min() max() clamp() · calc()

Анимации

• transition -- плавные переходы · transform -- rotate, scale, translate
• Keyframes · Практика анимаций
• Scroll-driven animations

Псевдоклассы и элементы

• Псевдоклассы · Псевдоэлементы · Функциональные селекторы
• has() селектор

Современный CSS

• Container queries · has() селектор · CSS Layers (@layer) · CSS Nesting
• @supports -- feature queries · Логические свойства · Anchor positioning
• Color functions · aspect-ratio · Scroll-driven animations

Текст и шрифты

• Шрифты · Подключение шрифтов · Свойства текста · Print Styles

Цвета и фоны

• Цвета в CSS · Color functions · Opacity и прозрачность
• Фоны · Градиенты

Границы и тени

• Border · Border-radius · Outline

Фильтры и эффекты

• filter · backdrop-filter · mix-blend-mode · CSS Shapes и clip-path

Функции

• Блочная область видимости -- let и const · calc() · min() max() clamp() · attr() · url()

Интерактивность

• cursor · pointer-events · user-select
• scroll-behavior · scroll-snap

Колонки и таблицы

• Multi-column layout · Стилизация таблиц

Методологии

• BEM · CSS Modules · Sass

Счётчики

• CSS Counters

SVG

• SVG -- основы встраивания · fill · stroke

Связанные

• _MOC HTML · _MOC SPA