CSS tarafında bazı dönemler oluyor, insanın kafası resmen karışıyor. Hani bir ekip utility-first’a abanıyor, öbürü hazır komponentlerle idare etmeye çalışıyor; sonra bir bakıyorsun HTML’in sınıf yığını yüzünden okunmaz hale gelmiş. Ben de açık konuşayım, 20+ yıllık BT geçmişimde bu “class soup” olayını sadece yazılarda değil, gerçek projelerde defalarca gördüm. Logosoft’ta bir kurumsal portal revizyonunda tasarım ekibiyle geliştirici ekibinin en çok tartıştığı konu da tam buydu: okunabilirlik mi, kontrol mü? İşte mesele biraz orada düğümleniyor.
Şunu söyleyeyim, Butterfly CSS gibi attribute-based yaklaşımı olan araçlar tam bu noktada sahneye çıkıyor (ben de ilk duyduğumda şaşırmıştım). İlk bakışta biraz oyuncak gibi durabiliyor, bunu inkâr etmeyeyim. Ama bazen asıl ihtiyaç da o zaten: hızlı prototip çıkarmak, sade HTML ile ilerlemek ve küçük-orta ölçekli işlerde gereksiz hantallığı azaltmak. Geçen yıl Şubat 2025’te bir müşteri için hazırladığımız tanıtım sayfasında benzer mantıkla ilerlemiştik; ekip “birkaç animasyon ve birkaç şekil efekti olsun yeter” diyordu. O işte hız kazanımı bayağı hissedildi. Şaşırdım açıkçası.
Bunu biraz açayım.
Butterfly CSS neyi farklı yapıyor?
Şunu söyleyeyim, Şimdi gelelim işin özüne. Butterfly CSS’in temel fikri şu: class zinciri yerine doğrudan attribute kullanıyorsun. Bu kulağa küçük bir detay gibi geliyor ama pratikte fena halde fark yaratabiliyor. Çünkü özellikle landing page, demo site ya da tek sayfalık kampanya işlerindesin… orada kimse oturup flex items-center justify-between gap-4 satırlarını şiir gibi okumak istemiyor.
Bana göre burada en büyük artı hız değil yalnızca; zihinsel yükü de azaltması. Mesela Azure tarafında mimari tasarlarken nasıl ki gereksiz karmaşıklığı sevmem — AZ-305 çalışırken de hep bunu düşünürdüm — frontend’de de aynı refleks devreye giriyor. Bir öğenin ne yaptığını doğrudan etiketten görmek iyi hissettiriyor. Ne var ki her güzel şeyin ufak bir faturası olur… burada da öyle. Evet, aynen öyle.
Çünkü attribute-based yapı ilk başta çok rahat gelse bile ekip büyüdükçe standartlaşma ihtiyacı hemen ortaya çıkıyor. Küçük ekipte “abi buraya heart koymuşuz tamamdır” dersin geçersin. Enterprise seviyede ise tasarım sistemi, erişilebilirlik standardı, test disiplini derken iş uzuyor (ki bu çoğu kişinin gözünden kaçıyor). Yani araç hafif olabilir ama yönetim hafif kalmamalı; yoksa iş çabuk dağılıyor.
İşte tam da bu noktada devreye giriyor.
Nerede iş görüyor?
Bence en net kullanım alanı hızlı ürün denemeleri ve pazarlama odaklı işlerdir (inanın bana). Bir startup’ın ilk sürümü için bayağı iyi duruyor; çünkü CDN ile bağla, birkaç efekt ver, yayınla gitsin mantığı var. Geçen ay Nisan 2026’ya yakın bir değerlendirmede bir girişim kurucusu arkadaşım bana şunu dedi: “Ben tasarımla boğuşmak istemiyorum.” Tamam dedim, o zaman böyle sistemler tam ona göre.
Tuhaf ama, Yine de dürüst olayım; aşırı büyük tasarım sistemlerinde bunu ana omurga yapmak beni hemen ikna etmiyor. Güzel fikir ama henüz ham tarafları var sanki (özellikle takım içi tutarlılık ve uzun vadeli bakım konusunda) (ben de ilk duyduğumda şaşırmıştım). Nasıl desem, idare eder ama temkinli olmak lazım.
<divheartspinhanddrawn>
Merhaba dünya
Kendime sordum: Tailwind yerine geçer mi?
Açık cevap vereyim: bazı takımlarda evet, çoğunda hayır… en azından bugün için böyle düşünüyorum. Tailwind’i yıllardır kullanan biri olarak söyleyebilirim ki onun gücü kontrol hissinden geliyor (ki bu çoğu kişinin gözünden kaçıyor). Pixel-perfect isteyen ekipler için elinde çok sağlam bir set var yani durum net.
Butterfly CSS ise daha “yakala ve koş” tarzında kalıyor. İnsana biraz çizim defterinde çalışıyormuş hissi veriyor; hatta garip şekilde eğlenceli bile oluyor! Ama bu eğlence bazen disiplin kaybına dönebiliyor mu? Evet, dönebiliyor.
| Kriter | Butterfly CSS | Tailwind |
|---|---|---|
| Okunabilirlik | Daha sade | Bazen kalabalık |
| Tasarım kontrolü | Sınırlı olabilir | Çok güçlü |
| Hızlı prototip | Bayağı iyi | İyi ama daha fazla yazı ister |
| Ekip standardı | Dikkat ister > |
Daha oturmuş kullanım sunar > |
Tamam tablodaki son satırda ufak bir düzenleme sıkıntısı yokmuş gibi davranmayacağım; pratikte önemli olan şu: hangi aracı seçersen seç ekip alışkanlığı belirleyici oluyor. Ben bunu 2019’da kendi lab ortamımda da görmüştüm; basit görünen yapı bile dokümantasyon yoksa kısa sürede dağılıyor.
Animasyonlar ve şekiller neden dikkat çekiyor?
Kâğıt üstünde süper duran kısım bu mu?
Evet, çoğu kişi önce buraya bakıyor zaten. Bu konuyla ilgili PDF Dünyasında Bir Nefes: Ücretsiz ve Limitsiz Araçlar yazımıza da göz atmanızı tavsiye ederim.
spin, bounce, pulse, swing gibi hareketler göz alıcı olabilir; üstelik ayrıca SVG yazmadan şekil üretme fikri bence temiz fikirlerden biri.
Lafı gevelemeden söyleyeyim: heart veya star gibi formlar demo işlerinde hoş duruyor ama prod ortamda herkes aynı heyecanı paylaşmıyor.
Kullanıcı deneyimi açısından her animasyon iyi animasyon değildir; bazen hareket etmek yerine sade kalmak daha akıllıca olur.
Ne yalan söyleyeyim, Bir finans kuruluşunda çalışan ekipten geçen yıl duyduğum geri bildirim hâlâ aklımda: “Bizde hareket istiyorsak bile kontrollü istiyoruz.” Çok haklılar yani… bankacılık ekranında hoplayan zıplayan buton görmek istemezsin! Peki neden? Çünkü dikkat dağılıyor. Güven hissi biraz zedeleniyor.
“Sketchy” görünüm nerede parlıyor?
The sketchy / handdrawn etkisi indie projelerde gerçekten tatlı duruyor.
Kendi kişisel blogumda deneme amaçlı benzer ruhu taşıyan mini bloklar kullanmıştım; ziyaretçilerden gelen yorumların yarısı “tasarım sıcak durmuş” şeklindeydi.
İlginç olan şu ki, Ama kurumsal tarafta işler biraz değişiyor…
- Eğer marka dili resmi ise bu tarz doku seni yoldan çıkarabilir. (bence en önemlisi)
- Eğer hedef genç ve yaratıcı kullanıcıysa çok yakışabilir.
- Eğer dashboard yapıyorsan büyük ihtimalle gereksiz kaçacaktır.
Küçük takım mı büyük organizasyon mu?
Neyse uzatmayalım, karar noktasına geldik diyelim.
Küçük startup için Butterfly CSS bayağı uygun görünüyor çünkü süreç basit:
– hızlı kurulum
– az dosya
– kolay deneme
– düşük zihinsel yük
Mesela iki kişi üç kişi kod yazıyorsa bu tip sistemler işi hafifletiyor.
Ama enterprise seviyeye çıktığında hikâye değişiyor…
Büyük organizasyonda sen sadece component üretmiyorsun; versiyon yönetimi, design token uyumu, güvenlik incelemesi (evet UI tarafında bile), eğitim dokümanı ve bakım maliyetini de yönetiyorsun.
AZ-104 ve AZ-500 hazırlıkları sırasında öğrendiğim şeylerden biri şu oldu:
hafif başlayan çözümler bazen operasyonel olarak ağırlaşabiliyor.
Burada da benzer durum var.
Aracı almak kolay,
ekibe doğru biçimde yedirmek zor kısmı.
Ha bu arada,
bir bankacılık müşterisinde DevOps dönüşümü yaparken gördüğümüz şey şuydu:
dokümansız çıkan her hızlı karar iki hafta sonra borca dönüşüyor.
Butterfly CSS kötü olduğu için değil;
sadece disiplin gerektirdiği için.
Peki ben olsam nerede kullanırım?
Açık konuşayım:
ben bunu ana kurumsal platform framework’ü diye konumlamam.
Ama şu üç yerde gönül rahatlığıyla düşünürüm:
- Kampanya landing page’leri
- Kişisel portföy siteleri
- Demosu çabuk çıkarılması gereken ürün fikirleri
- Kodun yanında HTML okunurluğunun önemli olduğu yan projeler()
/ul>
Buna karşılık yoğun form ekranları olan CRM uygulamasında temkinli olurum.
Çünkü orada sürdürülebilirlik önemli.
Ve evet,
görsel oyundan çok tutarlı komponent yaşam döngüsü gerekir.
Sonsöz gibi düşünebilirsin ama tam sonsöz değil 🙂
Butterfly CSS bana göre “her derde deva” değil.
Zaten öyle iddia eden araçlardan da genelde biraz uzak dururum.
Fakat fikir olarak taze,
kullanımı keyifli
ve belli senaryolarda baya işe yarıyor.
2026’ya giderken web geliştirmenin sıkıcı olmaması gerektiğini hatırlatıyor resmen!
Zayıf tarafı mı?
Ekip ölçeği büyüdükçe standardizasyon sorusu kapıyı çalıyor.
Bu kısmın cevabı henüz tam pişmemiş olabilir.
Ama küçük gruplar,
solo geliştiriciler
ve yaratıcı projeler için bence gayet makul bir seçenek olarak masada duruyor.
]
Sıkça Sorulan Sorular
Butterfly CSS kimler için uygun?
Küçük ekipler, solo geliştiriciler ve hızlı prototip çıkarmak isteyenler için uygun görünüyor. Kurumsal düzende kullanılabilir ama öncesinde standartları iyi belirlemek gerekiyor.
Tailwind yerine tamamen geçebilir mi?
Bazı projelerde evet,ama genel cevap hayır. Tailwind daha güçlü kontrol sağlıyor,Butterfly ise sadelik ve hız tarafında öne çıkıyor.
Hello world düzeyinde öğrenmesi zor mu?
Pek zor değil. Attribute mantığı tanıdık gelirse oldukça hızlı kavranıyor,ama alışkanlık değiştirmek yine biraz vakit alabiliyor.
Büyük işletmelerde neden temkinliyim?
Çünkü uzun vadede bakım,tasarım sistemi uyumu ve ekip içi standartlar kritik hale geliyor. Hafif başlangıç bazen beklenmedik operasyon yüküne dönüşebiliyor.
KAYNAKLAR VE İLERİ OKUMA（Kaynaklar and İleri Okuma）*MDN Web Docs — Global Attributes in HTML>
Microsoft Learn — HTML and CSS Basics
GitHub — Css Framework Topics
20+ yıl deneyimli Azure Solutions Architect. Microsoft sertifikalı bulut mimari ve DevOps danışmanı. Azure, yapay zekâ ve bulut teknolojileri üzerine Türkçe teknik içerikler üretiyor.
İlgili Yazılar
Bu içerik işinize yaradı mı?
Benzer içerikleri kaçırmamak için beni sosyal medyada takip edin.