CSS'de Uzmanlaşma - Sihirli Sayılar

Kod kolay okunabilir, kendini açıklayıcı ve mantıklı bir yapıya sahip olmalıdır.

Küçük projeler, örnekler ve münferit durumlarda sihirli sayılar çok zararsız görülebilir, ancak yeni özellikler eklerken, sorunları düzeltirken ve web sitesini sürdürürken işimizi gerçekten zorlaştırabilirler. Yakında kendinizi diğer sihirli sayıların neden olduğu sorunları gidermek için sihirli sayılar eklerken bulacaksınız, ancak aynı zamanda potansiyel olarak yeni sorunlara da neden olacaksınız.

Çözüm tasarımla başlar

Bir projenin stil kılavuzu, bileşen, modüller, sayfalar vb. İçeren bir tasarım dosyasıyla sonuçlanan bir tasarım aşaması olduğunda, genellikle renk, tipografi, yatay ızgaralar ve medya sorgusu değişkenleri hakkında tüm bilgilere sahibiz, ancak bunlar sadece birkaç tanesidir. Web sitesinde tekrarlanabilecek birçok değişkenin Peki ya yatay ve dikey aralık ( dikey ritim ) veya kenarlıklar veya gölgeler, kap genişlikleri, görüntü en boy oranları, z-endeksleri ve benzeri gibi.

Tasarım aşamasında ne kadar çok değişken tanımlanır ve bu değişkenler içinde ne kadar fazla tasarım kısıtlanırsa, tüm tasarım öğeleri arasındaki bağlantıyı görebildiğimiz için sihirli sayılara o kadar az güveniriz. Örneğin, bir ritim birimi tanımlamak daha iyi bir dikey aralık bağlamı ekleyebilir. Şimdi, başlığın 96pxyükseklikte olduğunu görürsek ve taban çizgisi yüksekliğimizin olduğunu 32pxbilirsek, başlık kabındaki tüm öğelerin dikey ritim kurallarına uygun olduğunu görebiliriz . Bu, bir stil kılavuzu değişkeni (ritim birimi)  ile karmaşık bir modül (başlık) arasında daha iyi bir bağlantı kurmamızı sağlar.

Disiplin, güçlü geliştiriciler yapar

CSS'de Sihirli sayıları kullanmamızı engellemez. Değeri içeren bir değer veya değişken yazarsak kod aynı şekilde çalışacaktır. Hiçbir linter veya ön işlemci hata vermez. En iyi uygulamaları öğrenmek, görev çağrısının ötesine geçmek ve kaliteli uzun vadeli kararlar vermek geliştiriciye kalmıştır. Yeni bir projeye başlarken, CSS değişkenlerinin ana hatlarını çizmek ve tanımlamak çok önemlidir. Kodunuzun kalitesi, okunabilirliği ve sürdürülebilirliği, bu değişkenleri ne kadar iyi tanımladığınıza bağlı olacaktır: onlara anlamlı bir isim vermek, değişkenleri doğru şekilde gruplamak, değişkenler arasında açık bir bağımlılık tanımlamak vb.

Bunu aşağıdaki kodla gösterelim. Lütfen bu örnekte PostCSS ve modern CSS sözdizimi kullandığımı unutmayın. Ancak bu felsefe, SASS ve LESS gibi CSS Ön İşlemcileri için de geçerlidir.

root {
    /* px definitions for easier calculations */
    /* These variables are only used for calculation, we ommit the px because calc cannot strip units */
    --typography__fontSize--px: 16;
    --typography__lineHeight--px: 27;

    --browser__fontSize--default: 16;

    /* Basic typography setup, establishing rhythm unit */
    /* These variables should be assigned to the CSS attributes */
    --typography__fontSize: calc(
        (var(--typography__fontSize--px) / var(--browser__fontSize--default)) * 1rem
    );
    --typography__lineHeight: calc(
        (var(--typography__lineHeight--px) / var(--typography__fontSize--px)) * 1rem
    );

    /* Calculating vertical rhythm variables */
    /* Can be located in separate file if using Preprocessors or PostCSS import */
    --spacing__vertical--1: var(--typography__lineHeight);
    --spacing__vertical--2: calc(2 * var(--spacing__vertical--1));
    --spacing__vertical--3: calc(3 * var(--spacing__vertical--1));

    /* Defining custom variables for modules */
    /* Can be located in separate file if using Preprocessors or PostCSS import */
    --header__height: var(--spacing__vertical--3);
}

Sadece iki sayıyı nasıl kullandığımıza ve değişkenlerin geri kalanının bu iki sayıya nasıl bağlı olduğuna dikkat edin. Değişkenleri BEM benzeri yapıyla adlandırırken kullandım group__attributeName--variation. Değişkenler arasındaki bağlantı açıktır: temel ritim birimi, remdeğerin pxyazı tipi boyutu ve satır yüksekliği değerleri kullanılarak hesaplanan temel satır yüksekliğine eşittir . Benzer şekilde, başlık, dinlenme ritim birimi çarpanları (dikey aralıklar) ile birlikte hesaplanan 3 ritim birimi çarpanına eşit olan sabit bir yüksekliğe sahiptir.

Değişkenler bu şekilde düzenlenirken, kodumuza kolayca daha fazla karmaşıklık ekleyebilir ve değerleri veya değişkenleri tekrar etmekten kaçınabilir ve sihirli sayıları tamamen kullanmaktan kaçınabiliriz. 

CSS'nin hilekar yapısı ve değişen tarayıcı desteği nedeniyle bazen tek çözüm Sihirli Numaralar kullanmaktır. Bu durumda bile, Magic numarası kullanıldığı dosyada bir değişkene kaydedilmeli ve belgelenmelidir. Tek bir eleman için geçerli olan sihirli sayı, global değişkenler boyunca tanımlanmamalıdır. Bu şekilde, herhangi bir geliştirici değişkenin kapsamını ve rolünü anlayacak ve gerekirse gelecekte onu kaldırmak isteyebilir.