Ben Dave ve şirketinde Kıdemli Ön Uç Geliştiricisiyim. Kuzey sağlık. Tasarım ve geliştirme üzerinde çalışıyorum Kuzey tasarım sistemibileşen kitaplığımız için Web Bileşenleri oluşturmayı içerir. Stil ile ilgili sorunları nasıl çözdüğümüzü paylaşmak istedim. Web Bileşenleri kullanarak CSS Özel Özelliklerive tasarım sistemlerinde ve bileşen kitaplıklarında Özel Özellikler kullanmanın diğer yararlarından bazıları.
Web Bileşenlerini nasıl oluşturuyoruz? #
İnşa etmek Web Bileşenlerimiz kullanırız Aydınlatılmış, durum, kapsamlı stiller, şablon oluşturma ve daha fazlası gibi birçok standart kod sağlayan bir kitaplık. Lit yalnızca hafif olmakla kalmaz, aynı zamanda yerel JavaScript API’leri üzerine kuruludur, yani tarayıcının zaten sahip olduğu özelliklerden yararlanan yalın bir kod paketi sunabiliriz.
import {html, css, LitElement} from 'lit';export class SimpleGreeting extends LitElement {
static styles = css`:host { color: blue; font-family: sans-serif; }`;
static properties = {
name: {type: String},
};
constructor() {
super();
this.name = 'there';
}
render() {
return html`<p>Hey ${this.name}, welcome to Web Components!</p>`;
}
}
customElements.define('simple-greeting', SimpleGreeting);
Ancak Web Bileşenleri ile ilgili en çekici şey, neredeyse tüm mevcut JavaScript çerçeveleriyle veya hatta hiçbir çerçeveyle çalışmamasıdır. Sayfada ana JavaScript paketine başvurulduktan sonra, bir Web Bileşeni kullanmak, yerel bir HTML öğesi kullanmaya çok benzer. Yerel bir HTML öğesi olmadığını gösteren tek gerçek işaret, tarayıcıya bunun bir Web Bileşeni olduğunu belirtmek için bir standart olan, etiketler içindeki tutarlı tire işaretidir.
head>
script type="module" src="./simple-greeting.js"></script>
</head>
body>
simple-greeting name="Dave"></simple-greeting>
</body>
Gölge DOM stili kapsülleme #
Aynı şekilde, yerel HTML öğelerinin gölge DOM, Web Bileşenleri de öyle. 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, denetçide yerel bir giriş öğesine bakmayı deneyin; artık bu girişi açma ve içindeki tüm öğeleri görme seçeneğiniz olacak. Bunu Web Bileşenlerimizden biriyle bile deneyebilirsiniz; incelemeyi deneyin özel giriş bileşenimiz Gölge DOM’unu görmek için.
Gölge DOM’un avantajlarından (veya bakış açınıza bağlı olarak dezavantajlarından) biri stil kapsüllemesidir. Web Bileşeninizin içine CSS yazarsanız, bu stiller dışarı sızamaz ve ana sayfayı veya diğer öğeleri etkilemez; tamamen bileşen içinde bulunurlar. Ayrıca, ana sayfa veya bir üst Web Bileşeni için yazılan CSS, Web Bileşeninize sızamaz.
Stillerin bu kapsüllenmesi, bileşen kitaplığımızda bir avantajdır. Birisi bileşenlerimizden birini kullandığında, ana sayfaya uygulanan stiller ne olursa olsun, istediğimiz gibi görüneceğine dair bize daha fazla garanti veriyor. Ve daha fazla emin olmak için ekliyoruz all: unset; tüm Web Bileşenlerimizin köküne veya “ana bilgisayarına”.
:host {
all: unset;
display: block;
box-sizing: border-box;
text-align: start;
/* ... */
}
Ancak, Web Bileşeninizi kullanan birinin belirli stilleri değiştirmek için geçerli bir nedeni varsa ne olur? Belki bağlamı nedeniyle daha fazla kontrast gerektiren bir metin satırı vardır veya bir kenarlığın daha kalın olması gerekir? Bileşeninize hiçbir stil giremezse, bu stil seçeneklerinin kilidini nasıl açabilirsiniz?
CSS Özel Özelliklerinin devreye girdiği yer burasıdır.
CSS Özel Özellikleri #
Özel Özellikler çok uygun bir şekilde adlandırılmıştır; bunlar tamamen kendi adınızı verebileceğiniz ve gereken değeri uygulayabileceğiniz CSS özellikleridir. Tek gereksinim, önlerine iki tire koymanızdır. Özel özelliğinizi bildirdikten sonra, değer CSS’nizde şu şekilde kullanılabilir: var() işlev.
:root {
--n-color-accent: rgb(53, 89, 199);
/* ... */
}.n-color-accent-text {
color: var(--n-color-accent);
}
Kalıtım söz konusu olduğunda, normal CSS özelliklerinin ve değerlerinin tipik davranışını izleyen tüm Özel Özellikler devralınır. Bir üst öğeye veya öğenin kendisine uygulanan herhangi bir özel özellik, diğer özellikler üzerinde bir değer olarak kullanılabilir. CSS Çerçevemiz aracılığıyla kök öğeye uygulayarak tasarım belirteçlerimiz için Özel Özellikler’i yoğun bir şekilde kullanırız; bu, sayfadaki tüm öğelerin bu belirteç değerlerini, Web Bileşeni, CSS yardımcı sınıfı veya bir belirteç listemizden bir değer almak isteyen geliştirici.
Özel Özellikleri devralma yeteneği, var() işlevi, Web Bileşenlerimizin Gölge DOM’unu nasıl deldiğimiz ve geliştiricilerin bileşenlerimizi şekillendirirken daha hassas kontrole sahip olmalarını nasıl sağladığımızdır.
Nord Web Bileşenindeki Özel Özellikler #
Tasarım sistemimiz için ne zaman bir bileşen geliştirsek, onun CSS’sine düşünceli bir yaklaşım uyguluyoruz—yalın ama son derece sürdürülebilir bir kod hedefliyoruz. Sahip olduğumuz tasarım belirteçleri, kök öğe üzerindeki ana CSS Çerçevemizde Özel Özellikler olarak tanımlanır.
:root {
--n-space-m: 16px;
--n-space-l: 24px;
/* ... */
--n-color-background: rgb(255, 255, 255);
--n-color-border: rgb(216, 222, 228);
/* ... */
}
Bu belirteç değerlerine daha sonra bileşenlerimizde başvurulur. Bazı durumlarda, değeri doğrudan CSS özelliğine uygulayacağız, ancak diğerlerinde, aslında yeni bir bağlamsal Özel Özellik tanımlayıp değeri buna uygulayacağız.
:host {
--n-tab-group-padding: 0;
--n-tab-list-background: var(--n-color-background);
--n-tab-list-border: inset 0 -1px 0 0 var(--n-color-border);
/* ... */
}.n-tab-group-list {
box-shadow: var(--n-tab-list-border);
background-color: var(--n-tab-list-background);
gap: var(--n-space-s);
/* ... */
}
Ayrıca, bileşene özgü olan ancak belirteçlerimizde olmayan bazı değerleri soyutlayacağız ve bunları bağlamsal bir Özel Özelliğe dönüştüreceğiz. Bileşene bağlamsal olan Özel Nitelikler bize iki önemli fayda sağlar. Birincisi, bu değer bileşen içindeki birden çok özelliğe uygulanabileceğinden, CSS’mizle daha “kuru” olabileceğimiz anlamına gelir.
.n-tab-group-list::before {
/* ... */
padding-inline-start: var(--n-tab-group-padding);
}.n-tab-group-list::after {
/* ... */
padding-inline-end: var(--n-tab-group-padding);
}
İkincisi, bileşen durumu ve varyasyon değişikliklerini gerçekten temiz hale getirir; örneğin bir fareyle üzerine gelme veya etkin durumu veya bu durumda bir varyasyonu şekillendirirken tüm bu özellikleri güncellemek için değiştirilmesi gereken yalnızca özel özelliktir.
:host([padding="l"]) {
--n-tab-group-padding: var(--n-space-l);
}
Ancak en güçlü yararı, bir bileşen üzerinde bu bağlamsal Özel Özellikleri tanımladığımızda, bileşenlerimizin her biri için o bileşenin kullanıcısı tarafından kullanılabilen bir tür özel CSS API’si oluşturmamızdır.
<nord-tab-group label="Title">
<!-- ... -->
</nord-tab-group><style>
nord-tab-group
{
--n-tab-group-padding: var(--n-space-xl);
}
</style>
Önceki örnek, bir seçici aracılığıyla değiştirilen bağlamsal bir Özel Özelliğe sahip Web Bileşenlerimizden birini göstermektedir. Tüm 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, bonus olarak, bileşen geliştiricileri olarak bizler, kullanıcı tarafından uygulanan stilleri yakalama yeteneğine sahibiz. Bu özelliklerden birini ayarlamak veya genişletmek istersek, kullanıcının herhangi bir kodunu değiştirmesine gerek kalmadan bunu yapabiliriz.
Bu yaklaşımı, yalnızca tasarım sistemi bileşenlerimizin yaratıcıları olarak bizler için değil, aynı zamanda bu bileşenleri ürünlerimizde kullandıklarında geliştirme ekibimiz için de son derece güçlü buluyoruz.
Özel Özellikleri Daha İleriye Taşımak #
Bu makaleyi yazarken, bu bağlamsal Özel Nitelikleri gerçekte açıklamıyoruz. belgelerimiz; ancak, daha geniş geliştirme ekibimizin bu özellikleri anlayabilmesi ve bunlardan yararlanabilmesi için planlıyoruz. Bileşenlerimiz npm ile paketlenmiştir. bir bildirim dosyası, onlar hakkında bilinmesi gereken her şeyi içerir. Daha sonra, dokümantasyon sitemiz dağıtıldığında, manifest dosyasını veri olarak kullanırız, bu da kullanılarak yapılır. 110 ve Onun Küresel Veri özelliği. Bu bağlamsal Özel Özellikleri bu bildirim veri dosyasına dahil etmeyi planlıyoruz.
Geliştirmek istediğimiz başka bir alan da bu bağlamsal Özel Özelliklerin değerleri nasıl devraldığıdır. Şu anda, örneğin, iki ayırıcı bileşenin rengini ayarlamak istiyorsanız, özellikle seçicilerle bu bileşenlerin her ikisini de hedeflemeniz veya özel özelliği doğrudan stil özniteliğine sahip öğeye uygulamanız gerekir. Bu iyi görünebilir, ancak geliştiricinin bu stilleri içeren bir öğe üzerinde veya hatta kök düzeyinde tanımlayabilmesi daha yararlı olacaktır.
nord-divider></nord-divider>section>
nord-divider></nord-divider>
<!-- ... -->
</section>
style>
nord-divider {
--n-divider-color: var(--n-color-status-danger);
}
section {
padding: var(--n-space-s);
background: var(--n-color-surface-raised);
}
section nord-divider {
--n-divider-color: var(--n-color-status-success);
}
</style>
Özel Özellik değerini doğrudan bileşen üzerinde ayarlamanızın nedeni, bunları bileşen ana bilgisayar seçici aracılığıyla aynı öğe üzerinde tanımlıyor olmamızdır. Doğrudan bileşende kullandığımız genel tasarım belirteçleri, bu sorundan etkilenmeden doğrudan geçer ve hatta üst öğelerde yakalanabilir. Her iki dünyanın da en iyisini nasıl elde edebiliriz?
Özel ve genel Özel Mülkler #
Özel özel mülkler, Lea Verou tarafından bir araya getirilen bir şeydir.bileşenin kendisinde bağlamsal bir “özel” Özellik olan ancak bir yedek ile “genel” bir Özellik olarak ayarlanan.
:host {
--_n-divider-color: var(--n-divider-color, var(--n-color-border));
--_n-divider-size: var(--n-divider-size, 1px);
}.n-divider {
border-block-start: solid var(--_n-divider-size) var(--_n-divider-color);
/* ... */
}
Bağlamsal Özel Özelliklerimizi bu şekilde tanımlamamız, daha önce yaptığımız tüm şeyleri, örneğin global belirteç değerlerini devralmak ve bileşen kodumuz boyunca değerleri yeniden kullanmak gibi; ancak bileşen aynı zamanda bu özelliğin yeni tanımlarını kendisine veya herhangi bir üst öğeye zarif bir şekilde miras alacaktır.
nord-divider></nord-divider>section>
nord-divider></nord-divider>
<!-- ... -->
</section>
style>
nord-divider {
--n-divider-color: var(--n-color-status-danger);
}
section {
padding: var(--n-space-s);
background: var(--n-color-surface-raised);
--n-divider-color: var(--n-color-status-success);
}
</style>
Bu yöntemin gerçekten “özel” olmadığı tartışılsa da, bunun endişelendiğimiz bir soruna oldukça zarif bir çözüm olduğunu düşünüyoruz. Fırsat bulduğumuzda, bunu bileşenlerimizde ele alacağız, böylece geliştirme ekibimiz, elimizdeki korkuluklardan yararlanmaya devam ederken bileşen kullanımı üzerinde daha fazla kontrole sahip olacak.
Umarım Web Bileşenlerini CSS Özel Özellikleri ile nasıl kullandığımıza ilişkin bu içgörüyü faydalı bulmuşsunuzdur. Ne düşündüğünüzü bize bildirin ve bu yöntemlerden herhangi birini kendi işinizde kullanmaya karar verirseniz, beni Twitter’da bulabilirsiniz. @DavidDarnes. Ayrıca Nordhealth’i de bulabilirsiniz. @NordhealthHQ Twitter’da ve bu tasarım sistemini bir araya getirmek ve bu makalede belirtilen özellikleri uygulamak için çok çalışan ekibimin geri kalanı: @Williamis, @WickyNilliams Ve @eric_habich.
Kahraman görseli Dan Cristian Pădureț