Выбор ответа Middle Архитектура CSS обновлено
Слои против специфичности
Вопрос
Какой отступ получит кнопка <button id="main" class="btn p-0">?
@layer components, utilities;
@layer components {
#main.btn { padding: 12px; }
}
@layer utilities {
.p-0 { padding: 0; }
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: 0: utilities объявлен позже, специфичность между слоями не важна. Каскад сначала сравнивает слои и только внутри одного слоя смотрит на специфичность. utilities упомянут в @layer components, utilities; вторым, значит он сильнее, и padding: 0 побеждает, хотя main.btn специфичнее.
Варианты ответа
- 12px: селектор с id специфичнее, а слои это не отменяют
- 0:
utilitiesобъявлен позже, специфичность между слоями не важнаправильный ответ - 12px: правило из
componentsстоит в файле выше и применится первым - Браузер проигнорирует оба правила из-за конфликта слоёв и даст padding по умолчанию
Разбор
Каскад сначала сравнивает слои и только внутри одного слоя смотрит на специфичность. utilities упомянут в @layer components, utilities; вторым, значит он сильнее, и padding: 0 побеждает, хотя #main.btn специфичнее. Порядок строк в файле решал бы только при равных слое и специфичности. Конфликт слоёв ничего не отключает.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.