Каскад, специфичность и блочная модель

Когда к элементу подходит несколько правил, побеждает:

1. !important (лучше не использовать);
2. затем более высокий слой (@layer);
3. затем большая специфичность: id (1-0-0) > класс, атрибут, псевдокласс (0-1-0) > тег (0-0-1);
4. при равенстве — правило, объявленное позже.

Инлайн-стиль сильнее любых селекторов. Часть свойств (цвет, шрифт) наследуется от родителя, часть (отступы, рамки) — нет.

Блочная модель

Размер элемента складывается из content, padding, border; margin — снаружи. При box-sizing: content-box (по умолчанию) width — только содержимое, и рамка с отступами увеличивают элемент. Почти все проекты ставят глобально:

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

Что ещё важно

• Схлопывание вертикальных margin у соседних блоков.
• Единицы: px, rem (от шрифта корня), em, %, vw/vh, dvh.
• Переменные: --accent: #7c5cff; color: var(--accent);.