Правило и отдельное свойство
Селектор определяет, к каким элементам относится правило, а объявления задают свойства и значения. Несколько правил могут совпасть с одним элементом. При этом браузер выбирает итог отдельно для каждого свойства, а не обязательно целый блок целиком. Например, одно правило задаёт цвет, другое — отступ, третье — размер текста. Они могут одновременно участвовать в результате. Если цвет изменился, это не значит, что остальные свойства первого правила тоже перестали действовать. Такое разделение помогает читать панель вычисленных стилей.
Каскад и специфичность
При конфликте учитываются разные уровни каскада, включая происхождение, важность и слои. Специфичность селектора — важная часть выбора, но не единственное правило. Поэтому утверждение «самый длинный селектор всегда побеждает» неточно. При прочих равных более позднее объявление может определять результат. Однако сначала нужно проверить, действительно ли условия сравнения одинаковы. Не добавляйте важность и новые вложенности автоматически. Лучше понять, какое правило применяется и почему. Небольшая предсказуемая система классов обычно легче поддерживается, чем цепочка взаимных переопределений.
Наследование и размеры
Некоторые свойства передаются от родителя, а другие обычно нет. Цвет текста часто наследуется, а внешние отступы — нет. Для конкретного свойства это проверяют по документации. Отсутствие собственного объявления не означает, что элемент будет выглядеть одинаково во всех окружениях. Блочная модель различает содержимое, внутренние отступы, границу и внешние отступы. Итоговая занимаемая ширина зависит также от box-sizing. Если к заданной ширине неожиданно добавились отступы, стоит проверить именно модель расчёта. Изменение случайного числа может скрыть причину, но сломать другой размер экрана.
Отладка и устойчивость
Инструменты разработчика показывают совпавшие правила, отменённые объявления и вычисленные значения. Выберите конкретный элемент и временно отключите одно свойство, чтобы увидеть его вклад. Такой эксперимент информативнее массовой правки сразу нескольких файлов. Проверяйте длинный текст, узкий экран, увеличение масштаба и навигацию без мыши. Внешне удачный блок может оказаться неудобным, если фиксированная высота обрезает содержание. Цвет не должен быть единственным способом передать важный статус. Хороший CSS поддерживает разные условия, а не только один красивый снимок страницы.
Попробуйте на практике
Разберите условную карточку на бумаге или в уже доступном учебном проекте.
- Задайте содержимому ширину 200 пикселей, внутренние отступы по 20 и границу по 1 пикселю.
- Для модели content-box вычислите внешнюю ширину без margin.
- Сравните с border-box при той же заданной ширине.
- Опишите два правила цвета одинакового уровня и специфичности, различающиеся порядком.
- Запишите, что проверить в инструментах разработчика, если результат не совпал с ожиданием.
Как проверить результат. Для content-box получается 242 пикселя, для border-box общая ширина остаётся 200. Выбор цвета объясняется условиями каскада, а не длиной текста селектора.
Частые вопросы
Нужно ли использовать важность при каждой ошибке?
Нет. Сначала выясняют причину конфликта. Автоматическое усиление правил усложняет дальнейшую поддержку.
Все свойства наследуются?
Нет. Поведение зависит от свойства. Его проверяют отдельно, не предполагая передачу всех настроек родителя.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.