Arka rüzgarlar mı? Ben almayayım

Yakın zamanda Tailwindcss'i bir projede kullandım ve biliyor musunuz? En azından ufuk açıcı bir deneyimdi.

Bazılarınız merak ediyor olabilir: Tailwindcss nedir?

Tailwind CSS bugüne kadar en hızlı büyüyen CSS kütüphanesi olarak öne çıkıyor. Hızla ön uç geliştiriciler için önemli bir araç haline geldi. Ön uçtaki birçok geliştirici, bunu büyük ölçekli projelerde kullanıyor ve minimum sorunlarla karşılaşıyor. Web sitesi ve web uygulaması geliştirme ve tasarımındaki iyileştirmeler inkar edilemez derecede dikkat çekicidir.

Peki sorun ne? Başlıkta neden ' Tailwindcss' yazıyor? Hayır Teşekkürler ”?

Bu başlık, Tailwind CSS'nin mükemmelliğine rağmen projeleriniz için en uygun seçim olmayabileceği durumlar olabileceğini öne sürüyor. Bu neden olabilir? Bir cevap var. Ancak açıklamaya geçmeden önce teknolojinin bu incelemesinin temelini oluşturalım.

Bütün CSS'lerde ne var?

Tailwindcss'e ve geliştirme inceliklerine girmeden önce birkaç önkoşulu yerine getirmemiz gerekiyor.

CSS nedir?

CSS Basamaklı Stil Sayfaları anlamına gelir. Bana göre CSS'nin en iyi tanımı techterms.com'dan geliyor.

“CSS, HTML web sayfalarındaki içeriği biçimlendirmek için kullanılan bir stil sayfası dilidir. CSS stil sayfaları metnin, tabloların ve diğer öğelerin görünümünü ve biçimlendirmesini içeriğin kendisinden ayrı olarak tanımlayabilir. Stiller bir web sayfasının HTML dosyasında veya birden fazla web sayfasının referans verdiği ayrı bir belgede bulunabilir”.

Çok fazla kelimeyle söylemek gerekirse: CSS stillendirme dilidir. Web sayfanızın veya web uygulamanızın mükemmel görünmesini sağlamak için HTML öğelerinde CSS kullanırsınız.

Tailwindcss nedir?

Tailwindcss ekibinin kendi ifadeleriyle Tailwindcss, " flex , pt-4 , text-center ve rotate-90 gibi sınıflarla dolu , herhangi bir tasarımı doğrudan işaretlemenizde oluşturmak için oluşturulabilen, yardımcı program öncelikli bir CSS çerçevesidir ".

Bu aslında CSS'nin orijinal CSS prosedürlerini ve işlemlerini aldığı ve daha sonra bunların yapılmasını ve uygulanmasını daha basit hale getirdiği anlamına gelir.

CSS ve Tailwind CSS'nin temellerini zaten tartıştık. Şimdi daha derine inelim ve Tailwind CSS'nin pratikte nasıl çalıştığını, karşılık gelen CSS benzerleriyle birlikte inceleyelim. Bu keşif bizi en sonunda Tailwind CSS ile ilgili projem sırasında ulaştığım sonuca götürecek.

Benim sonucum Tailwind CSS'nin daha büyük ve daha karmaşık ön uç projeler için en uygun olduğu yönündedir. Ancak çoğu durumda varsayılan seçim hâlâ "vanilya" CSS olmalıdır. Başka bir deyişle, CSS'yi en saf haliyle kullanmak, Tailwind CSS veya diğerleri gibi herhangi bir ek kütüphaneyle karşılaştırıldığında çoğu kişi ve senaryo için genellikle daha avantajlıdır.

CSS ve Tailwindcss arasındaki farklar

Tailwindcss neye benziyor? Bir vanilya CSS eşdeğeri ve ardından bir Tailwindcss eşdeğeri yaparak karşılaştıralım.

Yukarıdaki metinde neler olup bittiğini açıklayalım. Bu bir HTML 5 alıntısıdır ve bir düğme oluşturuyoruz.

Düğmeyi oluşturmak için onu " divs " aracılığıyla kurduk; bu, web sitemizi veya web uygulamamızı değiştirmek için gerekli olan şeyleri girmek için kullanılan küçük kaplardır. Her div'e kendi " sınıfını " veriyoruz, böylece o belirli öğeye daha sonra ayrı CSS dosyamızda referans verebiliyoruz. Ancak div'lere kendi " kimliklerini " de verebilirsiniz. " Satır içi " CSS değişiklikleri yapabilirsiniz; bu, CSS'yi doğrudan HTML dosyasına yerleştirebileceğiniz anlamına gelir, ancak çoğu, organizasyon adına bundan kaçınma eğilimindedir.

CSS dosyasında düğmeyi düzenleme kodumuz nasıl görünebilir?

Yukarıdaki kodda, HTML alıntısındaki buton sınıfıyla etkileşim kuruyoruz. CSS dosyanızı HTML sınıflarınızdan haberdar etmenin yolu, sınıf adının başındaki noktadır. Bunun altında sırasıyla “ align-items ” ile butonu div’in ortasına hizalıyoruz. Hizalama öğesinin altında, "arka plan renginin " ne kadar uzanacağını ve uzanmayacağını tanımlayan " arka plan klibi " bulunur. “ Kenarlık ” düğmenin kenarlarının kalınlığını, kenarlık yarıçapı ise kenarların ne kadar kavisli olduğunu gösterir. Az önce bahsettiğimiz her şey düğme stilinin geliştirilmesine katkıda bulunuyor. Gördüğümüz gibi orijinal CSS stilleri yeterince basit görünüyor. Tailwindcss aynı durumu nasıl ele alır?

Bir dakika ne? Az önce CSS görünümlü kodu bir HTML dosyasına mı koyduk? Evet yaptık. Baktığınız şey Tailwindcss'teki önceki kod örneklerinin eşdeğeridir. Bu aslında Tailwindcss'in daha benzersiz özelliklerinden biridir. Tailwindcss'i kullanırken ayrı CSS kodunuzu farklı bir dosyaya koymazsınız. Tailwindcss kodunun tamamı doğrudan HTML dosyanıza gider. Daha önce de belirttiğimiz gibi geliştiriciler geleneksel olarak satır içi CSS kodlamasından kaçınırlar. Tailwindcs'in satır içi kodlaması artık gerçekten bir seçenek değil, neredeyse gerekli. Tailwindcss tamamen sınıf tanımlama yoluyla uygulanır.

Şimdi yukarıdaki kod ne işe yarıyor? biraz farklı da olsa, orijinal CSS kodunun yaptığının aynısını yapar.

Normal CSS ve Tailwindcss muadili karşılaştırmasına bir kez daha bakalım.

Yukarıdaki görselde “ card-img ” sınıfı altında çikolatanın resmini içe aktaran bir HTML5 belgesi içerisindeyiz. İlgili CSS'nin neye benzediğini görelim.

Yukarıdaki CSS kodu sonuncuya benzer. Çok fazla derinlemesine tahmine gerek yok. Çikolata kartlarının görünümünü belirliyoruz. Şimdi çok daha ilginç olan Tailwindcss varyantını görelim.

Yukarıdaki kod Tailwindcss eşdeğeridir. Çok daha basit ve daha zariftir ancak her şeyin ne anlama geldiğini ve ifadelerin nasıl konumlandırılacağını bilmek çok daha fazla çaba gerektirir. Peki bu geleneksel CSS'ye göre bir avantaj mı?

Tailwindcss'in doğası onu çok karmaşık hale getiriyor. Tüm kodunuz, hem HTML hem de CSS, tek bir dosyada olacak ve uzun ve görünüşte kalabalık olacak. Bu da gelişmeyi zorlaştırıyor.

Tailwindcss'in ana dezavantajları nelerdir?

• Alışmak zaman alan dik öğrenme eğrisi.
• Özel sınıf bileşenleri yapmak zorundasınız. (Bu, uzun bir projeye çok şey katabilir).
• HTML ve stilin karışık olması nedeniyle kafa karıştırıcı

Başlıca avantajları nelerdir?

• Son derece özelleştirilebilir

• Daha hızlı gelişme

• Nelerin eklendiğine veya düzenlendiğine bakılmaksızın tutarlı ifadeler ve desenler.

  
  

Tailwindcss'in örneklerini gördük ve artık ana avantajlarını ve dezavantajlarını biliyoruz. Ama ne kadar popüler?

Hem eski hem de yeni geliştiriciler arasında benimsenmiş ve yaygınlaşmıştır.

tailwindweekly.com'dan Vivian Guillen , Tailwindcss'in 19 Kasım 2022 itibarıyla haftalık 4,5 milyon indirme elde ettiğini belirtti. Ben bunu yazarken npmjs.com'a girip Tailwindcss diye arama yaparsanız 336 milyon indirme sayısına ulaşıyor. 5 yıl önce piyasaya sürülmesinden bu yana bu, günde ortalama 184.110 indirme anlamına geliyor. İnanılmaz miktarda indirme.

Tailwind'de aşağı doğru sarma

Daha önce bu yazının başında şunu yazmıştım: " Tailwindcss'in projeleriniz için en uygun çözüm olmadığı zamanlar olabilir". Bunu neden yazdım? ve başlıkla nasıl bir ilişkisi var? “Arka rüzgarlar mı? Ben almayayım ".

Tailwindcss dünya çapında hemen hemen tüm ön uç geliştiriciler arasında popülerdir, uygulanması geleneksel CSS'den daha kolay görünür ve kendi türündeki diğer teknolojilerden daha fazla özelleştirilebilirlik sunar. Kahretsin, benim onu kullanmam bu makalenin kendisine bile ilham verdi. Peki neden hala bundan şüphe duyuyorum? Çünkü elbette kullandım .

Tailwindcss herkesin iddia ettiği kadar iyi ve daha fazlası. Aynı şekilde, insanların iddia ettiği gibi, her bakımdan kötüdür. Tailwindcss'in doğası, kısa ve orta vadeli projelerde çalışmayı karmaşık hale getiriyor, öğrenme eğrisi gelişiminizi tamamen engelliyor, özel bileşenler yapma ısrarı vb. Bunların hepsi Tailwindcss'i KISA VADEDE dayanılmaz kılıyor. Sadece kısa vadede!

Bu, Tailwind CSS'nin geliştiriciler ve şirketler tarafından üstlenilen kapsamlı, karmaşık projelere ayrılması gerektiği anlamına gelir. Daha kısa projeler için geleneksel CSS'ye bağlı kalınması tavsiye edilir. Bu, CSS becerilerinizin zayıflamasını önler ve Tailwind CSS gibi kısayol çerçevelerine aşırı bağımlı olmanızı önler. Neden bana inanmalısın? Tailwind CSS'yi küçük bir projede kullanma konusunda kendime meydan okudum ve bu, onun neden önemli ve kalıcı girişimler için daha uygun olduğunun altını çizdi. Diğer CSS çerçevelerini araştırmaktan heyecan duyuyorum ve hatta onlar hakkında makaleler bile yazabilirim!

Bana abone olursanız öğrenebilirsiniz, çok yakında görüşürüz ;)