Tasarım sistemlerinde ve bileşen kitaplıklarında özel özellikleri kullanmanın avantajları.
Adım Dave. Nordhealth'ta Kıdemli Kullanıcı Arayüzü Geliştiricisi olarak çalışıyorum. Bileşen kitaplığımız için web bileşenleri oluşturmayı da içeren Nord tasarım sistemimizin tasarımı ve geliştirilmesi üzerinde çalışıyorum. CSS Özel Mülkleri'ni kullanarak Web Bileşenleri'nin stiliyle ilgili sorunları nasıl çözdüğümüzü ve tasarım sistemleri ile bileşen kitaplıklarında Özel Mülkler'in sağladığı diğer bazı avantajları paylaşmak istedim.
Web bileşenlerini nasıl oluşturuyoruz?
Web bileşenlerimizi oluşturmak için Lit'i kullanırız. Lit, durum, kapsamlı stiller, şablon oluşturma ve daha fazlası gibi birçok standart kod sağlayan bir kitaplıktır. Lit yalnızca hafif değil, aynı zamanda yerel JavaScript API'leri üzerine kuruludur. Bu sayede, tarayıcının halihazırda sahip olduğu özelliklerden yararlanan basit bir kod paketi sunabiliriz.
Ancak Web Bileşenleri'nin en cazip özelliği, neredeyse tüm mevcut JavaScript çerçeveleriyle ve hatta hiç çerçeve olmadan çalışabilmesidir. Ana JavaScript paketine sayfadan referans verildikten sonra web bileşeni kullanmak, yerel bir HTML öğesi kullanmakla neredeyse aynıdır. Yerleşik bir HTML öğesi olmadığının tek gerçek göstergesi, etiketler içindeki tutarlı kısa çizgidir. Bu, tarayıcıya bunun bir web bileşeni olduğunu belirtmek için kullanılan standart bir işarettir.
Gölge DOM stili kapsülleme
Yerel HTML öğelerinin gölge DOM'u olduğu gibi Web Bileşenleri'nin de gölge DOM'u vardır. Gölge DOM, bir öğe içindeki gizli bir düğüm ağacıdır. Bunu görselleştirmenin en iyi yolu, web denetçinizi açıp "Gölge DOM ağacını göster" seçeneğini etkinleştirmektir. Bunu yaptıktan sonra, denetleyicide yerel bir giriş öğesine bakmayı deneyin. Artık bu girişi açıp içindeki tüm öğeleri görme seçeneğiniz olacak. Bunu web bileşenlerimizden biriyle de deneyebilirsiniz. Gölge DOM'unu görmek için özel giriş bileşenimizi denetlemeyi deneyin.
Gölge DOM'un avantajlarından (veya bakış açınıza bağlı olarak dezavantajlarından) biri stil kapsayıcılığıdır. Web bileşeninizde CSS yazarsanız bu stiller dışarı sızamaz ve ana sayfayı veya diğer öğeleri etkileyemez. Bu stiller tamamen bileşen içindedir. Ayrıca, ana sayfa veya üst bir web bileşeni için yazılan CSS, web bileşeninize sızamaz.
Bileşen kitaplığımızdaki stillerin bu şekilde kapsüllenmesi bir avantajdır. Bu, kullanıcılar bileşenlerimizden birini kullandığında, ana sayfaya uygulanan stillerden bağımsız olarak bileşenin istediğimiz gibi görüneceği konusunda bize daha fazla güvence verir. Daha da emin olmak için tüm web bileşenlerimizin köküne veya "ana makinesine" all: unset;
ekleriz.
Ancak web bileşeninizi kullanan bir kullanıcının belirli stilleri değiştirmek için geçerli bir nedeni varsa ne olur? Bağlamından dolayı daha fazla kontrasta ihtiyaç duyan bir metin satırı veya daha kalın bir kenarlığa ihtiyaç duyan bir öğe olabilir mi? Bileşeninize stil uygulanamıyorsa bu stil seçeneklerinden nasıl yararlanabilirsiniz?
İşte bu noktada CSS özel mülkleri devreye girer.
CSS Özel Özellikleri
Özel Özellikler, adları çok uygun olan CSS özellikleridir. Bu özellikleri tamamen kendiniz adlandırabilir ve istediğiniz değeri uygulayabilirsiniz. Tek şart, bu kelimelerin önüne iki kısa çizgi koymanızdır. Özel özelliğinizi beyan ettikten sonra değer, var()
işlevi kullanılarak CSS'nizde kullanılabilir.
Devralmaya gelince, tüm özel özellikler devralınır ve normal CSS özelliklerinin ve değerlerinin tipik davranışını izler. Bir üst öğeye veya öğenin kendisine uygulanan tüm özel özellikler, diğer özelliklerde değer olarak kullanılabilir. Tasarım jetonlarımız için özel özellikleri CSS çerçevemiz aracılığıyla kök öğeye uygulayarak yoğun bir şekilde kullanırız. Bu, sayfadaki tüm öğelerin (web bileşeni, CSS yardımcı sınıfı veya jeton listemizdeki bir değeri almak isteyen bir geliştirici) bu jeton değerlerini kullanabileceği anlamına gelir.
var()
işlevi kullanılarak özel özellikleri devralma özelliği, web bileşenlerimizin Gölge DOM'unu delmemize ve geliştiricilerin bileşenlerimize stil verirken daha ayrıntılı kontrol sahibi olmasına olanak tanır.
Nord Web Bileşeninde Özel Özellikler
Tasarım sistemimiz için bir bileşen geliştirirken CSS'sine dikkatli bir yaklaşım benimseriz. Basit ancak çok sürdürülebilir kodlar oluşturmayı hedefleriz. Sahip olduğumuz tasarım jetonları, kök öğedeki ana CSS çerçevemizde Özel Özellikler olarak tanımlanır.
Bu jeton değerleri daha sonra bileşenlerimizde referans olarak kullanılır. Bazı durumlarda değeri doğrudan CSS mülküne uygularız. Diğer durumlarda ise yeni bir bağlama dayalı özel mülk tanımlar ve değeri bu mülke uygularız.
Ayrıca, bileşene özgü ancak jetonlarımızda bulunmayan bazı değerleri soyutlar ve bağlama dayalı bir özel mülke dönüştürürüz. Bileşenle alakalı özel özellikler bize iki önemli avantaj sağlar. Öncelikle, bu değer bileşen içindeki birden fazla özelliğe uygulanabileceğinden CSS'mizde daha "kuru" olabiliriz.
İkincisi, bileşen durumu ve varyasyon değişikliklerini gerçekten temiz hale getirir. Örneğin, fareyle üzerine gelme veya etkin durum ya da bu durumda bir varyasyona stil uygularken tüm bu özellikleri güncellemek için yalnızca özel özelliğin değiştirilmesi gerekir.
Ancak en güçlü avantaj, bir bileşende bu bağlamsal özel özellikleri tanımladığımızda her bileşenimiz için bir tür özel CSS API oluşturmamızdır. Bu API, ilgili bileşenin kullanıcısı tarafından kullanılabilir.
Önceki örnekte, bir seçici aracılığıyla değiştirilen bağlamsal özel mülkü olan web bileşenlerimizden biri gösterilmektedir. Bu yaklaşımın sonucu, gerçek stillerin çoğunu kontrol altında tutarken kullanıcıya yeterli stil esnekliği sağlayan bir bileşendir. Ayrıca, bileşen geliştiricileri olarak kullanıcı tarafından uygulanan bu stilleri engelleme imkanına da sahibiz. Bu özelliklerden birini ayarlamak veya genişletmek istersek kullanıcının kodunda herhangi bir değişiklik yapmasına gerek kalmadan bunu yapabiliriz.
Bu yaklaşımın, yalnızca tasarım sistemi bileşenlerimizin yaratıcıları olarak bizim için değil, aynı zamanda geliştirme ekibimizin bu bileşenleri ürünlerimizde kullanması açısından da son derece güçlü olduğunu düşünüyoruz.
Özel özellikleri daha da ileri taşıma
Bu makalenin yazıldığı sırada bu bağlama dayalı özel özellikleri dokümanlarımızda açıklamadık. Ancak daha geniş kapsamlı geliştirme ekibimizin bu özellikleri anlayıp kullanabilmesi için bunu yapmayı planlıyoruz. Bileşenlerimiz, npm'de bileşenler hakkında bilinmesi gereken her şeyi içeren bir manifest dosyasıyla paketlenir. Ardından, doküman sitemiz dağıtıldığında manifest dosyasını veri olarak kullanırız. Bu işlem, Eleventy ve Global Data özelliği kullanılarak yapılır. Bu bağlamsal özel mülkleri bu manifest veri dosyasına eklemeyi planlıyoruz.
İyileştirmek istediğimiz bir diğer alan da bu bağlamsal özel mülklerin değerleri nasıl devraldığıdır. Örneğin, şu anda iki bölücü bileşenin rengini ayarlamak istiyorsanız bu bileşenlerin her ikisini de özel olarak seçicilerle hedeflemeniz veya özel özelliği doğrudan stil özelliğiyle öğeye uygulamanız gerekir. Bu iyi görünebilir ancak geliştiricinin bu stilleri kapsayıcı bir öğede veya hatta kök düzeyinde tanımlayabilmesi daha yararlı olur.
Özel mülk değerini doğrudan bileşende ayarlamanız gerekir. Bunun nedeni, bileşen ana makinesi seçici aracılığıyla aynı öğede tanımlamamızdır. Doğrudan bileşende kullandığımız genel tasarım jetonları bu sorundan etkilenmeden doğrudan iletilir ve hatta üst öğelerde bile müdahale edilebilir. İki platformun da en iyi özelliklerinden nasıl yararlanabiliriz?
Gizli ve herkese açık özel özellikler
Özel özel mülkler, Lea Verou tarafından oluşturulmuştur. Bileşenin kendisinde bağlamsal bir "özel" özel mülktür ancak yedek bir "herkese açık" özel mülke ayarlanmıştır.
Bağlamsal özel mülklerimizi bu şekilde tanımlamak, daha önce yaptığımız tüm işlemleri (ör. genel jeton değerlerini devralma ve değerleri bileşen kodumuzda yeniden kullanma) yapmaya devam edebileceğimiz anlamına gelir. Ancak bileşen, bu mülkün yeni tanımlarını kendisinde veya herhangi bir üst öğede de sorunsuz bir şekilde devralır.
Bu yöntemin gerçekten "gizli" olmadığı söylenebilir ancak endişelendiğimiz bir soruna oldukça şık bir çözüm sunduğunu düşünüyoruz. Fırsatımız olduğunda bu sorunu bileşenlerimizde ele alacağız. Böylece geliştirme ekibimiz, mevcut güvenlik önlemlerimizden yararlanırken bileşen kullanımı üzerinde daha fazla kontrole sahip olacak.
Web bileşenlerini CSS özel mülkleriyle nasıl kullandığımızla ilgili bu bilgileri yararlı bulmuşsunuzdur. Düşüncelerinizi bizimle paylaşın. Bu yöntemlerden herhangi birini kendi çalışmanızda kullanmaya karar verirseniz beni Twitter'da @DavidDarnes olarak bulabilirsiniz. Nordhealth'i @NordhealthHQ Twitter hesabından da takip edebilirsiniz. Ayrıca bu tasarım sistemini bir araya getirmek ve bu makalede bahsedilen özellikleri uygulamak için çok çalışan ekibimin diğer üyelerini de takip edebilirsiniz: @Viljamis, @WickyNilliams ve @eric_habich.
Dan Cristian Pădureț tarafından oluşturulan hero resim