CSS ve SVG'lerde neden çok sayıda sihirli sayı kabul edilebilir?

Çoğu zaman ben gibi sıcak Ağ Sorular listesinde soruları görmek bu temelde "CSS bu keyfi şekil çizmek nasıl" sorun. Değişmez bir şekilde cevap, talep edilen şekli oluşturan rasgele kodlanmış birkaç değer içeren bir grup CSS veya SVG verisidir.

Buna baktığımda 'Yuck! Ne çirkin bir kod bloğu. Umarım projemde bu tür şeyleri hiç görmemişimdir '. Bununla birlikte, bu tür soru-cevap türlerini oldukça sık ve çok sayıda yükselme ile görüyorum, bu yüzden toplum açıkça kötü olduklarını düşünmüyor.

Fakat bu neden kabul edilebilir? Son deneyimimden geldiğimde bu bana bir şey ifade etmiyor. Peki neden CSS / SVG için uygun?

İlk olarak, programlamada değişkenler veya sabitler kullanılarak sihir değerlerinden kaçınılır. CSS değişkenleri desteklemiyor, bu yüzden sihirli değerler üzerine kaşlarını çatmış olsa bile, fazla seçeneğiniz yok (SASS olarak önişlemci kullanmak dışında, ancak bunu tek bir pasaj için yapmazsınız).

İkincisi, değerler CSS gibi bir alana özgü dilde sihirli olmayabilir. Programlamada, sihirli sayı, anlamın veya amacın açık olmadığı bir sayıdır. Bir satır diyorsa:

x += 23;

"Neden 23" diye soracak mısın? Sebep nedir? Bir değişken niyeti netleştirebilir:

x += defaultHttpTimeoutSeconds;

Bunun nedeni, yalnız bir sayının genel amaçlı kodda kesinlikle bir şey ifade edebilmesidir. Ancak, CSS’yi düşünün:

background-color: #ffffff;
font-size: 16px;

Yükseklik ve renk sihir değildir, çünkü anlam bağlamdan tamamen açıktır. Tasarımcının iyi görüneceğini düşündüğü için spefik değeri seçmenin nedeni basit. Bir değişkeni tanıtmak hiçbir şeye yardımcı olmaz, çünkü yine de " defaultBackgroundColor" ve " defaultFontSize" gibi bir şey adlandırırsınız .

Kabul edilebilir, çünkü bu formatlar kod değil veridir . Tüm "sihirli sayıları" kaldırırsanız, aslında her etiketi kopyalar ve saçma görünümlü dosyalara sahip olursunuz:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

Bazı verileri değiştirmek istediğiniz her zaman, iki yere bakmanız gerekir. Kabul edilirse, sık sık tekrarlanan bir renginiz varsa ve temaları değiştirmek için değiştirmek isteyebilirsiniz gibi, yinelemeden kaçınmanın iyi olduğu durumlar vardır. Bu durumları ele almak için ön işlemciler ve önerilen uzantılar vardır, ancak genel olarak, yapıyla birlikte bir veri biçiminde sayıların olması arzu edilir.

Büyü sayıları yasağı bu tasarım ilkesinin ilkel versiyonudur:

Kararları tek bir yerde alın .

Ancak bunlar sihirli sayılar değil . En azından bildiğim kadarıyla kodlama stilinde bir rehber söz konusu değil.

genişlik: 200px;
yükseklik: 200px;

Açıkça etiketlenmişler. Tabii, sayılar aynı oluyor. Ancak genişlik genişlik ve yükseklik yüksekliktir. Bağımsız değişmek üzere tasarlanmıştır.

Şimdi hepiniz 5 nesneleri varsa vardı aynı genişliğe sahip ve her biri bağımsız sana nasıl döverdi genişliklerini kodlanmış indirection sopa.

Etiketlenirlerse onlara sihirli sayılar demem ama yine de seni dolaylı çubukla yenerim.

CSS bir programlama dili olmadığından, programınız için değişken verileri içeren yapılandırma dosyasıdır.

Şu anda CSS o kadar güçlüdür olabilir aslında program, ama bu noktada dışında olduğunu. Özünde hala bir stil sayfası dili .

Geri bir adım atalım. Bir ekranda çizebilecek bir programlama diline sahip olduğumuzu hayal edin. Bir web sayfasını boyamak için programlamak istediğimizi hayal edin.

İlk başta kodumuza tonlarca sihirli sayı girecektik. Kenar boşluğu genişliği, metin yüksekliği, girintiler vb.

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

Böylece sihirli sayıları çıkardık ve onları dosyamızın üstüne koyduk.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

Şimdi bu biraz çirkin. Değişken numaralarımızı bir yapılandırma dosyasından okumayı tercih ediyoruz.

margin 100
table 500
text size 12

Mm, bu biraz belirsiz ... Bu sayılar ne anlama geliyor? Bu isimler ne anlama geliyor? Biraz resmileştirelim.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

Fakat biliyorsunuz, programımızı biraz daha genişletmek istiyoruz. Ayrıca birden fazla tablo içeren sayfaları, tablo olmayan sayfaları, paragraf veya düğmeleri olan sayfaları ve daha fazlasını çizmesini istiyoruz. Konfigürasyon dosyalarımıza seçiciler ekleyelim, böylece hangi paragrafın daha büyük bir fontu veya farklı bir metin rengine sahip olacağını belirleyebiliriz, belki iç içe geçmiş elemanları destekleyebiliriz, belki de yapılandırma dosyamızda genel bir özellik kullanabiliriz ve sonra belirli bir kodla geçersiz kılabiliriz birkaç iç içe elemandan biri.

Bunun nereye gittiğini hissediyorsunuz, sonunda CSS olarak geliyorsunuz. (Ve bunu yapmak için bir tarayıcı.)

Daha sonra, sihirli dosyalardan tekrar kaçınabilmemiz için konfigürasyon dosyamıza yetenekler eklemeli miyiz? Değişkenler ekle? CSS dosyamız için bir yapılandırma dosyası ekleyin? Bizim CSS dosyası hatırlarsanız Biraz anlamsız geliyor ise zaten çok aynı yapılandırma dosyası.

Ancak bu elbette doğru değil; CSS dosyanız daha büyük ve daha büyük bir şekilde büyüyor ve sonuçta orijinal sihir sayıları ile aynı sorunlara, aynı yerde her yerde tekrarlanan aynı sayıya, bazen küçük bir dönüştürmeye vb. maruz kalıyorsunuz

Bununla birlikte, modern CSS, bu tekrarı önlemek için birçok yol sunar. Birçok öğeye uygulanan sınıfları kullanabilir, herkes için stil ayarlayabilir div, ancak sonradan birini geçersiz kılabilir ve CSS 3 bir çeşit değişken kullanımına bile izin verebilir .

Bu, CSS değişkenini her olası konumda kullanmaya başlamanız gerektiği anlamına gelmez. Mantıklı olduğu yerlerde kullanın ve çoğaltmayı engellediğiniz yerlerde veya diğer tekniklerin de yetersiz kaldığı yerlerde kullanın.

Sonunda, yapılandırma dosyanızda çok fazla sihirli sayı istemezsiniz :-)

Neden [görünüşte rastgele sabit kodlanmış değerlerden oluşan bir demet] CSS / SVG için Tamam?

Tamam değil. Bu var olası düz ".css" dosya yazmak ve korumak için, ama sonunda rastgele kodlanmış değerleri yaygın yük haline gelecektir.

Son derece basit web sayfalarından başka bir şey için, disiplinli bir "bul ve değiştir" stratejisi geliştirmeniz veya değişkenleri olan bir CSS işlemcisi kullanmanız veya JavaScript aracılığıyla stilleri tanımlamanız gerekir.