Стилизация с помощью CSS

Карточка размером 320 пиксель переполняет экран 320 пикселей

• Объявленная ширина карточки не всегда является её полной шириной. Внутренние отступы (padding) и границы (borders) могут добавлять пространство за пределами ширины контента.
• CSS применяет правила представления. Селектор выбирает элементы; декларация задает свойство и значение, например color: navy.

Объясните каждый элемент модели коробки

• Модель коробки включает контент, внутренние отступы (padding), рамку (border) и внешние отступы (margin). Внутренние отступы и рамка находятся внутри нарисованной коробки; внешние отступы отделяют её от соседних элементов.
• При использовании content-box, ширине 320 px, внутренних отступах 16 px с обеих сторон и рамках 2 px с обеих сторон получается 356 px до внешних отступов. При использовании border-box, объявленная ширина 320 px уже включает эти внутренние отступы и рамки.

Сделайте ширину гибкой

• Адаптивный дизайн подстраивает контент и макет под доступное пространство. Данная карточка заполняет свой контейнер шириной до 400 px, включая внутренние отступы и рамку.
• Используйте это правило для элемента с class="card". Длинный непрерывный контент, внешние отступы родителя и другие правила всё равно требуют проверки; одного объявления недостаточно, чтобы гарантировать, что вся страница поместится.

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: 16px;
  border: 2px solid currentColor;
  overflow-wrap: anywhere;
}

Изменяйте макет только тогда, когда это необходимо

• Медиа-запрос применяет правила при выполнении определённого условия. Например, измените две колонки на одну, если они станут слишком узкими для чтения.
• Определяйте точку переломника (breakpoint) исходя из контента, затем проверяйте несколько различных ширин и увеличенный размер текста. Не предполагайте, что все телефоны или все ноутбуки имеют одинаковую полезную ширину экрана.

Проверьте правило, которое фактически применяется

• Каскад учитывает такие факторы, как источник, важность и слои, ещё до определения специфичности селектора. Для сравнимых правил ID-селектор более специфичен, чем селектор класса; селектор класса более специфичен, чем селектор элемента.
• Когда сравнимые правила имеют равную специфичность, решение может быть принято на основе последовательности в источнике. Используйте инструменты разработчика в браузере для проверки применённых правил, загруженных таблиц стилей и вычисленных значений.

Протестируйте коробку и восприятие чтения

• Попробуйте узкие и широкие контейнеры, навигацию с клавиатуры и увеличенный текст. Убедитесь, что текст читаем в обеих цветовых темах и что контент может переноситься.
• Объясните одно исправление переполнения, используя расчёт коробки, и один конфликт стилей, основываясь на фактических применяемых правилах.

Источник: W3C Каскад CSS.