CSS: стилизация и layout

CSS управляет внешним видом HTML-элементов. Бэкенд-разработчику достаточно понимать базовые концепции, чтобы не ломать вёрстку при изменении шаблонов и разбираться в ответах фронтенд-коллег.

Почему это важно: Когда вы меняете серверный шаблон и добавляете новый элемент, нужно понимать, как CSS-классы влияют на его отображение. Без этого вы рискуете сломать layout или потратить часы на отладку визуальных багов.

Главная идея

CSS применяет стили к HTML-элементам через селекторы. Каскад определяет приоритет правил, а flexbox и grid позволяют создавать адаптивные макеты без хаков.

Как это выглядит на практике

Браузер загружает HTML и находит ссылки на CSS-файлы
CSS-файлы загружаются и парсятся в набор правил
Каждое правило сопоставляется с элементами через селекторы
При конфликте побеждает правило с более высокой специфичностью
Браузер вычисляет итоговые стили каждого элемента
Элементы раскладываются по странице согласно модели layout (flow, flex, grid)

Примеры кода

Базовые селекторы и специфичность

/* Тег — специфичность 0-0-1 */
p { color: gray; }

/* Класс — специфичность 0-1-0 */
.error { color: red; }

/* ID — специфичность 1-0-0 */
#main-title { color: blue; }

/* Комбинация */
.card .title { font-weight: bold; }

/* Для <p class="error"> цвет будет red,
   потому что класс > тег по специфичности */

Flexbox — основной инструмент layout

.nav {
  display: flex;
  justify-content: space-between; /* равномерно по горизонтали */
  align-items: center;            /* центр по вертикали */
  gap: 1rem;                      /* отступ между элементами */
}

.card-grid {
  display: flex;
  flex-wrap: wrap;                /* перенос на новую строку */
  gap: 1.5rem;
}

.card-grid > .card {
  flex: 1 1 300px;               /* минимум 300px, растёт равномерно */
}

Что происходит под капотом

Каскад: стили из разных источников (браузер, автор, пользователь) объединяются по правилам приоритета
Специфичность: inline > ID > class > tag — чем точнее селектор, тем выше приоритет
Box model: каждый элемент — прямоугольник с content, padding, border и margin
Flexbox решает 90% задач layout — выравнивание, распределение и адаптивность
rem/em — относительные единицы, которые масштабируются с размером шрифта

Типичные ошибки и заблуждения

«Нужно знать весь CSS» — бэкендеру достаточно селекторов, box model, flexbox и утилитарных фреймворков вроде Tailwind
«!important решает проблемы» — на самом деле создаёт новые, ломая каскад и усложняя поддержку
«CSS не влияет на производительность» — тяжёлые анимации и сложные селекторы могут замедлить рендеринг

Ключевые выводы

Селекторы выбирают элементы, специфичность определяет приоритет при конфликтах
Box model: content + padding + border + margin = размер элемента
Flexbox — основной инструмент для создания адаптивных макетов

Термины урока

{:term=>"Специфичность", :definition=>"Числовой вес CSS-селектора, определяющий приоритет при конфликте правил (inline > id > class > tag)"}

{:term=>"Box model", :definition=>"Модель, где каждый элемент — прямоугольник из content, padding, border и margin"}

{:term=>"Flexbox", :definition=>"CSS-модель layout для одномерного выравнивания элементов (строка или колонка)"}

Связь с работой backend-разработчика

Когда вы работаете с серверными шаблонами и утилитарными CSS-фреймворками (Tailwind, Bootstrap), понимание селекторов и flexbox помогает правильно добавлять классы, не ломать существующий layout и эффективнее общаться с фронтенд-командой.

Мини-разбор реальной ситуации

Бэкенд-разработчик добавил новое поле в форму профиля. На мобильных устройствах форма стала вылезать за экран. Причина: родительский контейнер использовал flex без flex-wrap. Добавление flex-wrap: wrap в класс контейнера решило проблему — теперь поля переносятся на новую строку на узких экранах.

Что запомнить

Селекторы: .класс, #id, тег, .родитель .потомок
Flexbox: display: flex + justify-content + align-items решает большинство задач layout
Box-sizing: border-box — всегда включайте, чтобы padding не раздувал элементы

Итог

CSS определяет внешний вид страницы. Бэкендеру важно понимать селекторы, box model и flexbox — этого достаточно, чтобы работать с шаблонами и утилитарными фреймворками, не ломая вёрстку.