Vanilla CSS, Bootstrap ya da Tailwind ?
Bu iki CSS Framework’ünü ve bu frameworklerin yazımı kolaylaştırmayı hedeflediği Vanilla CSS’i karşılaştırmadan önce gelin teker teker ne olduklarını inceleyelim.
CSS (Cascading Style Sheets) Nedir?
CSS, yazdığımız HTML kodlarına görsellik katarak front-end uygulamalarını daha ilgi çekici kılan, göze hitap etmesini sağlayan bir işaretleme dilidir.
CSS’i daha iyi anlamak adına HTML, CSS ve JS’in birlikte çalışma prensiplerini anlatırken verilen “İnsan Vücüdu” örneğine göz atalım.
HTML, insan vücudundaki iskelet sistemini ifade eder. HTML elemanlarından birinin eksik olması bütün sistemin aksamasına sebebiyet verebilir. Aynı zamanda bir front-end uygulamasını ayakta tutar. Fakat elbette iskelet sistemi tek başına yeterli değildir.
İşte tam burada CSS’e insan vücudunun dış görünüşü benzetmesi yapılır. İskelet sistemine bir nevi görsellik katan kaslar, yağlar ve dış görünüşümüzü oluşturan her etken CSS’i temsil edebilir.
Son olarak yazımızda değinmeyeceğimiz fakat gerek front-end developer’ların gerek back-end developer’ların sıklıkla duyduğu JavaScript’i ise sinir sistemimize benzetebiliriz.
Bootstrap
Bootstrap, Mark Otto ve Jacob Thornton tarafından Twitter’da geliştirilen ve Ağustos 2011 tarihinde açık kaynak kodlu olarak GitHub’da paylaşılmış bir CSS framework’üdür. Bootstrap’in temel amacı responsive websitelerini daha hızlı ve daha basit bir şekilde kodlamaktır.
Projeye Nasıl Eklenir?
Bootstrap’i projenize dahil etmeniz için yapmanız gereken tek şey <head> tag’inin içerisine Bootstrap’in dökümantasyonunda yer alan kodu eklemek olacaktır. Koda buradaki linkten ulaşabilirsiniz.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">Nasıl Kullanılır ?
Bootstrap’i projenize dahil ettikten sonra HTML elemanlarımızın class adlarına dökümantasyondan kolaylıkla bulabileceğimiz keywordleri yazarak saniyeler içerisinde responsive bir websitesi oluşturabiliriz.
Örneğin;
Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır;
Bootstrap’in Avantajları ve Dezavantajları
İlk olarak avantajlarına değinelim.
- Bootstrap’i tanıtırken de bahsettiğimiz üzere, tamamen responsive bir websitesini gerçekten hızlı bir şekilde oluşturabilirsiniz.
- Hızın yanısıra sizleri ayrı cihazlar için ayrı çözünürlüklere ayrı CSS kodları yazmaktan kurtaracaktır. Bu responsive’liğin size kazandırdığı zamanın yanısıra bazen dayanılmaz olan bu işlemi -ki benim gibi psikopatsanız bu işlemden zevk de alabilir, yaygın çözünürlüklere değil her çözünürlüğe uygulayabilirsiniz- kendisi hallettiği için kafanız rahat olacaktır.
- Bootstrap her ne kadar bir CSS framework olsa da, oluşturduğu componentlerde HTML, CSS ve JS’i bir arada kullandığı için sizlere modal, slider, dropdown menu gibi birçok işlevsel gereksinimi birkaç keyword ile kullanabilme imkanı sunar. (Bir de burada demo olarak sunulan modal’ı kendi yazdığınızı düşünün.) JS bilgisi isteyen bu işlevleri sıfır JS bilgisi ile kullanabilirsiniz.
- Bootstrap CSS alanında oldukça yaygın bir framework’tür. Kişisel projelerin yanısıra internette al-düzenle-kullan şeklinde satılan temaların büyük çoğunluğunda ve bazı şirketlerin üretim hızının önemli olduğu projelerinde Bootstrap’e rastlamak mümkündür. Bu popülarite de elbette güzel bir topluluk desteği demektir.
Şimdi gelelim dezavantajlarına…
- Bootstrap’in bana göre tüm avantajlarını geçersiz kılan en büyük dezavantajı özgürlük sunmamasıdır. Sürekli olarak aynı şekle, renge, büyüklüğe ve diğer özelliklere sahip componentleri kullanır durursunuz. Elbette buna müdahale etme imkanınız vardır fakat bu müdahale için Vanilla CSS yazmanız gerekmektedir. “Eğer günün sonunda Vanilla CSS yazacaksam neden bir framework kullanıyorum ki?” dediğinizi duyar gibiyim :)
- İkinci dezavantajı ise aslında birinci dezavantaja oldukça bağlı. Bootstrap’teki componentlere müdahil olmak dilediğiniz kadar mümkün olmadığından, Bootstrap ile yazılmış websiteleri büyük ölçüde birbirine benzemektedir. Bu tekrardan kaynaklanan tekdüzeliğin kreatif yönünüzü zayıflatması kaçınılmazdır.
Avantajları ve Dezavantajları Göz Önünde Bulundurulduğunda Bootstrap Kullanılır Mı ?
Hem evet hem hayır. Zaten avantajlarını tartışırken de bahsettiğim üzere Bootstrap hala popülerliğini koruyan bir CSS framework’üdür. Al-düzenle-kullan tarzı temalar veya yönetim sistemlerinde sıklıkla karşılaştığımız Bootstrap, geliştiriciye gerçekten büyük zaman kazandırabilir. O yüzden geliştirmek istediğiniz projenin ihtiyaçlarına göre elbette kullanabilirsiniz.
Benim önerim ise; kesinlikle kullanmayı öğrenmeniz gereken bu framework’ü asla ve asla her projenizde kullanmamanız olacaktır.
Tailwind CSS
Tailwind CSS ilk olarak Adam Wathan tarafından geliştirilmiş ve ilk versiyonu 1 Kasım 2017'de piyasaya sürülmüştür. Bootstrap ile benzer amaçlar taşıyan Tailwind CSS, tıpkı Bootstrap gibi classname’ler üzerinden style vermek üzerine kurulmuş bir çalışma prensibine sahiptir.
Fakat elbette Bootstrap’ten keskin bir farkı vardır. Bootstrap’te “row, container, btn, list-group vb.” default component’leri kullanırız. Tailwind ise CSS gibi çalışır. Eğer bir butona style vermek istiyorsanız classname’inde color’ını, shape’ini, padding’ini, margin’ini CSS yazar gibi belirtirsiniz.
Bootstrap’teki “container, row” gibi componentlere karşılık olarak Tailwind’de display type’ını -örneğin flex- align şeklini belirtirsiniz.
Bootstrap’te CSS bilmeden de componentleri bir araya getirebilirsiniz. Fakat Tailwind’de efektif olmak istiyorsanız temel düzeyde CSS bilmelisiniz.
Vanilla CSS yazar gibi Tailwind yazıyorsak neden bu framework’ü kullanalım?
Çünkü bu işlemi Tailwind CSS kullandığınızda HTML’deki elemanların classname’ine kısaltmalar kullanarak yazıyorsunuz. Ve bu da projenin CSS kısmını daha hızlı bitirmenize olanak sağlarken Bootstrap’e nazaran daha fazla özelleştirme imkanı sunuyor.
Projeye Nasıl Eklenir ?
Tailwind CSS’i projenize eklemenin birden fazla yolu var fakat ben Bootstrap’te olduğu gibi Plain HTML bir projeye eklemeyi anlatacağım. Bunun dışında npm (node package manager) kullanarak ekleyebilir, hem Bootstrap’te hem Tailwind’de dilediğiniz front-end framework’ü ile çalışabilirsiniz.
CDN
Plain HTML’e Tailwind eklemenin belki de en kolay yolu CDN (Content Delivery Network) kullanmaktır. Herhangi bir build işlemiyle uğraşmadan direkt olarak Tailwind kullanmaya başlayabilirsiniz. Kendi projelerinizi geliştirirken pratikliği açısından önersem de profesyonel bir ürün için en iyi yöntem değildir.
Yine Bootstrap’te olduğu gibi <head> elemanımızın içinde framework’ün dökümantasyonunda bizlere verilen kod parçacığını ekleyerek Tailwind’i kullanmaya başlayabiliriz.
<script src="https://cdn.tailwindcss.com"></script>Nasıl Kullanılır ?
Tailwind’i tanıtırken Bootstrap’le olan benzerlik ve farklılıklarına değindik. Bu esnada da aslında nasıl kullanılacağı konusunda biraz ipucu vermiş olduk. Tailwind’i kullanmak için HTML tag’lerinin içerisinde classname’e tıpkı CSS yazar gibi, fakat kısaltmalar kullanarak bazı keywordler yazıyoruz. Tailwind’de efektik olmak için temel düzeyde CSS bilmenin önemini vurgulamıştık. Çünkü bu keyword’ler CSS’e dayanıyor. Şimdi gelin bir kod örneği ile tekrardan inceleyelim.
Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır;
Tailwind’in Avantajları ve Dezavantajları
Yine ilk olarak avantajlarından bahsedelim.
- Tıpkı Bootstrap’te olduğu gibi Tailwind’de de asıl amaç önceden tanımlanmış widget’ları kullanarak hızlı bir front-end geliştirmesi yapmaktır.
- Tailwind ile oluşturulan uygulamalar çok daha fazla özelleştirilebilir. Kendi temanızı oluşturabilirsiniz. Renk skalası ve boyut yelpazesi çok daha geniştir. (Bootstrap’e kıyasla)
- Bootstrap kadar büyük bir topluluğa sahip olmasa da piyasaya sürüldüğü yıldan bu yana geniş bir kitleye ulaşmıştır. Hatrı sayılır derecede kullanıcısı vardır.
- Tailwind CSS yalnızca 27kb’lık bir stil dosyasına ihtiyaç duyar. Bu da websitenizin yükünü oldukça hafifletir.
- Component oluşturup hızlı geliştirme yapmak adına React, Vue gibi framework’ler için oldukça iyidir.
Sırada dezavantajlar..
- Tailwind kullanırken HTML elemanlarınıza çok fazla classname eklersiniz. Bu da özellikle Plain HTML projelerin okunabilirliğini büyük ölçüde düşürmektedir. Bir başka yazılımcının kodunuzu okumasından ziyade siz dahi bir hata yaptığınızda kolay kolay kavrayamazsınız. Bu düşük okunulabilirliği kendi component’inizi oluşturarak bir bakıma çözebilirsiniz. Fakat Plain HTML’de böyle bir şey mümkün olmadığından okuması her zaman zor olacaktır.
- Öğrenme eşiği biraz zordur. CSS biliyor olsanız dahi yazmak istediğiniz kodun kısaltması sizi şaşırtabilir. Örneğin Vanilla CSS’te padding’i üst ve alttan 5px, sağ ve soldan 10px vermek istediğimizde padding: 5px 10px yazıyorken Tailwind’de py-10 px-5 olarak yazıyoruz. Ama yine de bu durumu dezavantaj olarak yazmam gözünüzü korkutmasın.
- Eğer acemiyseniz kurulum ve optimizasyon kısmı başınızı ağrıtabilir.
Vanilla CSS
CSS yazmayı hızlandıran bu iki framework’ü giriş seviyesinde incelediğimize göre dönüp biraz da Vanilla CSS’e bakabiliriz. Özellikle Bootstrap’teki limitlerin ardından Vanilla CSS size tam anlamıyla bir özgürlük sunar. Frameworkler ile yaptığınız front-end tasarımlarını Vanilla CSS ile yapabilmek büyük bir özgüven kaynağıdır.
Hepsinden önemlisi; bugün bir framework popüler olur, yarın bir başkası. Fakat dilin kendini bilirseniz asla eskimezsiniz.
Özet
Ee ? Okuduk inceledik tamam da. Hangisi en iyisi ? Veya hangisi işe yaramaz ?Hangisini kullanmanızı öneriyorum ? Veya hangisine asla yanaşmayın ?
Bütün bu soruların tek bir cevabı var; hepsi işe yarar ve hepsini kullanın. Daha önce de belirttiğim gibi projelerde kullanılacak teknolojiler projenin boyutuna, kullanım amacına, geliştirici ekibin büyüklüğüne ve daha birçok etkene dayanmaktadır. Siz ise projenize en uygun teknolojiyi seçmelisiniz.
Bütün frameworklerin artı yanları da vardır eksi yanları da. Ama hepsi bir ihtiyaç sonucu ortaya çıkmıştır ve elbet işe yararlar. Benim bu konuda sözlerimi noktalarken söyleyeceğim son şey; önce dilin kendisini öğrenin. CSS bilmeden Tailwind’e girişmek yararsız olacaktır. Veya JavaScript bilmeden React, Angular, Vue tarzı frameworklere bakmak. Flutter öğrenmek istiyorsanız önce Dart öğrenin. Bu durum geliştirme alanı veya dil tanımaz.
Dipnot: Bu yazıyı hazırlamakta bana ilham kaynağı olan ve yazım esnasında kendisine sürekli başvurduğum bu videoyu da sizlerle paylaşmak isterim. İlgili videonun sahibi oldukça faydalı içerikler üretmekte. Front-End veya MERN Stack Developer olmak istiyorsanız kesin göz atın.
Buraya kadar okuduğunuz için teşekkür ederim. İyi kodlamalar!
