Projelerinde stilleri nasıl sıfırlıyorsunuz?

Genellikle normalize.css'yi temel olarak kullanıyorum. Bu, tüm tarayıcılarda öğelerin stillerini daha öngörülebilir ve tutarlı hale getirir, aynı zamanda varsayılan kullanışlı stilleri korur.

// normalize.css'in bir parçası örneği
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Bazen normalize.css üzerine küçük bir sıfırlama veya temel stil seti ekliyorum, belirli görevler veya bazı öğelerin margin ve padding'lerini sıfırlamak için.

// Ekstra stiller
*,
*::before,
*::after {
  box-sizing: border-box; /* Boyutlarla çalışmayı daha öngörülebilir yapar */
}

body {
  min-height: 100vh; /* Body'yi görünür yüksekliğin tamamına yayar */
  scroll-behavior: smooth; /* Ankerlere yumuşak kaydırma */
  text-rendering: optimizeSpeed; /* Görüntüleme hızını tercih eder */
}

a {
  text-decoration: none; /* Bağlantı alt çizgisini kaldırır */
  color: inherit; /* Bağlantılar metin rengini miras alır */
}

ul,
ol {
  list-style: none; /* Liste işaretçilerini kaldırır */
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit; /* Form öğeleri, ebeveyn fontunu miras alır */
}

img {
  max-width: 100%; /* Resimler konteyner dışına çıkmaz */
  display: block; /* Inline-block öğelerde alt boşluğu kaldırır */
}

Belirli bir yaklaşım seçimi, projenin gereksinimlerine ve kullanılan framework'e bağlıdır. Normalize.css, tam bir sıfırlama ile varsayılan stiller arasında iyi bir uzlaşmadır.