CSS
Тема дорожной карты · Frontend разработчик
CSS (Cascading Style Sheets) — стандартный язык описания визуального оформления HTML5-документов, управляющий макетом, цветом, типографикой, отступами и анимациями на веб-страницах. CSS работает посредством применения правил — состоящих из селектора и блока объявлений с парами свойство: значение — к HTML-элементам; алгоритм каскадирования и специфичности определяет, какое правило побеждает, когда несколько правил нацелены на один и тот же элемент. Базовые свойства CSS3 — display, position, margin, padding, color, font-size и background — составляют словарь, который каждый frontend-разработчик должен освоить, прежде чем переходить к системам компоновки, таким как Flexbox и CSS Grid. Современная разработка на CSS использует методологии вроде BEM, утилитарные фреймворки как Tailwind CSS и препроцессоры вроде Sass для поддержания масштабируемых таблиц стилей.
Как это работает
CSS стилизует DOM через селекторы (какие элементы), свойства (что менять), каскад (правила приоритета + наследования: inline > id > class > tag, !important перебивает всё). Layout-движки: normal flow, flexbox (1D), grid (2D), float (legacy). Box model: content + padding + border + margin. Современные фичи: custom properties (--var), @layer, container queries, :has(). Specificity + каскад — главный источник багов "почему не применяется?".
Когда применять
Flexbox — для 1D-раскладок (ряд или колонка элементов); Grid — для 2D-раскладок (ряды + колонки). Custom properties — для темизации + консистентности (--primary-color: #007aff). @layer — для организации specificity в больших проектах. Tailwind/UnoCSS или ванильный CSS — на вкус команды; оба работают; важна консистентность. Mobile-first media queries (min-width: не max-width:) композируются лучше.
Типичные ошибки
Ловушки CSS: !important повсюду ("фикс, который всегда работает" — пока два !important не столкнутся, и исходный баг возвращается умноженным); pixel-perfect раскладки ломаются на другом шрифте/размере (используйте em/rem для типографии); войны z-index, когда реальный фикс — рефакторинг stacking context; стили в JS inline (lock-in, нет темизации). Прочтите MDN про каскад один раз.