Скидання стилів CSS

06 02 2022

Скидання стилів CSS

Переклад з Modern CSS Reset

У цій статті ви дізнаєтесь про те, як скидати CSS.

Якщо чесно, то здається я занадто багато і занадто захоплено забиваю голову всякою нудною нісенітницею з CSS. Одним із таких моментів є скидання CSS, це можливо той момент, який забрав у мене надто багато часу за останні роки.

В епоху сучасної веб розробки, нам не так то й потрібне завантажене скидання стилів або взагалі зовсім не потрібне, оскільки проблеми сумісності CSS в браузерах зараз зустрічаються набагато рідше, ніж це було в дні старого доброго IE6. Це був момент часу, коли з'явилися такі реалізації скидання стилів у CSS, як normalize.cssі врятували нас від пекла з нескінченною метушнею при правці стилів. Але ці дні вже минули і зараз ми цілком можемо довіряти браузерам у цьому плані, так що подібні підходи до скидання стилів здебільшого вже досить зайві.

Скидання розумних налаштувань за замовчуванням

Мені досі подобається робити скидання, так що я довго і старанно, роками копирсався, як одержимий в Code golf (прим. це коли перемагає найкоротший і найдієвіший підхід у програмуванні) стилі на цьому напрямку. Я все поясню, що в цьому коді де і як, але спочатку подивіться на нього:

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
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 root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* 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,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Ну, а тепер детальніше

Починаємо ми з box-sizing. Тут я простим і елегантним рухом відразу ж скидаю всі елементи та псевдоелементи на box-sizing: border-box.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Хтось вважає, що псевдоелементи повинні успадковувати параметри блокової моделі, але я вважаю це дурним. Якщо ви хочете використовувати інше значення для box-sizing, то просто вкажіть його — це те, як я роблю, в будь-якому випадку. Я написав про box-sizingбільше у CSS From Scratch .

/* Забираємо внутрішні відступи */
 ul[class], 
ol[class] { 
  padding: 0; 
} 

/* Забираємо зовнішні відступи */
 body, 
h1, 
h2, 
h3, 
h4, 
p, 
ul[class], 
ol[class], 
li, 
figure, 
figcaption, 
blockquote, 
dl, 
dd { 
  margin: 0; 
}

Після того box-sizing, я скидаю marginі padding навіть там, де вони виставлені дефолтними налаштуваннями браузерів. Тут і так все зрозуміло, так що я не приділятиму цьому моменту багато уваги.

Але хоча я згадаю ситуацію зі списками. Тут я вибрав тільки ті списки, які мають атрибут class, тому що якщо я буду використовувати чистий <ul>або <ol>, то я хочу, щоб він виглядав реально як список. Тут головне не перестаратися, охопивши все, як у попередньому моменті, що видалить усі відступи.

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

Ідемо далі: стилі для body. Тут у мене просто. Дуже корисно вказати bodyзайняти весь viewport, навіть коли він порожній, роблю я це, виставляючи min-heightна 100vh. Ще мені подобається плавний скролл до анкор, так що тут я виставлю scroll-behavior: smooth.

Ще, я виставив лише два текстові стилі. line-height на 1.5, тому що по-дефолту варто 1.2, чого відверто недостатньо в плані доступності та читабельності тексту. Також я виставив text-rendering на optimizeSpeed. Використовуючи optimizeLegibility ви робите ваш текст приємнішим на вигляд, але можете зіткнутися з серйозними проблемами продуктивності, такими як затримки в 30 секунд при завантаженні , так що я намагаюся його уникати. Хоча, я іноді додаю його для секцій із мікротекстом.

ul[class],
ol[class] {
  list-style: none;
}

Як і з відступами, я скидаю стилізацію списків лише у елементів, у яких вказано 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 і я нарешті наважився додати його на скидання. Так званий “ lobotomized owl selector ” вибирає прямих нащадків articleі додає їм зверху зовнішній відступ 1em. Це вказує на зрозумілу періодичність у потоці контенту у article. Взагалі, насправді, я використовую зручну штуку .flow, зараз вже майже в кожному проекті. Ви можете більше прочитати про це на 24 Ways . Та й взагалі, мені так здається, що це зараз мій CSS.

input, 
button, 
textarea, 
select { 
  font: inherit; 
}

Ще одна річ, яку я нарешті наважився виставити по дефолту це font: inheritдля інпутів, які, простіше кажучи, роблять те, що і повинні робити. Досить вже цього дрібного (mono, у деяких випадках) тексту!

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Останнє, але точно не менш важливе, це один @mediaзапит, який скидає анімації, переходи і поведінкові налаштування для скролла, але тільки в тих випадках, коли користувач віддає перевагу якнайменше будь-яких рухів на сторінці . Мені подобається така штука в скиданні стилів, що перемагає специфічність селекторів!important , тому що в сучасних реаліях, якщо користувач не хоче бачити зайвих переходів і т.п., то він і не повинен їх бачити, незалежно від CSS при скиданні стилів.

Висновок

Ось і все, ось він маленький і скидання для стилів, яке робить життя набагато простіше. Якщо він вам сподобається, то сміливо можете його брати на озброєння! Беріть його на GitHub або в NPM .

Поширити

Напишіть свій коментар

Ваша електронна адреса не буде опублікована. Обов’язкові поля позначені *