Temel CSS ilkelerini öğrenirken, sürdürülebilirliği sağlamak için modüler, yeniden kullanılabilir ve açıklayıcı stiller yazılması öğretilir. Ancak geliştiriciler gerçek dünyadaki uygulamalarla ilgilenmeye başladığında, stiller istenmeyen alanlara sızmadan kullanıcı arayüzü özellikleri eklemek çoğu zaman imkansız gibi geliyor. Bu sorun genellikle kartopu gibi kendi kendini gerçekleştiren bir döngüye dönüşür; Teorik olarak tek bir öğeye veya sınıfa odaklanan stiller, ait olmadıkları yerde ortaya çıkmaya başlar. Bu, geliştiriciyi, sızdırılan stilleri geçersiz kılmak için daha spesifik seçiciler oluşturmaya zorlar; bu seçiciler daha sonra yanlışlıkla genel stilleri geçersiz kılar ve bu böyle devam eder. BEM gibi katı sınıf adı kuralları bu soruna yönelik teorik çözümlerden biridir. BEM (Blok, Öğe, Değiştirici) metodolojisi, CSS dosyalarında yeniden kullanılabilirliği ve yapıyı sağlamak için CSS sınıflarını adlandırmanın sistematik bir yoludur. Bunun gibi adlandırma kuralları, öğeleri ve durumlarını tanımlamak için etki alanı dilinden yararlanarak bilişsel yükü azaltabilir ve doğru şekilde uygulanırsa, büyük uygulamalara yönelik stillerin bakımını kolaylaştırabilir. Ancak gerçek dünyada işler her zaman böyle yürümez. Öncelikler değişebilir ve değişimle birlikte uygulama tutarsız hale gelir. HTML yapısında yapılan küçük değişiklikler, birçok CSS sınıfı adı revizyonunu gerektirebilir. Yüksek düzeyde etkileşimli ön uç uygulamalarda, BEM modelini izleyen sınıf adları uzun ve kullanışsız hale gelebilir (örneğin, uygulama-kullanıcı-genel bakış__durum--kimlik doğrulaması yapılıyor) ve adlandırma kurallarına tam olarak uymamak sistemin yapısını bozar ve dolayısıyla faydalarını boşa çıkarır. Bu zorluklar göz önüne alındığında, geliştiricilerin çerçevelere yönelmesi şaşırtıcı değil; Tailwind en popüler CSS çerçevesidir. Stiller arasında kazanılamaz bir özgüllük savaşı gibi görünen bir şeyle mücadele etmeye çalışmak yerine, CSS Cascade'den vazgeçmek ve tam izolasyonu garanti eden araçları kullanmak daha kolaydır. Geliştiriciler Yardımcı Programlara Daha Fazla Yön Veriyor Bazı geliştiricilerin basamaklı stillerden kaçınmaya istekli olduklarını nasıl bilebiliriz? Bu, özellikle bu amaç için tasarlanmış, JS'de CSS çerçeveleri gibi "modern" ön uç araçların yükselişidir. Belirli bileşenlere sıkı bir şekilde odaklanan izole stillerle çalışmak, temiz bir nefes gibi görünebilir. Halen en nefret edilen ve zaman alan ön uç görevlerinden biri olan şeyleri adlandırma ihtiyacını ortadan kaldırır ve geliştiricilerin, CSS mirasının faydalarını tam olarak anlamadan veya bunlardan faydalanmadan üretken olmalarına olanak tanır. Ancak CSS Cascade'den vazgeçmenin kendi sorunları var. Örneğin, JavaScript'te stil oluşturmak, ağır yapı yapılandırmaları gerektirir ve çoğu zaman stillerin bileşen işaretlemesi veya HTML ile garip bir şekilde birbirine karışmasına yol açar. Dikkatlice düşünülmüş adlandırma kuralları yerine, derleme araçlarının bizim için seçicileri ve tanımlayıcıları otomatik olarak oluşturmasına izin veriyoruz (ör. .jsx-3130221066), bu da geliştiricilerin kendi başına başka bir sözde dile ayak uydurmasını gerektiriyor. (Sanki bileşeninizin kullanım efektlerinin ne işe yaradığını anlamanın bilişsel yükü zaten yeterli değilmiş gibi!) Sınıfları adlandırma işinin araçlara daha da soyutlanması, Geliştirici Araçları gibi canlı hata ayıklamayı destekleyen yerel tarayıcı özelliklerinden yararlanmak yerine, temel hata ayıklamanın genellikle geliştirme için derlenen belirli uygulama sürümleriyle sınırlandırıldığı anlamına gelir. Sanki web'in halihazırda sağladığı şeyleri soyutlamak için kullandığımız araçlarda hata ayıklamak için araçlar geliştirmemiz gerekiyor; bunların hepsi standart CSS yazmanın "acısından" kaçmak adına. Neyse ki, modern CSS özellikleri yalnızca standart CSS yazmayı daha esnek hale getirmekle kalmıyor, aynı zamanda bizim gibi geliştiricilere bu aşamayı yönetme ve bizim için çalışmasını sağlama konusunda çok daha fazla güç veriyor. CSS Cascade Katmanları harika bir örnek, ancak şaşırtıcı derecede dikkat çekmeyen başka bir özellik daha var - ancak yakın zamanda Baseline uyumlu hale gelmesiyle bu durum değişiyor. CSS @scope Kuralında CSS @scope at-rule'ın, ele aldığımız stil sızıntısının neden olduğu endişeye karşı potansiyel bir tedavi olduğunu düşünüyorum; bu, bizi soyutlamalar ve ekstra derleme araçları için yerel web avantajlarından ödün vermeye zorlamaz. "@scope CSS at-rule, belirli DOM alt ağaçlarındaki öğeleri seçmenizi, geçersiz kılınması zor aşırı spesifik seçiciler yazmadan ve seçicilerinizi DOM yapısına çok sıkı bağlamadan öğeleri hassas bir şekilde hedeflemenizi sağlar."— MDN
Başka bir deyişle, kalıtımdan, basamaklandırmadan ve hatta endişelerin temel ayrımından ödün vermeden belirli durumlarda yalıtılmış stillerle çalışabiliriz.Bu, ön uç geliştirmenin uzun süredir devam eden yol gösterici ilkesi olmuştur. Ayrıca mükemmel tarayıcı kapsamına sahiptir. Aslında Firefox 146, Aralık ayında @scope desteğini ekleyerek onu ilk kez Baseline uyumlu hale getirdi. BEM modelini kullanan bir düğme ile @scope kuralını kullanan bir düğme arasında basit bir karşılaştırma:
@scope kuralı daha az karmaşıklıkla hassasiyete izin verir. Geliştiricinin artık sınıf adlarını kullanarak sınırlar oluşturmasına gerek yok; bu da yerel HTML öğelerine dayalı seçiciler yazmalarına olanak tanıyor ve böylece kuralcı CSS sınıf adı kalıplarına olan ihtiyacı ortadan kaldırıyor. @scope, sınıf adı yönetimi ihtiyacını ortadan kaldırarak büyük projelerde CSS ile ilgili korkuyu hafifletebilir.
Temel Kullanım
Başlamak için CSS'nize @scope kuralını ekleyin ve hangi stillerin kapsamının belirleneceğini bir kök seçici ekleyin:
@scope (
Yani, örneğin, stillerin kapsamını bir
@kapsam (nav) { a { /* Gezinme kapsamındaki bağlantı stilleri */ }
a:active { /* Etkin bağlantı stilleri */ }
a:active::before { /* Ekstra stil için sözde öğeli aktif bağlantı */ }
@media (maks. genişlik: 768 piksel) { a { /* Duyarlı ayarlamalar */ } } }
Bu tek başına çığır açıcı bir özellik değil. Ancak kapsamın başlangıç ve bitiş noktalarını etkili bir şekilde tanımlayan daha düşük bir sınır oluşturmak için kapsama ikinci bir argüman eklenebilir.
/* ul içindeki herhangi bir a elemanına stil uygulanmayacaktır */ @scope (nav)'dan (ul)'a { bir { yazı tipi boyutu: 14 piksel; } }
Bu uygulamaya halka kapsamı denir ve DOM yapısına sıkı sıkıya bağlı bir dizi benzer, oldukça spesifik seçiciler, :not sözde seçici veya farklı CSS'yi işlemek için
/*
Sonuç Tailwind gibi yardımcı program öncelikli CSS çerçeveleri prototip oluşturma ve daha küçük projeler için iyi çalışır. Ancak birkaç geliştiriciden fazlasını içeren daha büyük projelerde kullanıldığında faydaları hızla azalır. Son birkaç yılda ön uç geliştirme giderek daha fazla karmaşık hale geldi ve CSS de bir istisna değil. @scope kuralı her derde deva olmasa da karmaşık araçlara olan ihtiyacı azaltabilir. Stratejik sınıf adlandırma yerine veya onunla birlikte kullanıldığında @scope, sürdürülebilir CSS yazmayı daha kolay ve daha eğlenceli hale getirebilir. İleri Okuma
CSS @kapsamı (MDN) “CSS @kapsamı”, Juan Diego Rodríguez (CSS-Tricks) Firefox 146 Sürüm Notları (Firefox) Tarayıcı Desteği (CanIUse) Popüler CSS Çerçeveleri (CSS 2024'ün Durumu) “CSS'deki “C”: Cascade”, Thomas Yip (CSS-Tricks) BEM Tanıtımı (BEM'i Alın)
