CSS Çerçeveleri veya CSS Izgarası: Projem İçin Ne Kullanmalıyım?

Bana en sık sorulan sorular arasında "CSS Grid mi yoksa Bootstrap mı kullanmalıyım?" sorusunun bir çeşidi var. Bu yazıda bu soruya bir göz atacağım. Çerçeveleri kullanma nedenlerinin çeşitli olduğunu ve yalnızca bu çerçevede yer alan ızgara sisteminin kullanımına odaklanmadığını keşfedeceksiniz. Umarım bu nedenleri açıklayarak, üzerinde çalıştığınız siteler ve uygulamalar ve ayrıca birlikte çalıştığınız ekip için en iyisinin ne olduğu konusunda kendi kararınızı vermenize yardımcı olabilirim.

Bu yazıda bir çerçeveden bahsettiğimde Bootstrap veya Foundation gibi üçüncü taraf bir CSS çerçevesini anlatıyorum. Bunların gerçekten bileşen kitaplıkları olduğunu iddia edebilirsiniz, ancak birçok kişi (kendi belgeleri dahil) bunları bir çerçeve olarak tanımlar, bu yüzden burada kullanacağımız şey budur. Önemli olan, bunların sizin özel sorunlarınıza atıfta bulunmadan sizin için harici olarak geliştirilmiş bir şey olmasıdır. Üçüncü taraf bir çerçeve kullanmanın alternatifi, kendi CSS'nizi yazmaktır - bu, kendi dahili çerçevenizi geliştirmeyi, bir dizi ortak dosyayı başlangıç ​​noktası olarak kullanmayı veya her projeyi yeni bir şey olarak oluşturmayı içerebilir. Bütün bunlar, çok genel olanlardan ziyade kendi özel ihtiyaçlarınıza göre yapılır.

Neden Bir CSS Çerçevesi Seçmelisiniz?

CSS Grid, bir CSS çerçevesinin yaptığı şeylerin yerine geçmediği için Grid mi yoksa çerçeve mi kullanılacağı sorusu hatalı. Konuyla ilgili herhangi bir araştırma, çerçeve CSS Grid'imizin neyi değiştireceğini düşünmelidir. İnsanların neden bir CSS çerçevesi kullanmayı seçtiklerini öğrenerek başlamak istedim. Bu yüzden Twitter'a döndüm ve bu tweet'i gönderdim.

Bir soru: projeniz için bir CSS çerçevesi (Bootstrap, Foundation vb.) kullanmayı seçtiyseniz, bunu yapmanın ana nedenleri nelerdi?

— Rachel Andrew (@rachelandrew) 16 Ekim 2018

Bir sürü tepki vardı. Beklediğim gibi, bir çerçeve kullanmak için içerdiği ızgara sisteminden çok daha fazla neden var.

Bir Çerçeve Ekibinize Hazır Belgeler Sağlar

Başka geliştiricilerle birlikte bir proje üzerinde çalışıyorsanız, oluşturduğunuz herhangi bir dahili sistemin, ekip üyelerinizin onu etkin bir şekilde kullanmasına yardımcı olacak belgeleri de içermesi gerekir. Yararlı belgeler oluşturmak zaman alıcı, başlı başına yetenekli bir iştir ve büyük çerçevelerin çok iyi yaptığı bir şeydir.

Çerçeve dokümantasyonu tekrar tekrar ortaya çıktı ve birçok deneyimli ön uç geliştirici, bir CSS çerçevesini neden önereceklerini ve kullanacaklarını açıklayan ve açıklayan birçok kişiyle ortaya çıktı. Bazen insanların CSS'yi gerçekten bilmedikleri için çerçeveleri kullandıkları fikrini duyuyorum, ancak yanıt veren kişilerin çoğu benim için uzman CSS geliştiricileri olarak biliniyor. Çerçeve tarafından yapılan seçimlerden bazen hayal kırıklığına uğradıklarına eminim, ancak bu seçimin olumlu yönleri bundan daha ağır basıyor.

Çevrimiçi Topluluklar: Yardıma Kolay Erişim

Belirli bir aracı kullanmaya karar verdiğinizde, yardım isteyecek bir kullanıcı topluluğu da kazanırsınız. Çok net bir CSS sorununuz yoksa ve bunu göstermek için azaltılmış bir kullanım durumu oluşturamıyorsanız, CSS ile ilgili yardım istemek zor olabilir. Özellikle belirli bir bileşeni oluşturmaya nasıl yaklaşacağınızı sormak istiyorsanız böyledir. Bir çerçeve kullanmak, sorunuz için size bir başlangıç ​​noktası verebilir; genel olarak, sıfırdan başlamak yerine belirli bir bileşeni nasıl değiştireceğinizi veya stillendireceğinizi soracaksınız. Bu sorulması daha kolay bir şey olduğu kadar cevaplaması da daha kolay bir şey.

Izgara Sistemi

CSS Izgarasına sahip olmamıza rağmen, birçok kişi bir çerçeve kullanmaya karar vermelerinin ana nedeninin ızgara sistemi için olduğunu söyledi. Tabii ki, bu projelerin çoğu CSS Grid'in kullanıma sunulmasından çok önce başlamış olabilir. Ancak bugün bile, geriye dönük uyumluluk veya ekibin daha yeni yerleşim yöntemlerini anlama konusundaki endişeleri, insanların yerel CSS'yi benimsemek yerine bir çerçeve kullanmaya karar vermesine neden olabilir.

Proje Teslim Hızı

benzersiz bir tasarıma ve verimli css'ye sahip olmak son tarihten çok daha düşük bir önceliğe sahipken

— CodingBlocks.net (@CodingBlocks) 16 Ekim 2018

Bir çerçeveyi seçmek, genel olarak projenizi teslim etmeyi çok daha hızlı hale getirecektir, özellikle de bu proje çerçevenin işleri yapma şekline çok iyi uyuyorsa ve çok fazla özelleştirme gerektirmiyorsa.

Yeni bir fikir için bir MVP geliştirme durumunda, bir çerçeve mükemmel bir seçim olabilir. Zaman harcayacak çok şeyiniz olacak ve projenin ihtiyaç duyduğu şeyler açısından varsayımları test etmeye devam edeceksiniz. Bu ilk sürümü bir çerçeve kullanarak geliştirebilmek, ürünü kullanıcıların önüne daha hızlı çıkarmanıza ve daha sonra kullanmamaya karar verdiğiniz şeyleri geliştirmek için çok fazla zaman harcamanıza yardımcı olabilir.

MVP olan herhangi bir şey üzerinde bir çerçeve ile gidiyorum - gerçek konsept üzerinde çalışırken zamanı optimize etmek için araçlar ve çerçeveler üzerinde minimum geliştirme çabası.

Mevcut büyük ölçekli bir sitenin/uygulamanın tekrarı olan herhangi bir şey üzerinde kendi CSS "çerçevemi" yapıyorum.

— Ben Bodien (@bbodien) 16 Ekim 2018

Hızın ve bir dizi hazır yerleşik bileşenin çok yararlı olabileceği başka bir yer, bir site veya uygulama için arka uç yönetici sistemi geliştirirken. Yalnızca birkaç yönetici ekranı oluşturmanız gerektiği durumda, bir çerçeve, form alanlarını ve diğer bileşenleri şekillendirmek için çok zaman kazandırabilir! Bootstrap ve Foundation için faydalı bir başlangıç ​​noktası sağlayabilecek pano temaları bile var.

Ben Tasarımcı Değilim!

Bu nokta, geçmişte bir CSS çerçevesi seçmemin nedenidir. Ben bir tasarımcı değilim ve bir şeyi hem tasarlamak hem de inşa etmek zorunda kalırsam, vermek için tamamen yetersiz olduğum tasarım kararları vermek için uzun zaman harcarım. Her yan proje için bir tasarımcı kiralamak için paraya sahip olmak güzel olurdu, ancak ben yapmıyorum ve bu nedenle bir çerçeve, bir şeyin gönderilmesi ile gönderilmemesi arasındaki fark anlamına gelebilir.

CSS Hataları ve Tarayıcı Uyumluluğu Sorunlarıyla Başa Çıkmak

Düşündüğümden daha az bahsettim, çerçeve yazarları, gerçek hatalar veya belirli özellikler için destek eksikliği nedeniyle tarayıcı sorunlarıyla zaten ilgilenecekti. Ancak, bu hala birçok insan için karar vermede bir faktördü.

Duyarlı Tasarıma Yardımcı Olmak İçin

Web sayfalarının duyarlılığı. Web sayfaları için sınır değerlere karar vermekte zorlandım.

— Faysal Ali (@f_a_akhtar) 18 Ekim 2018

Bu birkaç kez geldi; insanlar özellikle duyarlı olduğu veya onlar için sınır değerler hakkında kararlar verdiğim için bir çerçeveyi tercih ediyorlardı. Bunun özellikle bir çerçeve kullanmayı seçmede bir faktör olarak adlandırılan bir şey olmasının ilginç olduğunu düşündüm.

Neden Bir Çerçeve Kullanmıyorsunuz?

Çerçevelerin seçilmesinin olumlu nedenleri arasında, insanların bu seçimle ilgili yaşadıkları sorunlardan bazıları vardı.

Çerçeve Kodunu Geçersiz Kılmanın Zorluğu

Birçok kişi, çerçevede kullanılan kodu geçersiz kılmanın zor olabileceği ve çok fazla geçersiz kılmaya ihtiyaç duymadıkları takdirde çerçevelerin iyi bir seçim olduğu konusunda yorum yaptı. Kullanım kolaylığının faydaları ve ekipteki herkesin çerçevenin nasıl kullanılacağını anlaması, o zaman çok sayıda özelleştirme varsa kaybolabilir.

Tüm Web Sitelerinin Sonu Aynı Görünüyor

Aynı görünmeye başlayan tüm web sitelerinin suçu, iyi bilinen CSS çerçevelerinin kapısına doğrudan yerleştirildi. Belirli bir çerçevenin kullanıldığından emin olduğum siteler gördüm, sonra bunların özel CSS olduklarını keşfettim, bu çerçevelerde yapılan tasarım seçimleri çok yaygın.

Daha önce bahsedilen çerçeve stillerini geçersiz kılmanın zorluğu, belirli bir çerçeve kullanılarak geliştirilen sitelerin neden benzer görünme eğiliminde olduğunun büyük bir kısmıdır. Bu sadece yaratıcı bir konu değil, aynı çerçeveyi seçmiş birkaç web sitesinin kullanıcısı olarak hepsinin aynı şey olduğunu hissetmesi çok garip olabilir. Markanızı aktarma ve iyi bir kullanıcı deneyimini bunun bir parçası haline getirme açısından, bir çerçevenin genel seçimlerini tercih ederken belki bir şeyler kaybedersiniz.

Tüm Dünyanın CSS Sorunlarını Miras Alma

İster ön ister arka uç, ana akıma ulaşmaya çalışan herhangi bir araç veya çerçeve, mümkün olduğunca çok sorunu çözmelidir. Araç, belirli bir kullanım durumunu çözmek için sıkı bir şekilde bağlanmadıkça, çok sayıda çok genel kod ve sahip olmadığınız ve asla sahip olamayacağınız sorunları çözen kod içerecektir.

Internet Explorer'da veya Chrome'un eski sürümlerinde daha sınırlı bir deneyime izin vererek, yalnızca en güncel tarayıcılarda görüntülenmek için tam deneyiminize ihtiyaç duyma konusunda şanslı bir konumda olabilirsiniz. IE9'a geri dönen çok sayıda yerleşik desteğe sahip bir çerçeve kullanmak, özellikle son zamanlarda CSS düzenindeki iyileştirmeler göz önüne alındığında, birçok ek kodla sonuçlanacaktır. Çerçevedeki her şey bu destek gereksinimini üstlendiğinden, yaratıcı olmanızı da engelleyebilir. CSS kullanarak mümkün olan şeyler çerçeve tarafından sınırlandırılabilir.

Örnek olarak, popüler çerçevelerdeki ızgara sistemleri, Grid Layout'tan önceki layout sistemlerinde herhangi bir kavram veya satır olmadığı için satırları yayma yeteneğine sahip değildir. CSS Izgara Düzeni buna kolayca izin verir. Bootstrap Grid'e bağlıysanız ve tasarımcınız satırları kapsayan öğeler içeren bir tasarım bulursa, Grid'in hedef tarayıcılarınız tarafından desteklenmesine rağmen, onu uygulayamazsınız.

Performans sorunları

Yukarıdakilerle ilgili olarak, sahip olduğunuz tam kullanım durumları için optimize edilmiş bir şey yerine, oldukça genel kod kullanmanın doğasında bulunan performans sorunları vardır. Performansı iyileştirmeye çalışırken kendinizi çerçevenin kararlarına karşı çıkıyor bulacaksınız.

Artan Teknik Borç

Hız, esasen, uzun vadede önemli teknik borç yarattığı için biraz yanlış bir ekonomi olduğunu çabucak anladık.

— Tim Cthulhuegdon (@nefarioustim) 16 Ekim 2018

Bir çerçeve, girişiminizi hızlı bir şekilde hayata geçirmek için harika bir yol olsa da ve bu kararı verdiğiniz anda onu değiştireceğinizden eminseniz, bunun gerçekleşmesi için bir planınız var mı?

CSS Öğrenmek Yerine Bir Çerçeve Öğrenmek

Konferans ve atölye katılımcılarıyla konuşurken, birçok insanın CSS yazmak için yalnızca bir çerçeve kullandığını keşfettim. Bugün web platformunun karmaşıklığı göz önüne alındığında, bu araçlardan biriyle web geliştirmeye girmekte yanlış bir şey yok, bunun birçok insan için yol olacağını hayal ediyorum. Bununla birlikte, özellikle becerilerinizi temellendirdiğiniz çerçeve gözden düşerse, kariyer sınırlayıcı bir seçim haline gelebilir.

CSS bilgisi olmayan ön uç geliştiricilere sahip olmak bir şirketi endişelendirmelidir. Ekibiniz CSS'yi onsuz nasıl yapacağını gerçekten anlamıyorsa, bu çerçeveden uzaklaşmayı inanılmaz derecede zorlaştırır. Bu gerçekten bir çerçeve kullanmamak için bir neden olmasa da, birini kullanırken akılda tutulması gereken bir şey. Taşınma günü geldiğinde, ekibin CSS yazmayı hatırlamaya (veya ilk kez öğrenmeye) gerek kalmadan yeni bir şey üstlenmeye hazır olmasını umarsınız!

Seçim Son Kullanıcıları dikkate almıyor

Nicole Sullivan, sorumdan birkaç gün önce bu makaleyi yazmayı düşünürken hemen hemen aynı soruyu sordu, ancak o sadece CSS çerçevelerinden ziyade ön uç çerçeveleri bir bütün olarak düşünüyor. Jeremy Keith, yanıtların tam olarak sıfırın son kullanıcılarla ilgili olduğunu kaydetti. Benim soruma verilen cevaplar da böyleydi.

Sitemizi hızlı bir şekilde inşa etme yarışımızda, sitenin tasarımcıları ve geliştiricileri olarak kendimiz için mümkün olduğunca iyi şeyler yapma arzumuz, bunu kimin için yaptığımızı unutuyor muyuz? Çerçeve geliştiricisi tarafından verilen kararlar, oluşturduğunuz sitenin kullanıcılarının ihtiyaçları ile örtüşüyor mu?

Çerçeveleri “Vanilla” CSS ile Değiştirebilir miyiz?

Çerçevenizi değiştirmeyi veya çerçevesiz yeni bir projeye başlamayı düşünüyorsanız, bu süreci kolaylaştırmak için göz önünde bulundurabileceğiniz şeylerden bazıları nelerdir?

Çerçevenin Hangi Bölümlerine İhtiyacınız Olduğunu Anlayın

Bir çerçevenin kullanımını kendi CSS'nizle değiştiriyorsanız, mevcut çerçeveyi kullanımınızı denetlemek başlamak için iyi bir yer olacaktır. Ne kullandığınızı ve neden kullandığınızı öğrenin. Yeni tasarımda bu şeyleri nasıl değiştireceğinizi düşünün.

Bir çerçeve seçmeyi veya kendi çerçevenizi yazmayı düşünürken benzer bir süreci takip edebilirsiniz. Bunun hangi kısımlarına ihtiyaç duymayı makul bir şekilde bekleyebilirsiniz? Gereksinimlerinize ne kadar uyuyor? İçeri aktardığınız, potansiyel olarak ziyaretçilerden indirmelerini isteyip de asla kullanmadığınız çok sayıda kod olacak mı?

Belgelenmiş Bir Model Kitaplığı veya Stil Kılavuzu Oluşturun

Kalıp kitaplıklarıyla çalışmanın büyük bir hayranıyım ve burada Smashing Magazine'deki Fraktal kullanımımız hakkındaki yazımı okuyabilirsiniz. Bir model kitaplığı veya stil kılavuzu, tüm bileşenlerinizle birlikte belgelerin oluşturulmasını sağlar. Tüm projelerime desen kitaplığındaki CSS üzerinde çalışarak başlıyorum.

Belgeleri yazan biri olarak yine de belgeleri yazmanız gerekecek, ancak çoğu zaman en zor şeyin nereden başlayacağınızı ve belgeleri nasıl yapılandıracağınızı bilmek olduğunu biliyorum. Bir kalıp kitaplığı, dokümanları bileşenin kendisi için CSS ile birlikte tutarak buna yardımcı olur. Bu yaklaşım, atıfta bulundukları bileşene sıkı sıkıya bağlı olduklarından belgelerin güncelliğini kaybetmesinin önlenmesine de yardımcı olabilir.

Kendi CSS Kodu Yönergelerinizi Geliştirin

Ekip genelinde tutarlılık inanılmaz derecede faydalıdır ve bir çerçeve olmadan bunu dikte eden hiçbir şey olmayabilir. Özellikle daha yeni yerleşim yöntemleriyle, genellikle bir modelin oluşturulabileceği birkaç yol vardır, eğer herkes farklı bir tane seçerse, tutarsızlıkların ortaya çıkması muhtemeldir.

Yardım İsteyecek Daha İyi Yerler

İnsanları Stack Overflow yönüne göndermek dışında CSS konusunda yardım isteyebileceğiniz çok az yer var gibi görünüyor. Özellikle yeni başlayanlar için ulaşılabilir birkaç yer var gibi görünüyor. İnsanları üçüncü taraf araçlardan uzaklaştıracaksak, bu araçların etrafındaki topluluklardan gelen dostane, yardımcı desteğe olan ihtiyacı doldurmamız gerekir.

Bir şirket içinde, daha deneyimli geliştiricilerin daha yeni ekip üyeleri için CSS desteği haline gelmesi mümkündür. Bir çerçeveden kendi çözümünüze geçiyorsanız, özellikle de insanlar geçmişte yardıma ihtiyaç duyduklarında üçüncü taraf aracıyla sağlanan yardımı kullanmaya alışmışlarsa, açığı kapatmaya yardımcı olmak için hangi eğitimin gerekli olabileceğini düşünmek akıllıca olacaktır. .

Tasarımcı Olmayanlar İçin Stil Kılavuzları veya Başlangıç ​​Noktaları

“Hangi fontları kullanmalıyım?”, “Başlıklar gövde metnine göre ne kadar büyük olmalı?”, “Alt gölge kullansam olur mu?” gibi sorularla kendimi düğümlere bağlarım. CSS'yi kolayca yazabilirim - ne yapmaya çalıştığımı bilirsem! Gerçekten ihtiyacım olan şey, korkunç olmayan bir tasarım yapmak için bazı kurallar, bir tür tipografi başlangıç ​​noktası veya birçok durumda bir çerçevenin varsayılanlarını kullanabilmenin yerini alacak bir dizi temel yönerge.

İnsanları Modern Tarayıcı Birlikte Çalışabilirliğinin Durumu Hakkında Eğitmek

Birkaç yıldır çerçeve tabanlı geliştirmeye dalmış olan kişilerin, genellikle birkaç yıldır güncel olmayan tarayıcı birlikte çalışabilirliği görüşüne sahip olduklarını keşfettim. CSS ile çalışan çapraz tarayıcı açısından hiç bu kadar iyi bir durumda olmamıştık. Bazı tarayıcılar CSS'nin yeni bir parlak parçasını desteklemiyor olabilir, ancak genel olarak CSS (desteklendiğinde) garip hatalarla dolu olmayacaktır. Örneğin, hemen hemen her durumda, bir tarayıcıda CSS Izgarası kullanırsanız, CSS'niz başka bir tarayıcıda tam olarak aynı şekilde çalışacaktır.

Çerçevenin kendilerini tarayıcı hatalarından koruduğuna inanan ekip üyelerine bir çerçeve kullanmamak için bir dava açmaya çalışıyorsanız, bu noktanın gündeme getirilmesi yararlı olabilir. Tarayıcı uyumluluğu sorunları gerçek mi yoksa geçmişin endişelerine mi dayanıyor?

Yeni Bir Çerçeve Türü Görecek miyiz?

Beni ilgilendiren bir şey, yeni yerleşim yöntemlerimizin yeni tür araçlar ve çerçeveler oluşturmaya yardımcı olup olmayacağıdır. Yeni düzen yöntemlerinden yararlanan, daha fazla yaratıcılığa izin veren ancak yine de ekiplere ve bireylere tweet'ime verilen yanıtlardan ortaya çıkan yadsınamaz avantajlar sağlayan araçlar görecek miyiz?

Belki de yerleşik bir ızgara sistemi yerine yeni yerleşim yöntemlerine güvenerek, yeni tarz bir çerçeve çok daha hafif olabilir ve kullanışlı bileşenlerden oluşan bir koleksiyon haline gelebilir. Daha sonra, çok genel kodda bulunan bazı performans sorunlarından kurtulabilir.

Bir çerçevenin yardımcı olabileceği bir alan, daha yeni yerleşim yöntemlerini desteklemeyen tarayıcılar için sağlam geri dönüşler oluşturmaya veya bileşenlere gerçekten sağlam erişilebilirlik kazandırmaya yardımcı olabilir. Bu, birlikte çalışabilirliği ve erişilebilirliği göz önünde bulunduran bir çalışma şekline rehberlik etmeye yardımcı olabilir, bu şeyleri akıllarında ön planda olmayan insanlar için bile.

CSS Izgara Düzeni için Bootstrap Izgarasını değiştirmenin bunu başaracağını düşünmüyorum. Bunun yerine, yeni çerçeveler bulan yazarlar, belki burada özetlenen bazı nedenlere bakmalı ve bunu yapmak için CSS'de sahip olduğumuz yeni işlevselliği kullanarak bunları yeni yollarla çözmeye çalışmalıdır.

Bir Çerçeve Kullanmalı mısınız?

Siz ve ekibiniz bu soruyu kendiniz cevaplamanız gerekecek. Ve insanların sizi inandırmaya çalıştıklarına rağmen, evrensel bir doğru ya da yanlış cevap yoktur. Projeniz için yalnızca doğru ya da yanlış olan vardır. Umarım bu makale ve asıl soruma verilen birçok yanıt, bu soruyu düşünürken size tartışacak bazı şeyler verebilir.

Cevabın zamanla değişeceğini unutmayın. Başlangıçta site için geliştirme yapmak açısından yalnızca şu anda neye ihtiyacınız olduğunu düşünmekle kalmayıp, sitenin ömrünü de göz önünde bulundurmak yararlı bir düşünce deneyi olabilir. Bunun beş yıl sonra hala olacağını düşünüyor musunuz? O zaman seçiminiz olumlu mu yoksa olumsuz mu olacak?

Kararlarınızı belgeleyin, onları tekrar gözden geçirmekten korkmayın ve sizin ve ekibinizin, kullanmaya karar verdiğiniz herhangi bir çerçevenin dışında becerilerinizi korumasını sağlayın. Bu şekilde gelecekte ilerlemek ve projenizin sonraki aşamaları için en iyi kararları vermek için iyi bir yerde olacaksınız.

O tweette başlayan sohbetin devam etmesini çok isterim. Yorumlarda hikayelerinizi bize bildirin - şu anda projeleri için en iyi olanı bulmaya çalışan diğer insanlara yardımcı olabilirler.