PassFront
  1. PassFront
  2. База знаний
  3. Селекторы и специфичность

Как будет выглядеть Workflow поиска селектора при баге в CSS коде?

Селекторы и специфичность

Если стиль применяется не так, как ожидалось, ищут, какой селектор победил и почему.

Пошагово

  1. Выбрать элемент в DevTools (Elements → Inspect).
  2. Вкладка Styles — все подходящие правила в порядке приоритета; перечёркнутые свойства проиграли.
  3. Вкладка Computed — итоговое значение свойства и ссылка на правило, откуда оно взялось.
  4. Найти правило в коде — по имени файла и строке (с source maps — в исходниках SCSS или модулях).
  5. Понять причину:
  • выше специфичность у другого правила;
  • другое правило объявлено позже;
  • !important или инлайн-стиль;
  • другой @layer;
  • селектор вообще не совпадает (опечатка, другая вложенность);
  • свойство не работает в этом контексте (z-index без позиционирования).
  1. Исправить в корне — понизить специфичность или переупорядочить правила, а не добавлять !important.
/* было: проигрывает .header .nav a */
.nav-link { color: red; }
/* стало: тот же уровень, но позже в коде */

Коротко для собеседования

Inspect → Styles (кто перечёркнут) и Computed (откуда значение) → найти правило по source maps → понять причину (специфичность, порядок, слой, !important) → исправить без гонки специфичности.

Подробнее: Chrome DevTools — CSS

Другие вопросы раздела