Как использовать box-sizing: border-box кроме *?

box-sizing: border-box без универсального селектора *

Хотя использование * { box-sizing: border-box; } — очень популярный подход, существует несколько альтернатив для более точного контроля, которые могут быть лучше в некоторых ситуациях.

Проблема с * селектором

/* Работает, но влияет на ВСЕ элементы, включая ::before и ::after */
* {
  box-sizing: border-box;
}

/* Может вызвать неожиданное поведение с некоторыми библиотеками */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Вариант 1: Наследование от html

/* Самый рекомендуемый подход */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Плюсы:

• Явное наследование через inherit
• Можно переопределить для конкретных элементов
• Производительнее чем * с border-box
• Работает со всеми псевдоэлементами

Практический пример:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Для форм можно переопределить если нужно */
input[type="search"],
input[type="number"] {
  box-sizing: content-box; /* Переопределяем если нужно */
}

Вариант 2: Селективный подход

/* Применяем только к основным структурным элементам */
html,
body,
main,
article,
section,
nav,
header,
footer,
div,
p,
span {
  box-sizing: border-box;
}

/* Для медиа элементов оставляем content-box */
img,
video,
iframe {
  box-sizing: content-box;
}

Вариант 3: BEM/компонентный подход

/* В Tailwind или CSS-in-JS подходе */
.component {
  box-sizing: border-box;
}

.component > * {
  box-sizing: border-box;
}

.component img {
  box-sizing: content-box; /* Исключение для изображений */
}

Вариант 4: CSS Reset библиотека

/* Используя modern-normalize или подобное */
/* Эти библиотеки уже содержат оптимальные настройки */
@import "modern-normalize";

/* Дополнить при необходимости */
::-webkit-input-placeholder {
  box-sizing: border-box;
}

Пример в React/Next.js проекте

/* styles/globals.css */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

/* Исключения при необходимости */
input[type="search"] {
  box-sizing: content-box;
}

Вариант 5: Tailwind CSS подход

<!-- В tailwind.config.ts уже есть оптимальная конфигурация -->

// tailwind.config.ts
export default {
  theme: {
    extend: {}
  },
  // Tailwind уже применяет border-box для всех элементов
}

/* Генерируемый Tailwind CSS включает: */
*,
::before,
::after {
  border-color: rgb(229, 231, 235);
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
}

Сравнение подходов

Почему inherit лучше

/* Правильный способ */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Теперь можно легко переопределить для компонента */
.modal-dialog {
  box-sizing: content-box; /* Применится ко всем потомкам */
}

.modal-dialog * {
  box-sizing: inherit; /* Наследуют content-box от родителя */
}

Важные замечания

1. Разница между border-box и content-box:

   • content-box: ширина = контент (padding/border добавляются сверху)
   • border-box: ширина = контент + padding + border

2. Со строковыми элементами (inline):

   /* box-sizing работает только с block и inline-block */
   span { box-sizing: border-box; } /* Не будет видимого эффекта */
   span { display: inline-block; box-sizing: border-box; } /* Сработает */
   

3. SVG элементы:

   svg * {
     box-sizing: border-box; /* Может потребоваться отдельно */
   }
   

Вывод: наиболее практичный подход — использовать html { box-sizing: border-box; } с наследованием через *::before, *::after { box-sizing: inherit; }, так как он обеспечивает лучший баланс производительности, гибкости и предсказуемости поведения.