Tasarımlı Bileşenlere 5 Dakika Giriş

CSS çok garip. Temellerini 15 dakika içinde öğrenebilirsiniz. Ancak stillerinizi düzenlemenin iyi bir yolunu bulmanız yıllar alabilir.

Bunun bir kısmı sadece dilin tuhaflıklarından kaynaklanmaktadır. Kutunun dışında, CSS değişken, döngü ya da işlev olmadan oldukça sınırlıdır. Aynı zamanda, öğeleri, sınıfları, kimlikleri veya bunların herhangi bir birleşimini biçimlendirebilmeniz oldukça müsaittir.

Kaotik Stil Sayfaları

Muhtemelen kendin için deneyimlemişsindir, bu genellikle kaos için bir reçetedir. SASS ve LESS gibi ön işlemciler birçok faydalı özellik eklerken, CSS anarşisini durdurmak için pek bir şey yapmazlar.

Bu örgütsel iş, yararlı olmasına rağmen tamamen isteğe bağlı olan ve dil veya takım düzeyinde uygulanamayan BEM gibi metodolojilere bırakıldı.

CSS'nin Yeni Dalgası

Birkaç yıl ileri sarılın ve yeni bir JavaScript tabanlı araç dalgası, CSS yazma biçiminizi değiştirerek bu sorunları kökünde çözmeye çalışıyor.

Stil Bileşenleri bu kütüphanelerden biridir ve inovasyon ve aşinalık karışımı nedeniyle hızla dikkat çekmektedir. Bu nedenle, React kullanıyorsanız (ve kullanmazsanız, JavaScript çalışma planımı ve React'e olan girişimi kontrol edin), kesinlikle bu yeni CSS alternatifine göz atmaya değer.

Geçenlerde kişisel sitemi yeniden tasarlamak için kullandım ve bugün süreçte öğrendiğim birkaç şeyi paylaşmak istedim.

Bileşenler, Tarz

Tarz Bileşenleri hakkında anlamanız gereken en önemli şey, adının tam anlamıyla alınması gerektiğidir. Artık HTML öğelerini veya bileşenlerini sınıflarına veya HTML öğelerine göre biçimlendirmiyorsunuz:

Merhaba Dünya

h1.title {
  yazı tipi boyutu: 1.5em;
  Mor renk;
}

Bunun yerine, kendi kapsüllenmiş stillerine sahip olan stil bileşenleri tanımlıyorsunuz. Ardından bunları kod tabanınızda serbestçe kullanıyorsunuz:

'stilli-komponentlerden' ithal tarz;
const Başlık = styled.h1`
  yazı tipi boyutu: 1.5em;
  Mor renk;
`;
 Merhaba Dünya 

Bu küçük bir fark gibi görünebilir ve aslında her iki sözdizimi de benzerdir. Ancak, temel fark, stillerin artık bileşenlerinin bir parçası olmasıdır.

Başka bir deyişle, bileşen ve stilleri arasında aracı bir adım olarak CSS sınıflarından kurtuluyoruz.

Tarz-bileşenleri ortak yaratıcısı Max Stoiber'in dediği gibi:

“Stilli bileşenlerin temel fikri, stiller ve bileşenler arasındaki eşlemeyi kaldırarak en iyi uygulamaları uygulamaktır.”

Boşaltma Karmaşıklığı

Bu ilk bakışta karşı sezgisel görünecektir, çünkü HTML öğelerini doğrudan biçimlendirmek yerine CSS'yi kullanmanın asıl amacı ( etiketini hatırlamak mı?) Bu ara sınıf katmanını tanıtarak stilleri ve işaretlemeleri ayırmaktır.

Ancak bu ayrıştırma aynı zamanda çok fazla karmaşıklık yaratıyor ve CSS ile karşılaştırıldığında, JavaScript gibi “gerçek” bir programlama dilinin bu karmaşıklığı ele almak için daha iyi bir donanıma sahip olduğuna dair bir argüman var.

Sınıf Üzeri Sahne

Bu sınıfsız felsefeye uygun olarak, stilli-bileşenler, bir bileşenin davranışını kişiselleştirmeye gelince, sınıflar üzerindeki donanımları kullanır. Yani yerine:

Merhaba Dünya

// mavi olacak
h1.title {
  yazı tipi boyutu: 1.5em;
  Mor renk;
  
  &.birincil{
    renk: mavi;
  }
}

Yazacaksınız:

const Başlık = styled.h1`
  yazı tipi boyutu: 1.5em;
  renk: $ {props => props.primary? 'Mavi mor'};
`;
 Merhaba Dünya  // mavi olacak

Gördüğünüz gibi, stil bileşenleri, tüm CSS ve HTML ile ilgili uygulama ayrıntılarını bunlardan uzak tutarak React bileşenlerinizi temizlemenizi sağlar.

Bununla birlikte, tarz bileşenleri CSS hala CSS'dir. Dolayısıyla, bunun gibi şeyler de tamamen geçerlidir (her ne kadar salak olmasa da) kod:

const Başlık = styled.h1`
  yazı tipi boyutu: 1.5em;
  Mor renk;
  
  &.birincil{
    renk: mavi;
  }
`;
 Merhaba Dünya  // mavi olacak

Bu, stil bileşenlerinin kolayca ele geçirilmesini kolaylaştıran bir özelliktir: şüpheye düştüğünüzde bildiğiniz her şeye geri dönebilirsiniz!

Uyarılar

Tarz bileşenlerinin hala genç bir proje olduğunu ve bazı özelliklerin henüz tam olarak desteklenmediğini de belirtmek önemlidir. Örneğin, bir alt öğeyi bir ebeveynden stillendirmek istiyorsanız, şimdilik CSS sınıflarını kullanmanız gerekir (en azından stillendirilmiş bileşenler v2 çıkana kadar).

Stilleri elle enjekte ederek kesinlikle mümkün olmasına rağmen, CSS'nizi henüz sunucuda önceden oluşturmanın bir "resmi" yolu da yok.

Stil bileşenlerinin kendi randomize sınıf adlarını üretmesi, stillerin başlangıçta nerede tanımlandığını bulmak için tarayıcınızın geliştirme araçlarını kullanmayı zorlaştırabilir.

Ancak, çok cesaret verici olan, tarz bileşenlerinin çekirdek ekibinin tüm bu sorunların farkında olması ve onları tek tek düzeltmek için çok uğraşıyor olması. Versiyon 2 yakında geliyor ve ben gerçekten dört gözle bekliyorum!

Daha fazla bilgi edin

Buradaki amacım, tarz bileşenlerinin nasıl çalıştığını ayrıntılı olarak açıklamak değil, size küçük bir bakış açısı vermek için daha fazla incelemeye değer olup olmadığına karar vermenizdir.

Sizi meraklandırmayı başardıysam, burada stillendirilmiş bileşenler hakkında daha fazla bilgi edinebileceğiniz bazı yerler:

  • Max Stoiber kısa süre önce Smashing Magazine için tarz bileşenlerin sebebi hakkında bir makale yazdı.
  • Tarz-bileşenleri deposunun kendisi kapsamlı bir dokümantasyona sahiptir.
  • Jamie Dixon'ın bu makalesinde, stil bileşenlerine geçmenin birkaç faydası ana hatlarıyla açıklanmaktadır.
  • Kütüphanenin gerçekte nasıl uygulandığı hakkında daha fazla bilgi edinmek istiyorsanız, Max.

Daha da ileri gitmek istiyorsanız, yeni dalga CSS ile farklı bir çekim olan Glamour'a da göz atabilirsiniz!

Kendini terfi süresi: formlara, veri yüklemeye ve kullanıcı hesaplarına sahip tam yığın React & GraphQL uygulamaları oluşturmanın en kolay yolu olan Nova'ya yardımcı olacak açık kaynak kodlu katılımcıları arıyoruz. Tarz-bileşenleri henüz kullanmıyoruz, ancak ilk uygulayan siz olabilirsiniz!