CSS однострочники для улучшения (почти) любого проекта

Большинство из этих однострочников будут состоять из одного объявления внутри CSS правила. В некоторых случаях селектор будет больше, чем просто элемент; в других случаях будут добавлять дополнительные объявления в качестве рекомендаций для лучшего опыта, таким образом делая их больше, чем однострочник — заранее прошу прощения за такие случаи.

Некоторые из этих однострочников скорее личный выбор и применимы не ко всем сайтам (не все используют таблицы или формы). Ниже будет кратко описан каждый из них, что они делают (с примерами изображений) и почему мне нравится их использовать. Обратите внимание, что примеры изображений могут быть построены на основе предыдущих примеров.

Ограничение ширины контента в области просмотра

body {
  max-width: clamp(320px, 90%, 1000px);
  /* дополнительная рекомендация */
  margin: auto;
}

Добавив эту строку, вы уменьшите размер контента, чтобы он занимал 90% области просмотра, ограничив его ширину между 320px и 1000px (не стесняйтесь изменять минимальные и максимальные значения).

Это изменение автоматически заставит контент выглядеть намного красивее. Он больше не будет выглядеть огромным текстовым блоком, а будет смотреться более структурированным и организованным. А если ещё добавить margin: auto; к body, то контент будет выровнен по центру страницы. Две строчки кода позволяют контенту выглядеть намного лучше.

Увеличение размера текста

body {
  font-size: 1.25rem;
}

Давайте посмотрим правде в глаза: стандартный размер шрифта в браузерах — 16px — это мало. Хотя это может быть личным мнением, основанным на том, что я старею 😅.

Одно из быстрых решений — увеличение размера шрифта в body. Благодаря каскаду и блокам em, используемым браузерами, весь текст на веб-странице автоматически увеличится.

Увеличение расстояния между строками

body {
  line-height: 1.5;
}

Ещё один способ улучшить читабельность и избавиться от страшной стены текста — увеличить расстояние между строками в абзацах и контенте. Это легко сделать с помощью свойства line-height.

Этот вариант (как и два предыдущих) значительно увеличит вертикальный размер страницы, но, уверяю вас, текст станет более читабельным и дружелюбным для всех пользователей.

Ограничение размера изображений

img {
  max-width: 100%;
}

Изображения должны быть примерно равны занимаемому ими пространству, но иногда получаются очень длинные картинки, из-за которых контент смещается и возникает горизонтальная прокрутка.

Один из способов избежать этого — установить максимальную ширину в 100%. Хотя это не совсем верное решение ('margin' и 'padding' могут влиять на ширину), в большинстве случаев оно работает.

Ограничение ширины текста в контенте

p {
  max-width: 65ch;
}

Ещё одна тактика, позволяющая избежать страшной стены текста и рек пространства, — применять этот стиль даже в сочетании с максимальной шириной в body. Это может выглядеть ненужным и иногда странным, поскольку абзацы будут более узкими, чем другие элементы. Но мне нравится контраст и более короткие строки.

Ранее мне помогало значение 60ch или 65ch, но вы можете использовать другое значение и настроить максимальную ширину в соответствии с вашими потребностями. Поиграйте и посмотрите, как это выглядит на вашей веб-странице.

Переносите заголовки более сбалансированным способом

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

Заголовки — неотъемлемая часть веб-структуры, но из-за их большого размера и короткого содержимого они могут выглядеть странно. Особенно если занимают более одной строки. Решение, которое поможет в этом случае, — сбалансировать заголовки с помощью text-wrap.

Хотя balance кажется самым популярным значением для text-wrap, оно не единственное. Также можно использовать pretty, при необходимости перемещающее последнее слово в последнюю строку вместо балансировки всего содержимого. К сожалению, pretty ещё не получил полной поддержки.

Цвета элементов управления формой в соответствии со стилем страницы

body {
  accent-color: #080; /* используйте любимый цвет */
}

Ещё одно небольшое изменение, не оказывающее существенного влияния, но улучшающее внешний вид. До недавнего времени мы не могли стилизовать элементы управления формы с помощью CSS и были вынуждены ориентироваться на отображение в браузере. Но теперь всё изменилось.

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

Простые для восприятия строки таблицы

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* или #fff1 для тёмной темы */
}

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

Вышеприведённый однострочник позволяет легко добиться такого стиля. Его можно упростить и использовать только tr, не обращая внимания на tbody или родительский table, но тогда он будет применяться и к заголовку таблицы, чего мы, возможно, не хотим. Это дело вкуса.

Отступы в ячейках таблиц и заголовках

td, th {
  padding: 0.5em; /* or 0.5em 1em... или любое значение отличное от 0 */
}

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

Можно изменить значение padding, чтобы подогнать его под нужный размер. Однако не переусердствуйте, чтобы избежать ненужного скроллинга или слишком большого пустого пространства.

Уменьшение анимации и движения

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    /* дополнительная рекомендация */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Хорошо, хорошо. Этот код — нечто большее, чем просто однострочник. У него есть однострочная версия (удаление анимации путём установки её длительности в ноль секунд), но другие вещи на веб-странице заставляют элементы двигаться.

Установив эти объявления в медиа-запрос prefers-reduced-motion, мы удовлетворим выбор пользователя в пользу меньшего количества движений. Этот подход несколько радикален, потому что он удаляет всё движение, что не всегда соответствует намерениям пользователя — это уменьшенное движение, а не отсутствие движения. При необходимости можно сохранять движение в каждом конкретном случае.