CSS Özel Özellikleriyle Uygulama Renk Şemaları Nasıl Yapılandırılır

Değişkenler, bir projedeki renkleri düzenlemeye yardımcı olan temel bir araçtır. Uzun bir süre ön uç mühendisleri, bir projedeki renkleri yapılandırmak için önişlemci değişkenlerini kullandılar. Ancak şimdi birçok geliştirici, renk değişkenlerini düzenlemek için modern yerel mekanizmayı tercih ediyor: CSS Özel Özellikleri. Önişlemci değişkenlerine göre en önemli avantajları, projenin derleme aşamasında değil, gerçek zamanlı olarak çalışmaları ve anında değerlerin kalıtımını ve yeniden tanımlanmasını kullanmanıza izin veren kademeli model desteğine sahip olmalarıdır.

Bir uygulama renk şemasını düzenlemeye çalışırken, renkle ilgili tüm özel özellikleri her zaman kök bölümüne yerleştirebilir, adlandırabilir ve gereken tüm yerlerde kullanabilirsiniz.

Bu bir seçenektir, ancak uygulama teması, beyaz etiketleme, marka yenileme veya açık veya koyu modu düzenleme sorunlarını çözmenize yardımcı olur mu? Kontrastı artırmak için renk düzenini ayarlamanız gerekirse ne olur? Mevcut yaklaşımla, değişkenlerinizdeki her değeri güncellemeniz gerekecek.

Bu makalede, bu sorunların çoğunu çözebilecek özel özellikler kullanarak renk değişkenlerinin nasıl bölüneceği konusunda daha esnek ve dirençli bir yaklaşım önermek istiyorum.

Renk Paletini Ayarla

Herhangi bir web sitesinin renklendirilmesi, bir renk şemasının ayarlanmasıyla başlar. Böyle bir şema, renk tekerleğine dayanmaktadır. Genellikle, bir paletin temelini yalnızca birkaç ana renk oluşturur, geri kalanı türetilmiş renklerdir - tonlar ve orta tonlar. Çoğu zaman, palet statiktir ve web uygulaması çalışırken değişmez.

Renk teorisine göre, renk şemaları için yalnızca birkaç seçenek vardır:

• Tek renkli şema (bir ana renk)
• Tamamlayıcı şema (iki ana renk)
• Triad şeması (üç ana renk)
• Tetradic şeması (dört ana renk)
• Bitişik desen (iki veya üç ana renk)

Örneğimde, Paletton hizmetini kullanarak bir üçlü renk şeması oluşturacağım:

Artık üç ana rengim var. Bunlara dayanarak tonları ve orta tonları hesaplayacağım ( calc işleviyle birlikte HSL formatı bunun için çok kullanışlı bir araçtır). Açıklık değerini değiştirerek palet için birkaç ek renk üretebilirim.

Şimdi palet değiştirilirse, yalnızca ana renklerin değerini değiştirmek gerekecektir. Gerisi otomatik olarak yeniden hesaplanacaktır.

HEX veya RGB formatlarını tercih ederseniz, fark etmez; projeyi derleme aşamasında önişlemcinin karşılık gelen işlevleriyle (örn. SCSS ve color-adjust işleviyle) bir palet oluşturulabilir. Daha önce de bahsettiğim gibi, bu katman çoğunlukla statiktir; Çalışan bir uygulamada paletin değiştirilmesi son derece nadirdir. Bu yüzden önişlemciler ile hesaplayabiliriz.

Not : Ayrıca her renk için hem HEX değişmezi hem de RGB oluşturmanızı öneririm. Bu, gelecekte alfa kanalıyla oynamaya izin verecektir.

Palet seviyesi, rengin doğrudan değişken isimlerinde kodlandığı tek seviyedir, yani ismi okuyarak rengi benzersiz bir şekilde tanımlayabiliriz.

Temayı veya İşlevsel Renkleri Tanımlayın

Palet tamamlandıktan sonraki adım, fonksiyonel renklerin seviyesidir. Bu düzeyde rengin değeri, amacı, gerçekleştirdiği işlev ve tam olarak neyi renklendirdiği kadar önemli değildir. Örneğin, birincil veya uygulama markası rengi, kenarlık rengi, koyu arka plandaki metnin rengi, açık arka plandaki metnin rengi, düğme arka plan rengi, bağlantı rengi, vurgulu bağlantı rengi, ipucu metni rengi vb. .

Bunlar hemen hemen her web sitesi veya uygulama için son derece yaygın şeylerdir. Bu tür renklerin uygulamanın belirli bir renk temasından sorumlu olduğunu söyleyebiliriz. Ayrıca, bu tür değişkenlerin değerleri kesinlikle paletten alınır. Böylece farklı renk paletleriyle basitçe çalışarak uygulama temalarını kolayca değiştirebiliyoruz.

Aşağıda, üç tipik UI kontrolü oluşturdum: bir düğme, bir bağlantı ve bir giriş alanı. Daha önce yukarıda oluşturduğum paletten değerleri içeren fonksiyonel değişkenler kullanılarak renklendirilirler. Uygulama temasından (koşullu marka) sorumlu olan ana fonksiyonel değişken, birincil renk değişkenidir.

Üstteki üç düğmeyi kullanarak temalar arasında geçiş yapabilirsiniz (kontroller için marka rengini değiştirin). Değişiklik, uygun CSSOM API'si (setProperty) kullanılarak gerçekleşir.

Bu yaklaşım, yalnızca tema oluşturmak için değil, aynı zamanda tek tek web sayfalarını yapılandırmak için de uygundur. Örneğin, zubry.by web sitesinde, tüm sayfalar için logoyu, başlıkları, kontrolleri ve metin seçimini renklendirmek için ortak bir stil sayfası ve --page-color işlevsel değişkeni kullandım. Ve her sayfanın kendi stillerinde, sayfayı kendi ana rengini ayarlamak için bu değişkeni yeniden tanımladım.

Bileşen Renklerini Kullan

Büyük web projeleri her zaman ayrıştırma içerir; her şeyi küçük parçalara ayırıyor ve birçok yerde yeniden kullanıyoruz. Her bileşenin genellikle kendi stili vardır, yani BEM veya CSS Modüllerini veya başka bir yaklaşımı ayrıştırmak için ne kullandığımızın önemi yoktur; bu tür her bir kod parçasının yerel kapsam olarak adlandırılabilmesi ve yeniden kullanılabilmesi önemlidir.

Genel olarak, iki durumda bileşen düzeyinde renk değişkenlerini kullanmanın noktasını görüyorum.

Birincisi, uygulama stil kılavuzuna göre bileşenlerin farklı ayarlarla tekrarlanmasıdır, örneğin birincil (marka) düğmesi, ikincil düğme, üçüncül vb. gibi farklı ihtiyaçlar için düğmeler.

İkincisi, farklı renklere sahip birkaç duruma sahip bileşenlerin, örneğin düğmenin üzerine gelme, etkin ve odak durumları; giriş veya seçim alanı için normal ve geçersiz durumlar vb.

Bileşen değişkenlerinin kullanışlı olabileceği daha nadir bir durum, "beyaz etiket" işlevidir. "Beyaz etiket", kullanıcının müşterileriyle etkileşim deneyimini geliştirmek için kullanıcı arayüzünün bir bölümünü özelleştirmesine veya markalamasına olanak tanıyan bir hizmet özelliğidir. Örneğin, bir kullanıcının bir hizmet veya e-posta şablonları aracılığıyla müşterileriyle paylaştığı elektronik belgeler. Bu durumda, bileşen düzeyindeki değişkenler, belirli bileşenlerin uygulamanın renk temasının geri kalanından ayrı olarak yapılandırılmasına yardımcı olacaktır.

Aşağıdaki örnekte, birincil (marka) düğmesinin renklerini özelleştirmek için kontroller ekledim. Bileşen seviyesinin renk değişkenlerini kullanarak UI kontrollerini birbirinden ayrı olarak yapılandırabiliriz.

Artur Başak'ın Kalem [Bileşen Renklerine](https://codepen.io/smashingmag/pen/LYNEXdw) bakın.

Bir Değişkenin Hangi Düzeyde Olduğu Nasıl Belirlenir?

Köke ne konulabileceğini (tema veya işlevsel düzey) nasıl anlayacağım ve bir bileşen düzeyinde ne bırakacağım sorusuyla karşılaştım. Bu, üzerinde çalıştığınız durumu görmeden yanıtlaması zor olan mükemmel bir soru.

Ne yazık ki, programlamadaki ile aynı yaklaşım renkler ve stiller ile çalışmaz, eğer üç özdeş kod parçası görürsek, onu yeniden düzenlememiz gerekir.

Renk bileşenden bileşene tekrarlanabilir, ancak bu bir kural olduğu anlamına gelmez. Bu tür bileşenler arasında hiçbir ilişki olamaz. Örneğin, giriş alanının sınırı ve birincil düğmenin arka planı. Evet, yukarıdaki örneğimde durum böyle, ancak aşağıdaki örneği kontrol edelim:

Koyu gri renk tekrarlanır - bu, giriş alanının sınırı, kapat simgesinin dolgu rengi ve ikincil düğmenin arka planıdır. Ancak bu bileşenler hiçbir şekilde birbirleriyle bağlantılı değildir. Giriş alanının kenarlık rengi değişirse, ikincil düğmenin arka planını değiştirmeyeceğiz. Böyle bir durum için sadece paletteki değişkeni burada tutmalıyız.

Peki ya yeşil? Bunu açıkça birincil veya marka rengi olarak tanımlayabiliriz, büyük olasılıkla ana düğmenin rengi değişirse, bağlantının rengi ve birinci seviyenin başlığı da değişecektir.

Peki ya kırmızı? Geçersiz giriş alanları durumu, hata mesajları ve yıkıcı düğmeler, tüm uygulama düzeyinde aynı renge sahip olacaktır. Bu bir kalıptır. Şimdi kök bölümünde birkaç yaygın işlevsel değişken tanımlayabilirim:

Bileşen renklerinin düzeyiyle ilgili olarak, özel özellikler kullanılarak özelleştirilebilen bileşenleri kolayca tanımlayabiliriz.

Düğme farklı ayarlarla tekrarlanır, arka plan rengi ve farklı kullanım durumları için metin değişir - birincil, ikincil, üçüncül, yıkıcı veya olumsuz durum.

Giriş alanının iki durumu vardır - arka plan ve kenarlık renklerinin farklı olduğu yanlış ve normal. Ve böylece, bu ayarları ilgili bileşenlerin düzeyinde renk değişkenlerine koyalım.

Bileşenlerin geri kalanı için yerel renk değişkenlerini tanımlamak gerekli değildir, bu gereksiz olacaktır.

Muhtemelen tasarım ekibi ve UX tarafından geliştirilmekte olan projenizin kalıp diline dalmanız gerekir. Mühendisler, görsel bir dilin tüm kavramını tam olarak anlamalıdır, ancak o zaman neyin ortak olduğunu ve işlevsel bir düzeyde yaşaması gerektiğini ve neyin yerel görünürlük kapsamında kalması gerektiğini belirleyebiliriz.

Ama her şey o kadar karmaşık değil, bariz şeyler var. Sayfanın genel arka planı, ana metnin arka planı ve rengi, çoğu durumda uygulamanızın temasını belirleyen budur. Belirli bir modun (karanlık veya aydınlık mod gibi) yapılandırılmasından sorumlu olan bu tür şeyleri toplamak son derece uygundur.

Neden Her Şeyi Kök Bölüme Koymuyorsunuz?

Böyle bir deneyimim oldu. Lition projesinde ekip ve ben, web uygulaması için IE11'i desteklememiz gerektiği, ancak web sitesi ve inişler için desteklemememiz gerektiği gerçeğiyle karşı karşıya kaldık. Projeler arasında ortak bir UI Kiti kullanıldı ve tüm değişkenleri köke koymaya karar verdik, bu onları herhangi bir düzeyde yeniden tanımlamamıza izin verecek.

Ayrıca web uygulaması ve IE11 durumu için bu yaklaşımla, kodu aşağıdaki işlemci sonrası eklentiden geçirdik ve bu değişkenleri projedeki tüm UI bileşenleri için değişmez değerlere dönüştürdük. Bu hile, ancak tüm değişkenler kök bölümde tanımlanmışsa mümkündür, çünkü son işlemci kademeli modelin özelliklerini anlayamaz.

Şimdi anlıyorum ki bu doğru yol değildi. İlk olarak, bileşen renklerini kök bölüme koyarsanız, endişelerin ayrılması ilkesini bozarsınız. Sonuç olarak, stil sayfasında gereksiz CSS ile sonuçlanabilirsiniz. Örneğin, her bileşenin kendi stillerine sahip olduğu bileşenler klasörünüz var. Ayrıca, kök bölümde renk değişkenlerini tanımladığınız ortak bir stil sayfanız var. Düğme bileşenini kaldırmaya karar verdiniz; bu durumda, ortak stiller dosyasından düğmeyle ilişkili değişkenleri de kaldırmayı unutmamalısınız.

İkincisi, bu performans açısından en iyi çözüm değil. Evet, bir renk değişikliği yalnızca yeniden boyama işlemine neden olur, yeniden akıtma/yerleşim değil, bu kendi başına çok maliyetli değildir, ancak en üst düzeyde bazı değişiklikler yaptığınızda, tüm ağacı kontrol etmek için bu işlemlerden daha fazla kaynak kullanırsınız. değişiklikler küçük bir yerel alandadır. Daha fazla ayrıntı için Lisi Linhart'tan CSS değişkenlerinin performans karşılaştırmasını okumanızı tavsiye ederim.

Şu anki projemde Tispr, ekip ve ben split kullanıyoruz ve her şeyi köke atmıyoruz, üst düzeyde sadece bir palet ve işlevsel renkler. Ayrıca, IE11'den korkmuyoruz, çünkü bu sorun ilgili çoklu dolgu ile çözülür. Sadece npm modülünü kurun ie11-custom-properties ve kitaplığı uygulama JS paketinize aktarın:

 // Use ES6 syntax import "ie11-custom-properties"; // or CommonJS require('ie11-custom-properties');

Veya komut dosyası etiketine göre modül ekleyin:

 <script async src="./node_modules/ie11-custom-properties/ie11CustomProperties.js">

Ayrıca kütüphaneyi npm olmadan CDN üzerinden ekleyebilirsiniz. Bu çoklu dolgunun çalışması, özelliklerin kademeli olarak tanımlanıp okunabildiği özel özellikler için IE11'in minimum desteğe sahip olduğu gerçeğine dayanmaktadır. Bu, çift tire ile başlayan özelliklerle mümkün değildir, ancak muhtemelen tek bir tire ile (satıcı öneklerine benzer mekanizma) mümkündür. Bununla ilgili daha fazla bilgiyi depo belgelerinde okuyabilir ve bazı limitler hakkında bilgi sahibi olabilirsiniz. Diğer tarayıcılar bu çoklu dolguyu yok sayar.

Aşağıda, e-belgeler (kullanıcı sözleşmeleri, faturalar veya teklifler gibi) için "beyaz etiket" işlevselliğinin kontrollerinin yanı sıra Tispr web uygulamasının bir paleti bulunmaktadır.

Neden Renk Değişkenlerini JavaScript Tarafında Saklamıyorsunuz?

Başka bir makul soru: neden palet ve işlev değişkenlerini JavaScript kodunda saklamıyorsunuz? Bu aynı zamanda dinamik olarak değiştirilebilir ve daha sonra satır içi stiller aracılığıyla renkleri yeniden tanımlayabilir. Bu bir seçenek olabilir, ancak belirli öğelere erişmeniz ve renk özelliklerini değiştirmeniz gerektiğinden büyük olasılıkla bu yaklaşım daha az optimal olacaktır. CSS değişkenleri ile yalnızca tek bir özelliği, yani değişken değerini değiştireceksiniz.

JavaScript'te renklerle çalışmak için yerel işlevler veya API yoktur. CSS Renk Modülü 5'te, türetilmiş renkler yapmak veya bir şekilde hesaplamak için birçok fırsat olacaktır. Geleceğin perspektifinden, CSS Özel Özellikleri, JS değişkenlerinden daha zengin ve daha esnektir. Ayrıca JS değişkenleri ile kalıtımı kademeli olarak kullanma imkanı olmayacaktır ve bu ana dezavantajdır.

Çözüm

Renkleri üç düzeye (palet, işlevsel ve bileşen) bölmek, bir proje üzerinde çalışırken değişikliklere ve yeni gereksinimlere daha uyumlu olmanıza yardımcı olabilir. CSS Özel Özelliklerinin renk ayrımını düzenlemek için doğru araç olduğuna inanıyorum - stil için ne kullandığınız önemli değil: saf CSS, ön işlemciler veya CSS-in-JS yaklaşımı.

Bu yaklaşıma kendi deneyimlerimle geldim ama yalnız değilim. Sara Soueidan, makalesinde, değişkenleri küresel ve bileşen düzeylerine ayırdığı benzer bir yaklaşımı tanımladı.

Ayrıca Lea Verou'nun CSS değişkenlerinin olası uygulama durumlarını (sadece renk açısından değil) açıkladığı makalesini okumanızı tavsiye ederim.