Мой стартовый набор CSS для каждого проекта

Я помню время, когда фронтендеры активно делились своими велосипедами. Буквально каждый день я встречал статьи, где автор рассказывает, какую классную штуку он придумал.

Я, конечно, не такой умный. Ничего нового я не придумал, но мне хочется показать вам мой набор базовых стилей, которые я использую для всех проектов. В нём есть старые фишки, есть малоизвестные, а есть и новые.

Давайте посмотрим, что я вам подготовил.

Свойство scrollbar-gutter

Больше всего в интерфейсах меня раздражают модальные окна. Есть множество причин, и одна из них — это полоса прокрутки.

Всегда приходится учитывать то, что она убирается или добавляется при открытии или закрытии окна, чтобы отобразить контент страницы без сдвигов. Так ещё в разных операционных системах полоса прокрутки разная! В совокупности это заставляло придумать целый велосипед.

Хорошо, что сегодня решить эти проблемы достаточно легко. Достаточно заранее объявить свойство scrollbar-gutter со значением stable.

html, body {
  scrollbar-gutter: stable;
}

В этом случае браузеры заранее зарезервируют место под полосу прокрутки. По этой причине при её скрытии или появлении не будет смещения контента. Всё будет отображено отлично!

Медиа-функция prefers-reduced-motion со значением no-preference

Многие любят плавную прокрутку страницы. Тем более её просто реализовать с помощью свойства scroll-behavior со значением smooth.

В своих проектах я тоже использую такой подход. Только есть один важный нюанс. В моём коде свойство scroll-behavior обёрнуто медиа-функцией prefers-reduced-motion со значением no-preference.

@media (prefers-reduced-motion: no-preference) {

  html {
    scroll-behavior: smooth;
  }
}

Я люблю это решение, потому что оно не приносит проблем пользователям, которые отключили анимацию в настройках операционной системы. Если они это сделали, то браузеры просто не будут плавно прокручивать страницу. Следовательно, они не будут испытывать головокружение.

Отдельно хочу предупредить. Готовя демонстрацию к статье, заметил, что свойство scroll-behavior работает по-разному в браузерах. Например, в браузерах Google Chrome и Opera на операционной системе Windows 11 плавная прокрутка отключается сама без медиа-функции prefers-reduced-motion, если в операционной системе анимация отключена.

Может сложиться впечатление, что медиа-функция не нужна. Но такое поведение не везде! Например, в браузере Google Chrome на операционной системе Android плавная прокрутка, объявленная без медиа-функции prefers-reduced-motion, работает при отключенной анимации в операционной системе.

Поэтому, пожалуйста, добавляйте медиа-функцию prefers-reduced-motion для свойства scroll-behavior.

Функция light-dark() и свойство color-scheme

Тёмная тема в современных интерфейсах — это база. В этом году я обновил подход к этому. Теперь использую свойство color-scheme и функцию light-dark().

В своих проектах я использую пользовательские свойства для установки цвета везде, где это нужно. Одной из наиболее используемых настроек являются переменные --main-mode-color и accent-mode-color. Они отвечают за цвет темы интерфейса.

Сейчас всё покажу в коде, чтобы было проще понять.

:root {
  --main-mode-color: #fff;
  --accent-mode-color: #222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-mode-color: #2e3444;
    --accent-mode-color: #eee;
  }
}

body {
  background-color: var(--main-mode-color);
  color: var(--accent-mode-color);
}

Я заметил, что при смене темы интерфейса всегда меняется цвет фона страницы и, соответственно, цвет текста. Конечно, это не все отличия, но они являются основными.

Получается, когда светлая тема интерфейса браузера, то фон должен быть светлым, а текст тёмным. При тёмной теме всё наоборот. Реализовать такое поведение легко с помощью функции light-dark().

Зададим с помощью неё значения для переменных --main-mode-color и accent-mode-color.

:root {
  color-scheme: light dark;

  --main-mode-color: light-dark(#fff, #2e3444);
  --accent-mode-color: light-dark(#222, #eee);
}

body {
  background-color: var(--main-mode-color);
  color: var(--accent-mode-color);
}

Всё. Теперь у фона будет значение #fff при светлой теме, а при тёмной уже будет использоваться значение #222. Также и цвет текста будет меняться. При светлой теме браузеры применят значение #2e3444, а при тёмной — значение #eee.

А что же делает свойство color-scheme? Оно позволяет определять цветовые темы. В моём примере я объявляю светлую (light) и тёмную (dark).

Псевдо-класс focus-visible

Я активный пользователь клавиатуры, и поэтому особое внимание уделяю базовой стилизации обводки, появляющейся при нажатии клавиши Tab. Для этого случая у меня есть несколько правил.

Во-первых, я использую псевдокласс :focus-visible, чтобы стили для клавиатуры не появлялись при клике мышкой.

:focus-visible {
  /* здесь стили для обводки вокруг интерактивных элементов */
}

Во-вторых, я сохраняю свойство outline.

:focus-visible {
  outline: var(--bs-focus-outline-width, 2px) var(--bs-focus-outline-style, solid) var(--bs-focus-outline-width, currentColor);
}

Оно надёжнее всего в различных ситуациях. Я уверен, что в каком-нибудь специальном режиме браузеры всё равно отлично отобразят обводку.

Также важно продумать, чтобы обводка не сливалась с самим элементом. Другими словами, нужно использовать свойство outline-offset. Оно позволит сделать зазор между обводкой и элементом, чтобы всё было видно чётко.

:focus-visible {
  outline: var(--bs-focus-outline-width, 2px) var(--bs-focus-outline-style, solid) var(--bs-focus-outline-width, currentColor);
  outline-offset: var(--base-focus-outline-offset);
}

Значение balance для свойства text-wrap

Несколько лет назад в большинстве браузеров стало работать значение balance для свойства text-wrap. Лично я думаю, что это замечательная возможность улучшить отображение текста в заголовках.

Давайте я продемонстрирую проблему. Я уже подготовил разметку, в которой есть заголовок и блок с текстом.

<body>
  <div class="awesome-block">
	<h3>Топ-матчи четверга: ЦСКА — «Локо» в Кубке России, НБА и Овечкин против Мичкова в НХЛ</h3>
    <p>Лучший спорт 29 октября: «Индиана» — «Филадельфия», «Сибирь» — «Магнитка» в КХЛ, игры Месси и Роналду, а также битва Талалаева с «Зенитом»!</p>
  </div>
</body>

Мы видим, что на последней строке осталось одно слово. Оно выглядит очень сиротливо.

Вот было бы здорово, если браузеры могли отследить такие ситуации и более равномерно распределить текст в элементе. Именно это делает значение balance.

h1, h2, h3, h4, h5, h6 {
  text-wrap: var(--bs-heading-text-wrap, balance);
}

Вот теперь на последней строке несколько слов. Текст в заголовке выглядит более сбалансированным. И главное, что это всё сделал сам браузер.

Свойство aspect-ratio

Сегодня без элемента img нельзя представить современный интерфейс. Для него я всегда объявляю целый набор свойств.

Первым идёт свойство aspect-ratio. Согласитесь, что установка пропорций — удобная штука. Тем более нужно помнить о том, что изображения могут вызвать сдвиг контента, что ухудшает восприятие интерфейса.

img {
  aspect-ratio: var(--bs-img-aspect-ratio, auto);
}

Когда верстается дизайн, то мы рассчитываем, что все изображения будут подготовлены и идеально впишутся в нашу вёрстку. На практике же никто их не подготавливает. По этой причине приходится их вписывать под нужные параметры.

В этой задаче полезнее свойства object-fit сложно найти. По этой причине я тоже рекомендую его добавлять по умолчанию.

img {
  aspect-ratio: var(--bs-img-aspect-ratio, auto);
  object-fit: var(--bs-img-object-fit);
}

Браузеры, конечно, отлично адаптируют изображения благодаря свойству object-fit. Но иногда нужно ещё докрутить до идеала. Тут мне помогает свойство object-position.

img {
  aspect-ratio: var(--bs-img-aspect-ratio, auto);
  object-fit: var(--bs-img-object-fit);
  object-position: var(--bs-img-object-position);
}

Оно указывает смещение изображения, когда мы с вами используем свойство object-fit. В итоге у нас появляется возможность сместить изображение так, чтобы оно обрезалось без потери важной части.

Заключение

Давайте подведём итог. В этой статье мы рассмотрели:

• как свойство text-wrap со значением balance помогает сбалансированно отобразить текст для заголовков;

• как медиа-функция prefers-reduced-motion со значением no-preference добавляет свойство scroll-behavior без головной боли для пользователей;

• как псевдокласс :focus-visible вместе со свойствами outline и outline-offset делает обводку интерактивных элементов понятной и заметной;

• свойства aspect-ratio, object-fit и object-position, помогающие оптимально отобразить элемент img;

• функцию light-dark(), добавляющую светлую и тёмную темы интерфейса компактным образом;

• свойство scrollbar-gutter для корректного отображения полосы прокрутки в модальных окнах.

Вот такой стартовый набор стилей в моих проектах. Мне кажется, он вполне оптимальный. А что думаете вы?

Поделитесь, пожалуйста, в комментариях, какие стили добавили бы ещё. Или, может быть, наоборот, убрали бы. Буду ждать ваши идеи.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS в своём ТГ‑канале CSS isn't magic. Присоединяйтесь. Как вступить, написано в профиле.