Какие минусы использования универсального селектора * с box-sizing: border-box в CSS?
Что проверяют
Отличаете ли вы реальные минусы популярного сброса от мифов. Правило *, *::before, *::after { box-sizing: border-box; } стоит почти в каждом проекте, и интервьюер хочет услышать не «не используйте», а где оно действительно подводит. Следом часто спрашивают, чем border-box отличается от content-box.
Как отвечать
Сначала суть: по умолчанию width задаёт ширину контента, и padding с border прибавляются сверху. С border-box они входят в заданную ширину, поэтому width: 50% с отступами не ломает сетку. То же делают modern-normalize и Tailwind Preflight. Реальные минусы:
- чужие виджеты: сторонний код, рассчитанный на
content-box(старые плагины, встраиваемые карты, календари), начинает съезжать, потому что правило бьёт по всем его элементам; - забытые псевдоэлементы:
*не выбирает::beforeи::after, без них иконки и декоративные элементы считаются по другой модели; - жёсткость: при записи через
*вернутьcontent-boxвиджету можно только отдельным правилом на него и всех потомков. Удобнее вариант с наследованием:html { box-sizing: border-box; }и*, *::before, *::after { box-sizing: inherit; }, тогда контейнеру достаточно поставитьcontent-box; - shadow DOM: глобальные стили в теневое дерево не проникают, веб-компоненты живут по своим правилам, и модель коробки внутри и снаружи расходится;
- неочевидная математика: если padding и border больше заданной ширины, элемент всё равно станет шире, контент просто сожмётся до нуля.
min-width,max-widthиflex-basisтоже считаются поborder-box.
Где спотыкаются
Говорят, что * тормозит. Браузер сопоставляет селекторы справа налево, универсальный селектор проверяется мгновенно, на реальных страницах разницы не измерить.
Утверждают, что правило трудно переопределить. Специфичность * нулевая, любой класс её перебивает.
Предлагают отказаться от сброса и расставлять border-box точечно. Это возвращает ручные вычисления вроде calc(50% - 2rem) и противоречит тому, как устроены современные CSS-сбросы.