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

Workflow поиска селектора при баге в CSS

Это важный практический вопрос, который показывает, как системно подходить к отладке стилей. Когда что-то выглядит неправильно, я использую специфический алгоритм поиска проблемы.

Шаг 1: Определение области проблемы

Сначала локализую, что именно сломано:

• Открываю DevTools (F12)
• Инспектирую элемент (Ctrl+Shift+C)
• Вижу в Inspector точный DOM и применённые стили
• Отмечу: какой элемент имеет проблему, какой стиль неправильный

<!-- Например, кнопка не имеет нужного цвета -->
<button class="btn btn-primary">Click me</button>

Шаг 2: Проверка специфичности и каскада

В DevTools на правой панели вижу все применённые стили, отсортированные по специфичности:

Может быть несколько сценариев:

1. Стиль переопределён другим правилом с выше специфичностью

   • Вижу зачёркнутое правило в DevTools
   • Проверяю, откуда пришло переопределение
   • Либо удаляю конфликтующее правило, либо увеличиваю специфичность нужного

2. Селектор просто не срабатывает

   • Стиль вообще не применён (не видно в DevTools)
   • Проверяю, правильно ли написан селектор

3. Стиль применён, но браузер не поддерживает свойство

   • Видно, но помечено как "не поддерживается"
   • Добавляю fallback или префиксы

Шаг 3: Проверка селектора

Если селектор не срабатывает, проверяю:

Синтаксис селектора:

/* Неправильно */
.btn btn-primary { } /* Пробел означает потомок */
.btn #btn-primary { } /* # используется для ID, не для класса */

/* Правильно */
.btn.btn-primary { } /* Комбинированный селектор классов */
.btn.active { } /* Селектор с состоянием */

Существование класса в HTML:

<!-- CSS ищет .btn-primary, а в HTML .btn_primary -->
<button class="btn_primary">Не сработает</button>

<!-- Правильно -->
<button class="btn btn-primary">Работает</button>

Область видимости (в CSS-in-JS или Shadow DOM):

// Если используем CSS Modules или scoped styles
import styles from './Button.module.css';

// Селектор должен быть в том же файле
<button className={styles.btnPrimary}>

Шаг 4: Проверка Media Queries и состояний

Стили могут быть завязаны на условия:

@media (max-width: 768px) {
  .btn {
    padding: 8px 12px; /* В мобильной версии другой паддинг */
  }
}

Проверяю:

• Размер окна браузера (может не совпадать с media query)
• Состояние :hover, :focus, :active
• Состояние :disabled для input/button
• Pseudo-элементы ::before, ::after

Шаг 5: Проверка на конфликты

/* Может быть глобальный стиль, который переопределяет наш */
button {
  background: gray; /* Очень общий селектор */
}

.btn-primary {
  background: blue; /* Более специфичный, но может потеряться */
}

Решение: Увеличиваю специфичность:

button.btn-primary { /* Более специфичный селектор */
  background: blue;
}

Шаг 6: Проверка наследования

Некоторые свойства наследуются, другие — нет:

.parent {
  color: red; /* Наследуется */
  border: 1px solid black; /* НЕ наследуется */
}

.child {
  /* color будет красный автоматически */
  /* border НЕ будет, нужно задать явно */
}

Шаг 7: Проверка браузерных стилей по умолчанию

Браузеры имеют встроенные стили для элементов:

<input /> <!-- Браузер по умолчанию дает input границу, паддинг и т.д. -->

Проверяю в DevTools, какие стили от браузера, и переопределяю нужные.

Практический пример отладки

Сценарий: Кнопка не меняет цвет при :hover

.btn {
  background: white;
}

.btn:hover {
  background: yellow;
}

Отладка:

1. Инспектирую кнопку в DevTools
2. Вижу, что .btn { background: white; } применён
3. Проверяю, видно ли правило .btn:hover { ... } в DevTools
   • Если оно зачёркнуто — есть конфликт
   • Если его нет вообще — селектор не найден
4. Наведу на кнопку и в DevTools нажму :hover флаг (если DevTools это позволяет)
5. Если стиль не применился — проверю синтаксис или специфичность

Инструменты для отладки

1. Chrome DevTools — основной инструмент

   • Elements/Inspector tab
   • Правая панель со стилями
   • Compute styles (все стили целиком)

2. Lighthouse — проверка производительности и доступности

3. CSS Overflow — находит неиспользуемые стили

4. Логирование в консоль:

const btn = document.querySelector('.btn');
console.log(window.getComputedStyle(btn));
// Вывидит все итоговые стили на элементе

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

При баге в CSS сначала инспектирую элемент в DevTools, проверяю, какие стили применены, какие переопределены. Затем систематически проверяю специфичность, синтаксис селектора, наличие класса в HTML и браузерные стили по умолчанию. Обычно решение находится в одном из этих пунктов.