Bir Yıl Yardımcı Sınıflar

Faydalı Alternatif Metin Yazma

"Şekilsiz” />

Geçen yıl Çamur CSS’ye (atomik CSS olarak da bilinir) fayda öncelikli bir yaklaşım benimsedik. Özellikle kullanmaya karar verdik Kuyruk rüzgarıCSSbir kullanıcı arabirimini hızla oluşturmak için projelerinize uygulayabileceğiniz bir dizi sınıf sağlayan bir yardımcı sınıf çerçevesi.

Sarah Dayan geçen yıl hakkında harika bir makale yayınladı. yardımcı program öncelikli CSS’nin faydalarıve genel olarak yaklaşımın bazı avantajlarına dair iyi bir genel bakış elde etmek için bunu okumanızı tavsiye ederim. Bu makalede, geçen yıl bir ajans bağlamında atomik CSS’yi benimsemekten öğrendiklerimi ve bunu uygulamanın nerede uygun olup olamayacağını özetleyeceğim.

Yardımcı sınıflar nelerdir?

Yardımcı sınıflar, belirli bir amaca hizmet eden ve bu şekilde adlandırılan CSS sınıf adlarıdır. Tipik olarak bir sınıf gibi .bg-blue sana verirdim background-color: blue, örneğin. CSS içinde yardımcı program sınıflarını kullanmak alışılmadık bir durum değildir, ancak genel olarak bunlar, en azından BEM ve ITCSS gibi köklü metodolojilerle, idareli olarak kullanılma eğilimindedir.

Fayda sınıfı çerçevelerinin yükselişi hakkındaki düşünce, bunu tersine çevirir ve bir öğeye uygulamak isteyebileceğiniz hemen hemen her türlü ortak stili kapsayan sınıflarla, öncelikle faydalı sınıflarla geliştirmeyi savunur. Etrafında birçok yardımcı sınıf çerçevesi vardır (takyonlar bir örnektir), ancak özellikle Tailwind, kısalık ile yeterince açıklayıcı olma arasındaki ince çizgide yürüyen basit sınıf adları sağlar. İlk başta bunları ezberlemek biraz zaman alabilir, ancak sınıf adlarının çoğu oldukça sezgiseldir ve birkaç gün boyunca projemin yanında belgelerle birlikte bir pencere açtıktan sonra onlara başvurmaya neredeyse hiç gerek duymadım. hiç. (hatta bir VS Kodu için eklenti dokümanlara erişmek için editörünüzden ayrılmanıza bile gerek yok! Bunu kullanmadım, bu yüzden kefil olamam.)

gibi bir dizi sınıf block p-1 mb-1 text-white bg-blue hover:bg-red aşağıdakine eşdeğer olacaktır:

.some-element {
display: block;
padding: 0.25rem;
margin-bottom: 0.25rem;
color: #ffffff;
background-color: #3490dc;
}

.some-element:hover {
background-color: #e3342f;
}

Bu, özgüllük ağacımızın neredeyse düz olduğu anlamına gelir. Yakında göreceğimiz gibi, birkaç istisna dışında, CSS’nin “basamaklı” kısmını gerçekten kullanmıyorsunuz.

Çerçeveler hakkında bir kelime

“CSS çerçevesi” kelimeleri oldukça yanıltıcı olabilir ve farklı insanlar için farklı şeyler çağrıştırabilir. Birçok insan için bu kelimeler, arayüzler oluşturmanıza yardımcı olacak HTML bileşenleri ve CSS sınıfları sağlayan Bootstrap, Foundation ve diğer benzer çerçeveleri hemen akla getirir. Çerçeveler ihtiyaç duyabileceğiniz her şeyi içerdiğinden, çok fazla ekstra CSS ile sonuçlanabilir. Daha ısmarlama hissettiren bir şey istiyorsanız, çerçevenin kullanıma hazır stillerini geçersiz kılmak için çok zaman harcayabilirsiniz.

Fayda sınıfı çerçevelerinin uygulanma şekli oldukça farklıdır – ancak göreceğimiz gibi, kendileri de problemsiz değildir.

Yapılandırma

Bir yardımcı sınıf çerçevesinin bir çekiciliği, sözdizimine alıştıktan sonra geliştirmeyi daha hızlı hale getirebilmesidir. HTML ve CSS dosyalarınız arasında sürekli ileri geri atlamanız gerekmez ve sınıfların yazılması hızlı ve kolaydır – düzenleyicinizde Intellisense gibi bir otomatik tamamlama eklentisi kullanırsanız daha da hızlıdır.

Dezavantajı, konfigürasyonda bazı ilk ayak işlerini koymanız gerektiğidir. Tailwind, tüm değişkenlerinizi tanımladığınız bir config.js dosyasıyla birlikte gelir: renkler, tipografi, boyutlandırma (dolgu, kenar boşlukları, vb.) ve çok daha fazlası. Varsayılan bir yapılandırma var, ancak bunu oldukça kapsamlı bir şekilde özelleştirmeniz gerekecek ve bunu önceden yapmak gerçekten işe yarayacak. Herhangi bir kod yazmadan önce kurulum yapmak için çok zaman harcıyormuşsunuz gibi gelebilir, ancak buna yatırım yaparsanız bir sonraki aşama çok daha hızlı ve kolay hale gelir.

(Tailwind’i ilk kez deniyorsanız veya sadece hızlı prototipleme için kullanmak istiyorsanız endişelenmeyin, varsayılan bir yapılandırma dosyasıyla birlikte gelir, böylece bu adımı atlayabilirsiniz.)

isim vermek zor

Mud’da daha önce CSS sınıflarını adlandırmak için BEM kullanıyorduk. Bu, doğru uygulandığında genel olarak oldukça iyi çalıştı, ancak yine de insan hatasına veya (bazı durumlarda) yanlış uygulamaya açıktı. Genellikle, eski bir projeye geri dönerken, üzerinde çalışan iki farklı kişi tarafından farklı bir yaklaşımın benimsendiğini görebilirdiniz. Tailwind, herhangi birinin sınıf adlarıyla pist dışına çıkma tehlikesini azaltarak bu tür tutarsızlıkları ortadan kaldırır.

Tailwind’i kullanmak, şeyleri çok daha az adlandırma konusunda endişelenmek anlamına gelir. Yaygın bir sorun, bir bileşeni adlandırmaktır, diyelim ki .news-card ve sonra kendinizi söz konusu bileşeni tamamen haberle ilgili olmayan bir şey için yeniden tasarlarken bulun. Bir şeylere isim vermeyi düşünmek zorunda kalmamak güzel. Ancak diğer yandan, bileşeninizi hala adlandırmanız gerekebilir. bir şey, bu yüzden Tailwind için bir satış noktası olarak bu sizi yalnızca bir yere kadar götürür. Yine de adlandırma konusundaki düşüncemi kesinlikle etkiledi ve bu günlerde yeniden kullanılabilirlik konusunda çok daha düşünceliyim.

Yardımcı sınıflar iş başında

Fayda sınıfları hakkında ilk fark edeceğiniz şey, tek amaçlı oldukları için birçoğunu kullanmanız gerektiğidir. Bu, etkili bir şekilde tüm CSS sınıflarınızın kısaltılmış bir sürümünü HTML’nize yerleştirmek anlamına gelir. Bu, seçicileri oldukça uzun, hantal ve açıkçası çirkin yapabilir. Bunu ilk denediğimde son derece itici olduğunu ve stilleri işaretlemeye karşı çıkan varlığımın her noktasına karşı geldiğini kabul etmekte bir sakınca görmüyorum. Ancak, Tailwind’i bir süre kullandıktan sonra, kısa sürede sezgisel hissettirdi ve bir HTML bloğuna bakabilmek ve hangi stillerin uygulandığını bir bakışta görebilmek için söylenecek çok şey var.

Bu onun dezavantajları olmadan değil. Tüm stillerinizin HTML’nizde uzun bir dize olarak görüntülendiğini görmek, bir hata yaptığınızı görmenizi zorlaştırabilir; yinelenen veya çakışan seçiciler, yazım hataları ve yanlış sınıf adlarının tümü fark edilmeyebilir. Birkaç kez doğru olduğunu düşündüğüm bir sınıf adı yazdım, ancak sonunda kafamı kaşıdım ve stillerimin neden uygulanmadığını anladım. (Tailwind linting çalışmalarında bir VS Kodu uzantısı olabileceğine inanıyorum, ancak beni buna bağlamayın.)

Uğraşmanız gereken çok uzun bir seçici diziniz olduğunda, Tailwind’in başka bir seçeneği daha vardır. Bu sınıfları basitçe şu şekilde CSS dosyanıza çıkarabilirsiniz:

.my-super-class-name {
@apply bg-blue text-white font-bold uppercase px-2 py-1 mx-auto mb-1 border-1 w-200;
}

Bu oldukça kullanışlı. Ama o zaman, CSS dosyamıza yazdığımız için neden normal CSS yazmıyorsunuz? Artı Tailwind’in sınıfları yok her olası CSS stili, bu nedenle yine de bazı normal CSS yazmanız gerekebilir. Aniden stilleri uygulamak için üç olası yolumuz var:

  1. Satır içi Tailwind sınıfları
  2. CSS’de Tailwind-in-CSS
  3. Normal eski CSS

Tailwind’in bu tür bilmeceler için bir çözüm olarak tanıtılması gerçeğine rağmen, kendimi Tailwind ile normal CSS’den çok daha kötü belirlilik düğümlerine bağladım.

Tailwind ile çalışmayı zor bulduğum bir başka yer de bileşen varyantlarıydı. Genellikle aynı bileşenin birkaç varyantını oluşturmamız gerekir – örneğin, birkaç olası düzen kombinasyonuna sahip olabilecek, ancak aksi takdirde aynı CSS’yi içerecek olan bir başlık, bir metin bloğu ve bir resim içeren bir bölüm. BEM ile şöyle bir şeye sahip olabilirsiniz:

<article class="media-object">
<h2 class="media-object__heading"></h2>
<figure class="media-object__figure">
<img class="media-object__image" src="some-image.jpg" />
</figure>
<div class="media-object__text-block"><p>...</p></div>
</article>

Sınıf adları açıklayıcıdır ve tüm bu bileşen türevlerinde bazı stil değişiklikleri yapmak genellikle CSS’nizi tek bir yerde güncellemek anlamına gelir. Şimdi HTML’nizde utlity sınıfını kullandığınızı ve her bileşenin dolgusunu değiştirmek istediğinizi hayal edin. 1rem ile 2rem. Her biri için HTML dosyasına girmeniz, o yardımcı program sınıfını bulmanız ve güncellemeniz gerekir (yanlış yerde yanlışlıkla güncellemeden). Seçici dizeleri tekrarladığınızı fark ettiğiniz anda stilleri bir CSS dosyasına çıkarmak iyi bir fikir olabilir, ancak bu aynı zamanda daha önce belirtildiği gibi bazı sorunları da ortaya çıkarır. (Bunun herkes için bir sorun olmayacağının farkındayım – örneğin bileşenlerinizi React’te, Styled Components ile Tailwind kullanarak oluşturursanız, muhtemelen yalnızca bir dosyaya sahip olacaksınız ve varyantınız için aksesuarlardan geçerek hesaba sahip olacaksınız. .)

Eklentiler

Tailwind, Javascript ile yapılandırıldığından, işlevleri yazmak ve bunları yapılandırmanıza aktarmak gibi şeyler yapabilirsiniz. Avantajı, size Javascript’in tüm gücünü vermesi ve ayrıca kendi özel yardımcı programlarınızı eklentiler olarak yazabilmenizdir.

Normal CSS ile, ihtiyaç duyulduğunda projenize uygulayabileceğiniz bir Sass kısmi bölümünde bir avuç yardımcı program sınıfınız olabilir (örneğin, bunu genellikle birkaç yeniden kullanılabilir tipografi stiliyle yaptım). Bunları Tailwind sınıflarının yanında dener ve uygularsanız, bu, stillerin geçersiz kılınmasını bekleyebileceğiniz ve geçersiz kılınmalarını bekleyebileceğiniz karışıklığa neden olabilir. (İçe aktarma sıranıza bağlı olarak hangi stiller geçersizdir.) Bunu zor yoldan öğrendikten sonra, kendi özel yardımcı programlarınızı Sass’ta yazmak yerine Tailwind eklentileri olarak yazmanızı tavsiye ederim. Bu çıktıları Tailwind’in tüm normal yardımcı programlarının yanında bulundurmanın ve ayrıca Tailwind’in durum ve kesme noktası sözdizimine (örn. hover:bg-green size bir vurgulu durumu verirdi background-color: #38C172.)

Dezavantajı, Javascript’e daha az aşina olan insanlar için bu daha çok bir öğrenme eğrisi olabilir. Javascript bilmenin iyi HTML ve CSS yazmak için bir ön koşul olması gerektiğine henüz ikna olmadım.

Verim

Teorik olarak, yardımcı sınıflar yeniden kullanılabilir olacak şekilde tasarlanmıştır ve bu nedenle meli sonunda daha küçük bir CSS dosyası gönderir. Daha küçük bir dosya daha iyi performansa eşit olmalıdır. Bununla birlikte, dokunulmadan bırakıldığında, çerçeve ihtiyacınız olabilecek tüm sınıfları oluşturacak ve siz onu çıkarmak için adımlar atmazsanız, size bir sürü kullanılmayan CSS bırakacaktır. Ancak beklenti, gerçekçi olarak tüm çerçeveyi asla göndermeyeceğinizdir. Belgeler, gereksiz CSS’yi kaldırmanın ve genel dosya boyutunu küçültmenin birkaç yolunu ayrıntılı olarak açıklar.

Tailwind’in belgelerinde önerilen bir yol, aşağıdaki gibi bir araç kullanmaktır: CSS’yi temizle oluşturma işleminizin bir parçası olarak. Pratikte, özellikle Javascript ile eklenen bazı sınıflarınız varsa, hangi sınıfları kaldırdığınız konusunda dikkatli olmanız gerekir. Tasfiye beyaz listesi buradaki arkadaşınızdır – bunu doğru yapmak biraz zamanımı aldı ve birkaç kez kritik CSS’imle güzel bir şekilde oynamasını sağlamakta zorlandım.

Başka bir şey…

Küçük bir şey ama CSS dosyalarınızda kullanabileceğiniz medya sorgulama işlevlerini gerçekten seviyorum. yazı @screen md normal medya sorguları ve hatta karışımlar yazmaktan çok daha hızlı ve güzel.

Tailwind ne zaman KULLANILMAMALIDIR?

Bazı insanlar, yardımcı programların kesinlikle kullanılmasını savunurlar. her şey – ve bununla, Tailwind’de henüz mevcut olmadıklarında yeni yardımcı programlar oluşturmayı kastediyorum. kesinlikle yaparım olumsuzluk bu yaklaşımı tavsiye ederim. CSS Grid ile çok çalışıyorum ve olası her düzen kombinasyonu için bir yardımcı sınıf yapılandırmaya çalışmak çılgınca olurdu, Grid’in gücünü tam olarak kullanabilmek söz konusu olduğunda kendinizi ciddi şekilde sınırlamaktan bahsetmiyorum bile. Var ızgara eklentisi Tailwind için, ancak belgeleri bile diyor ki:

Yardımcı programlar aracılığıyla CSS Izgarasının tüm gücünü ortaya çıkarmak gerçekten pratik değildir, ancak bu eklenti, yalnızca hücreli bir kayan nokta veya Flexbox ızgarasını değiştirmek için CSS Izgarası kullanmaya iyi bir örnektir.

Tailwind ile denemenin ve kopyalamanın pratik olmadığı pek çok başka CSS özelliği vardır, bu nedenle muhtemelen hala bir şekilde veya biçimde normal CSS’ye ihtiyacınız olacak.

Çözüm

Tailwind, CSS’nin tüm varsayılan sorunlarını çözecek sihirli bir kurşun değildir ve bir geliştirici olarak kaskadını anlamanızı mazur göstermez. CSS’nin temel ilkelerini takdir eden biriyseniz, ilk başta bunun mantıksız geldiğini görebilirsiniz, ancak bunun sizin için doğru yaklaşım olup olmadığına karar vermeden önce sebat etmeye değer. Her proje için kullanmayı tercih etmesem de, açık faydaları var. Tailwind at Mud’u benimsemenin ekip için doğru karar olduğuna ve CSS’yi daha yeniden kullanılabilir, sürdürülebilir ve performanslı hale getirdiğine inanıyorum.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.