От автора: я наслаждаюсь очень скучными CSS-вещами — честно говоря, возможно, гораздо больше, чем должен бы. Одна вещь, на которую я, вероятно, потратил слишком много времени, это сброс CSS.
В современную эпоху веб-разработки нам на самом деле не нужен сложный сброс или даже сброс вообще, потому что проблемы совместимости CSS с браузером возникают гораздо реже, чем в дни IE 6. Новая эра наступила, когда появился такой сброс, как normalize.css, и спас нас от мучений. Те времена уже прошли, и мы можем доверять браузерам, поэтому я думаю, что такие сбросы, вероятно, в основном избыточны.
Сброс чувственных установок по умолчанию
Но мне по прежнему нравится сбрасывать вещи, поэтому в течение многих лет я медленно, но уверенно переделывал сам себя в манере кодового гольфа. Я объясню все по порядку, но прежде, чем я это сделаю, вот код полностью:
/* Box sizing rules */
*,
*::before,
*::after { box-sizing: border-box;
} /* Remove default padding */
ul[class],
ol[class] { padding: 0;
} /* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd { margin: 0;
} /* Set core body defaults */
body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5;
} /* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] { list-style: none;
} /* A elements that don't have a class get default styles */
a:not([class]) { text-decoration-skip-ink: auto;
} /* Make images easier to work with */
img { max-width: 100%; display: block;
} /* Natural flow and rhythm in articles by default */
article > * + * { margin-top: 1em;
} /* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select { font: inherit;
} /* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}Теперь обо всем по порядку
Мы начнем с размеров блоков. Я просто полностью сбросил для всех элементов и псевдоэлементов box-sizing: border-box.
*,
*::before,
*::after { box-sizing: border-box;
}Некоторые люди думают, что псевдо-элементы должны наследовать box-sizing, но я думаю, что это глупо. Если вы хотите использовать другое значение для размера блока, установите его явно — по крайней мере, это то, что делаю я.
/* Remove default padding */
ul[class],
ol[class] { padding: 0;
} /* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd { margin: 0;
}После определения размеров блоков я выполняю общий сброс margin и padding, где это устанавливается стилями браузера. Все это говорит само за себя, поэтому я не буду вдаваться в подробности.
Хотя я вернусь к этому, описывая списки. Я выбираю только списки, которые фактически имеют атрибут class, потому что, если это простой ul или ol, я хочу, чтобы они выглядели как список. Многие сбросы, включая мои предыдущие, агрессивно удаляют это.
body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5;
}Далее: стили body. Здесь все просто. Полезно, когда body заполняет все окно просмотра, даже если элемент пусто, поэтому я устанавливаю для min-height — 100vh. Мне также нравится плавная прокрутка к анкорам, поэтому я также установил scroll-behavior: smooth.
Я установил только два стиля текста. Для line-height я установил 1.5, потому что значение по умолчанию 1.2 просто недостаточно велико, чтобы получить доступный, читаемый текст. Я также задал для text-rendering — optimizeSpeed. Использование optimizeLegibility делает текст более приятным, но может привести к серьезным проблемам с производительностью, таким как 30-секундная задержка загрузки, поэтому я стараюсь избегать этого. Я иногда добавляю также это.
ul[class],
ol[class] { list-style: none;
}Как и в случае с полями и отступами, я сбрасываю только list-style, когда элемент списка имеет class атрибут.
a:not([class]) { text-decoration-skip-ink: auto;
}Для ссылок без атрибута класса я установил text-decoration-skip-ink: auto, чтобы подчеркивание отображалось, что гораздо более читабельно. Это может быть установлено для ссылок глобально, но в прошлом у меня это вызвало один или два конфликта, поэтому я оставляю это так.
img { max-width: 100%; display: block;
}Старые добрые стили изображений будут следующими. Я установил для них отображение в качестве элемента блока, потому что, честно говоря, жизнь слишком коротка для того, чтобы получать эти странные разрывы, который вы видите внизу, и изображения — особенно в том, что делаю я — имеют тенденцию вести себя как блоки.
article > * + * { margin-top: 1em;
}Мне очень нравится этот трюк CSS, и я наконец-то набрался достаточно смелости, чтобы добавить его к сбросу. Такой селектор выбирает прямых потомков article и добавляет к ним верхнее поле в 1em. Это задает ритм потока контента. Фактически сейчас я использую утилиту .flow в каждом проекте. На самом деле, я считаю, что это мой самый используемый сегодня CSS.
input,
button,
textarea,
select { font: inherit;
}Еще одна вещь, которую я наконец-то набрался смелости использовать, это font: inherit по умолчанию для элементов ввода, которые делают именно то, что должны. Никакого больше крошечного (в некоторых случаях моно) текста!
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}Последнее и, что немаловажно, единственное правило для @media сбрасывает анимации, переходы и поведение прокрутки, если пользователь предпочитает ограничить движения. Мне нравится это при сбросе, причем наивысшую специфичность задают селекторы !important, потому что, скорее всего, если пользователь не хочет движения, он не получит его, независимо от CSS, который следует за этим сбросом.
Обновление: благодаря @atomiks, это было обновлено, поэтому оно не должно нарушать события отслеживания JavaScript для animationend и transitionend.
Завершение
Вот и все, это очень небольшой сброс, который делает мою жизнь намного проще. Если вам он нравится, вы можете использовать его и сами! Вы можете найти его на GitHub или NPM.
Автор: Andy Bell
Источник: https://hankchizljaw.com
Редакция: Команда webformyself.