Tasarım Kodlama

CSS Reset(CSS Sıfırlama)

Öncelikle bu konunun tartışmalı bir konu olduğunu belirtmek isterim. Ancak bootstrap / materialize gibi frameworkler kullanıyorsanız. CSS resetleme işlemleri yapıyorsunuz demektir. Aşağıda basit anlamda bir tasarımcının sayfa yüklenirken yeniden biçimlendirmek isteyeceği etiketlerin CSS özellikleri mevcuttur. Tekrar belirmek isterim ki, bu resetleme kişisel bir deneyimdir. Sizlerin tercihleri de farklı yönde olabilir.

Kenar boşluklarını, dolguları ve kenarlıkları sıfırlama

Her zaman yaptığım ilk şey, form alanlarının dışındaki tüm öğelerin kenar boşluğunu, dolguyu ve kenarlıkları kaldırmak. Bu, büyük ölçüde Meyer’in CSS Reset’inden iki değişiklikle alınır.

İlk değişiklik, sadece hala kullanabileceğim elementlerin seçicilerini dahil etmem. Örneğin, menü gibi kullanımdan kaldırılmış öğeleri kaldırdım, ancak aynı zamanda ruby öğesi gibi kullanmam gerekmeyen geçerli öğeler de eklemedim.

İkinci değişiklik, font stillerinin sıfırlanmasını aşağıda göreceğiniz gibi başka bir seçiciye taşıdım.

Typography

Hala html öğesinde% 62,5 font büyüklüğünü ayarlama yöntemini kullanıp daha sonra başka bir yerde rem birimini kullanıyorum. Bunu bu şekilde yapmak için güçlü bir nedenim yok, bu noktada benim için daha fazla atalet var.

Ayrıca, her öğedeki font ailesini, font boyutunu ve satır yüksekliğini üst öğesinden devralmak için sıfırlarım. Bu oldukça iyi düşünülmüş ve aslında sıfırlama dosyama yeni bir ektir. Bu şekilde yapıyorum çünkü, genel olarak konuşursak, paragraf elemanlarından farklı font stillerini ayarlama konusunda proaktif olmak istiyorum. Ayrıca, giriş veya düğme gibi form öğelerinin varsayılan gövde metni gibi stillendirilmesi de gerçekten kullanışlıdır. Varsayılan Meyer Sıfırlamasını kullanarak, her zaman bu öğelerin yazı tipini ayrı ayrı stillendirmem gerekti.

Son olarak, genel olarak bağlantı renginin gövde metniyle aynı olmasını tercih ediyorum, bu yüzden miras olarak ayarladım.

Layout & box sizing

Burada, HTML5 öğelerinde doğru görüntüyü ve tüm öğelerde “box-sizing” “border-box” olarak ayarladım.

Belirli öğe stillerini sıfırlama

Bu bölümde, belirli öğeleri hedefliyorum ve tarayıcıların varsayılan olarak eklediği stillerin bir kısmını geri aldım. Bunun çoğu CSS sıfırlamaları için oldukça standart.

Nitelikler ve durumlar

Daha sonra, belirli HTML özellikleri veya durumları için stilleri işleyeceğim.

Hidden özelliğe sahip herhangi bir öğe görünmemelidir.

İmleci, devre dışı bırakılmış öğelere izin verilmez olarak ayarlamak, kişisel olarak tüm projelere eklemek istediğim bir stil.

: focus: not (: focus-visible) seçici, tarayıcının odağın görünür olması gerekmediğini düşündüğü durumlarda anahatları kaldırmamı sağlar. Henüz odaklanmayan sözde sınıfı desteklemeyen tarayıcılar için kuralın tümü yok sayılır ve anahatlar normal kalır.

Ekran okuyucu yalnızca yardımcı program

Sonunda, daima bu sr-only Utility sınıfını eklerim. Bunu, belgede kalması gereken, ancak görsel olarak gizlenmesi gereken HTML öğelerine ekliyorum.

Yorum yap