Sobes.tech
Middle

Kuidas te lähtestate oma projektides stiile?

sobes.tech AI

Vastus AI-lt

Tavaliselt kasutan normalize.css põhjana. See ühtlustab elementide stiile ja muudab need kõikides brauserites prognoositavamaks, säilitades samal ajal kasulikud vaikimisi stiilid.

// normalize.css osa näide
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Mõnikord lisan oma väikese nullimise või põhistiilide komplekti normalize.css-i peale teatud ülesannete jaoks või et nullida mõnede elementide ääred ja padjad.

// Täiendavad stiilid
*,
*::before,
*::after {
  box-sizing: border-box; /* Muudab mõõtmetega töötamise prognoositavamaks */
}

body {
  min-height: 100vh; /* Venitab keha kogu nähtava kõrguseni */
  scroll-behavior: smooth; /* sujuv kerimine ankru juurde */
  text-rendering: optimizeSpeed; /* eelistab kiirust renderdamisel */
}

a {
  text-decoration: none; /* eemaldab lingi allajoonimise */
  color: inherit; /* lingid pärivad teksti värvi */
}

ul,
ol {
  list-style: none; /* eemaldab loendi markerid */
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit; /* vormielemendid pärivad fonti vanemalt */
}

img {
  max-width: 100%; /* pildid ei ületa konteinerit */
  display: block; /* eemaldab inline-block elementide all oleva tühiku */
}

Konkreetse lähenemise valik sõltub projekti nõuetest ja kasutatavast raamistikust. normalize.css on hea kompromiss täieliku nullimise ja vaikimisi stiilide vahel.