Селекторы и специфичность
Тема дорожной карты · Frontend разработчик
CSS-селекторы — это паттерны, используемые для выбора HTML-элементов и применения к ним блоков объявлений CSS, что составляет основной механизм работы любой таблицы стилей. Селекторы варьируются от простых — тег (h1), класс (.card), идентификатор (#header) — до сложных комбинаторов: потомок ( ), дочерний (>), соседний (+) и общий сиблинг (~). CSS3 ввёл мощные псевдоклассы :hover, :focus, :nth-child(), :not() и :is(), а также псевдоэлементы ::before и ::after, дающие frontend-разработчикам детальный контроль над стилизацией элементов по состоянию и позиции. Понимание специфичности CSS — весового расчёта из инлайн-стилей, ID, классов и тег-селекторов — критически важно для отладки конфликтов каскада, а инструменты ESLint и stylelint помогают соблюдать единые соглашения по селекторам в кодовой базе.
Как это работает
Селекторы и специфичность стилизует 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:) композируются лучше.
Типичные ошибки
Ловушки Селекторы и специфичность: !important повсюду ("фикс, который всегда работает" — пока два !important не столкнутся, и исходный баг возвращается умноженным); pixel-perfect раскладки ломаются на другом шрифте/размере (используйте em/rem для типографии); войны z-index, когда реальный фикс — рефакторинг stacking context; стили в JS inline (lock-in, нет темизации). Прочтите MDN про каскад один раз.