Более современный сброс CSS
Я знаю, что у меня ужасный послужной список в области сопровождения open source. Поэтому я решил заархивировать оригинал и просто опубликовать это вместо него. Делайте с ним что хотите!
Чтобы быть предельно ясным, это сброс CSS, который работает для меня и для нас в Set Studio. Всякий раз, когда я говорю мы
, я имею в виду именно нас.
Сброс CSS в целом
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font: inherit;
}
/* Make sure textarea without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}Разбор
По традиции, давайте разберёмся, что к чему:
/* Правила box sizing */
*,
*::before,
*::after {
box-sizing: border-box;
}Это правило довольно понятно, но вкратце оно заключается в том, что я устанавливаю для всех элементов и псевдоэлементов использование border-box, а не стандартного content-box для определения размера. Сейчас мы больше внимания уделяем тому, чтобы позволить браузеру делать больше работы с гибкими макетами с плавными шрифтами и пространством, и это правило уже не так полезно, как раньше. Однако редко какой проект обходится без явного указания размера, поэтому ему по-прежнему есть место в сбросе.
/* Предотвращение увеличения размера шрифта */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}Лучше всего это объясняет Kilian. Он также объясняет, почему нам все ещё нужны эти уродливые префиксы.
/* Удаление отступов по умолчанию для лучшего контроля в авторском CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin: 0;
}Я всегда выступаю за отказ от стилей пользовательского агента для полей в пользу определения потока и пространства на макроуровне. В логических свойствах я удаляю конечное поле, а не со всех сторон, как в старом варианте. Кажется, это хорошо работает в продакшне.
/* Удаление стилей списка в элементах ul, ol с ролью списка, что предполагает удаление стилей по умолчанию */
ul[role='list'],
ol[role='list'] {
list-style: none;
}Safari делает дикие вещи, в том числе и такую: если убрать стилизацию списка, то будет удалена семантика для VoiceOver. Кто-то скажет, что это особенность, а кто-то — что ошибка. Я скажу, что это глупость, но чтобы убедиться, что role добавлена, по умолчанию удаляю стилизацию списка для неё в качестве небольшого вознаграждения.
/* Установка значений по умолчанию для body */
body {
min-height: 100vh;
line-height: 1.5;
}Мне нравится отличная высота строк, которая наследуется. Установка минимальной высоты как 100vh для body тоже довольно удобна, особенно если вы собираетесь устанавливать декоративные элементы. Может показаться заманчивым использовать новую единицу измерения, например, dvh, но если вы углубитесь, как это сделал Ahmad, то увидите, что это может вызвать больше проблем, чем решений. А это совсем не то, что вы хотите, чтобы делал ваш сброс CSS!
Единица измерения svh кажется лучше, чем dvh, но я доволен vh. Всегда убеждайтесь в том, что вы понимаете новые единицы, прежде чем погружаться в них с головой или рекомендовать их как Евангелие — вот мой совет. Если что-то уже работает, нет необходимости менять это!
/* Установите меньшую высоту строк в заголовках и интерактивных элементах */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}Как удобно иметь большой line-height глобально, так же удобно иметь меньший line-height для заголовков, кнопок и т.д. Однако стоит убрать или изменить это правило, если шрифт имеет большие верхние и нижние границы. В последнем случае они будут противоречить друг другу и создавать проблемы с доступностью.
/* Баланс переноса текста в заголовках */
h1, h2,
h3, h4 {
text-wrap: balance;
}Это правило довольно специфично для наших проектов, но благодаря новому свойству text-wrap заголовки выглядят прекрасно. Я полагаю, что некоторым людям это покажется неприемлемым. Так что, возможно, вы захотите удалить это правило.
/* Элементы A, не имеющие класса, получают стили по умолчанию */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}Это правило в первую очередь гарантирует, что оформление текста не будет мешать восходящим и нисходящим элементам. Я думаю, что сейчас это в основном делается по умолчанию в браузерах, но это хорошая страховка, чтобы установить её тоже. В студии мы предпочитаем, чтобы ссылки наследовали currentColor текста тоже по умолчанию, но если вы этого не делаете, то, вероятно, захотите его убрать.
/* Наследование шрифтов для input и button */
input,
button,
textarea,
select {
font: inherit;
}Сокращение font: inherit чертовски полезно, и мы, конечно, видим это на примере элементов ввода и форм. В основном это касается элементов <textarea>, но не помешает применить его и к другим элементам формы, поскольку это позволит сэкономить на CSS в дальнейшем проекте.
/* Убедитесь, что textarea без атрибута rows не будут маленькими */
textarea:not([rows]) {
min-height: 10em
}Говоря об элементах <textarea>, следует отметить, что это правило очень удобно. По умолчанию, если не добавить атрибут rows, они могут быть очень маленькими. Это не идеально для грубых указателей, таких как пальцы, и, как следствие, элементы <textarea> обычно используются для нескольких строк текста. Поэтому имеет смысл упростить эту задачу.
/* Все, к чему были привязаны якоря, должно иметь дополнительные поля прокрутки */
:target {
scroll-margin-block: 5ex;
}Наконец, если элемент является якорным, то имеет смысл добавить над ним ещё немного пространства с помощью scroll-margin, которое учитывается только в том случае, если этот элемент является целевым. Небольшой нюанс, обладающий большим потенциалом для удобства пользователей! Если у вас есть фиксированный заголовок, возможно, вам придётся его подкорректировать.
Подведение итогов
Продержится ли этот сброс CSS ещё 4 года? Возможно! С предыдущим проблем не возникало.
Несмотря на это, он довольно полезен в качестве базы для начала проектов в нашей студии. Мы не возвращаемся и не обновляем задним числом предыдущий сброс CSS на клиентских проектах, потому что он работает абсолютно нормально.
Сброс CSS — одна из тех вещей, из-за которых люди очень переживают, но на самом деле, учитывая, что браузеры сейчас чертовски хороши, он, скорее всего, даже не нужен. Мой совет — возьмите понравившиеся вам фрагменты из тех, что вы найдёте в Интернете, и создайте свой собственный, подходящий для вас и вашей команды.