Чӣ гуна услубҳоро дар лоиҳаҳои худ барқарор мекунед?

Ман ба истифода одатан normalize.css-ро ҳамчун асос истифода мебарам. Он услубҳои унсурҳоро муттаҳид мекунад ва онҳоро дар ҳамаи браузерҳо бештар пешгӯӣшаванда месозад, дар ҳоле ки услубҳои пешфарзро нигоҳ медорад.

// Намунаи қисмати normalize.css
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Гоҳ-гоҳ ман як reset-и хурд ё маҷмӯаи услубҳои асосиро болои normalize.css илова мекунам барои вазифаҳои махсус ё барои нол кардани маржа ва padding дар баъзе унсурҳо.

// Услубҳои иловагӣ
*,
*::before,
*::after {
  box-sizing: border-box; /* Кор бо андозаҳоро бештар пешгӯӣшаванда мекунад */
}

body {
  min-height: 100vh; /* Таниҳоро ба тамоми баландии диданӣ кашед */
  scroll-behavior: smooth; /* Ҳаракати нарм ба сӯи анкорҳо */
  text-rendering: optimizeSpeed; /* Бартарӣ додан ба суръати визуализация */
}

a {
  text-decoration: none; /* Аз байн бурдани зерин дар пайвандҳо */
  color: inherit; /* Пайвандҳо рангро мерос мебаранд */
}

ul,
ol {
  list-style: none; /* Нишонҳоро аз рӯйхат тоза мекунад */
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit; /* Унсурҳои форма аз падар мерос мебаранд */
}

img {
  max-width: 100%; /* Расмҳо аз контейнери худ берун намеравад */
  display: block; /* Фосилаи поёнро дар inline-blockҳо тоза мекунад */
}

Нақшаи муайянро интихоб кардан вобаста ба талаботи лоиҳа ва рамкаи истифодаи он мебошад. normalize.css як компромис хуб байни нол кардани пурра ва услубҳои пешфарз мебошад.