Başka bir forumda okurken CSS Framework dünyasına rastladım. Özellikle baktığım kişi BluePrint . Başka birinin CSS çerçeveleriyle karşılaşıp karşılaşmadığını merak ediyordum, hangisinin en iyisi olduğunu ve çabaya değip değmediklerini önerin mi?
Başka bir forumda okurken CSS Framework dünyasına rastladım. Özellikle baktığım kişi BluePrint . Başka birinin CSS çerçeveleriyle karşılaşıp karşılaşmadığını merak ediyordum, hangisinin en iyisi olduğunu ve çabaya değip değmediklerini önerin mi?
Yanıtlar:
CSS 'çerçeveleri' asıl noktayı tamamen kaçırıyor.
CSS, temel bir kitaplık / çerçeve ekleyebileceğiniz ve daha sonra üst düzey işler yapmak için ondan işlevleri ve nesneleri çağırabileceğiniz JavaScript'e benzemez. Bir CSS çerçevesinin size verebileceği tek şey bildirim kurallarıdır: bazı varsayılan tarayıcı kuralı sıfırlama öğeleri, sayfanızı yazmaya zorlanacak bazı sınıf stilleri ve 'float' ve 'clear' kullanan düzen kuralları. Bunu, yüzlerce çerçeve kuralının şişkinliğini çekmek yerine, birkaç satır CSS'de kendiniz yazabilirsiniz.
Özellikle 'ızgara düzeni' konusu, sunumunuzu biçimlendirmenize karıştırmanın kötü eski günlerine geri döner. 'div class = "span-24"' bir tablodan daha iyi değildir, oraya geri dönmeniz ve düzeni etkilemek için işaretlemeyi değiştirmeniz gerekir. Ve gördüğüm tüm çerçeveler sabit pikselli yüzen kutulara dayanıyor, bu da çok çeşitli pencere boyutlarında erişilebilen bir sıvı düzen oluşturmayı imkansız hale getiriyor.
Geriye dönük yazma, yalnızca bir CSS kuralı yazmaktan çok korkan biri için kullanılıyor.
Yani, bu soruya henüz kimse yanıt vermedi (birkaç olumlu oy görmeme rağmen), bu yüzden En azından bu sorudaki ikinci soruyu ele almaya çalışacağım.
CSS Çerçeveleri harika; diğer çerçeveler gibi, geliştirme süresini kısaltırlar ve siteye özel tasarım ve CSS üzerinde hemen çalışmaya başlamanızı sağlar. Zor kararlar hakkında düşünüyorlar, böylece zorunda kalmazsınız.
Ne yazık ki, bir çerçeve kullanmanın (genel olarak) iki dezavantajı vardır:
Çerçeve, CSS kodunuzun genel yapısını ve mekaniğini belirler. Şimdi, bir CSS sıfırlamasından bahsetmiyorum (bunlar kendi başlarına yararlıdır, ancak gerçek çerçeveler değildir); Belgenizde hangi semantik etiketleri kullanacağınıza vb. Karar vermiş olan dürüstten iyiye bir çerçeveden bahsediyorum. Bu nedenle, çerçeveye bağımlı hale gelirsiniz ve bir hata olduğunda çerçevede, genellikle bunu kendiniz düzeltmeniz gerekecektir.
Çerçeveler, tarayıcılar arası / gelişmiş CSS sorunlarından habersiz olmak için bir bahane değildir. Tıpkı bir PHP veya JavaScript çerçevesi ile çalışırken yaptığınız gibi, her zaman bunlarla karşılaşacaksınız. Ve onlarla nasıl başa çıkacağınızı bilmeniz gerekir. Başkasınınkini kullanmadan önce kendi çerçevenizi yazmanız gerektiğine dair yaygın bir söz vardır.
Blueprint'e hızlıca bir göz atarsam, buna gerçekten bir çerçeve demezdim; belki üstte birkaç ekstra güzellik olan bir sıfırlama.
BluePrint'e ve birkaç kişiye daha baktım ve önereceğim tek CSS 'çerçevesi' YUI Grids.
Artıları:
Eksileri:
Diğerlerinin de belirttiği gibi, CSS için gerçek bir 'çerçeve' yoktur. Stil sayfalarını sıfırlama , düzen konusunda da çok yardımcı olur. Genelde bir sıfırlama stil sayfasına bağlı kalıyorum ve oradan devam ediyorum. Ancak çok fazla CSS deneyiminiz yoksa YUI Grids size biraz zaman kazandırabilir.
BluePrint ve YUI gibi birkaç css çerçevesini ve Eric Meyer's gibi css sıfırlamalarını incelemek ve anlamak için zaman ayırın (gerçekten anlayın!). Ardından, çalışma yöntemlerinize ve oluşturduğunuz sitelerin türüne göre kendi sıfırlama ve / veya çerçevenizi bir araya getirmek için zaman ayırın.
Şahsen, Eric Meyer sıfırlamanın çoğunu kendi sınıflarım ve sıfırlamalarımın yanı sıra BluePrint ve YUI'den birkaç fikirle kullanıyorum.
Geçenlerde Eric Meyer'in CSS Çerçeveleri üzerine bir sunum yaptığını izledim ve şu soruyu sordu: "Öyleyse hangisi benim için doğru?" Daha sonra boş bir slayt göstererek soruyu yanıtladı. Demek istediğim, çoğu sıfırlama ve çerçeveye yerleştirilmiş kesinlikle bazı yararlı kavramlar var, ancak size en uygun olanı kendiniz için yazdığınızdır (çabaya değer).
Neden css 'çerçeveleri' kullanmalı?
Zaman için baskı altındaysanız.
Eğer css bilmiyorsanız ve sizin için yazabilecek birini tanımıyorsanız.
Standartlar vb. Konusunda aşırı değerli değilseniz.
Bir ön uç geliştiriciye başvurmadan kendi başlarına bir düzen oluşturmalarına izin verdiği için, plan veya 960'ı kullanmaktan gerçekten mutlu olan programcılar tanıyorum. Bu, kişisel projeler veya sınırlı kaynaklara sahip girişimler için idealdir.
Halihazırda yeterli CSS bilgisine sahipseniz, muhtemelen zaten iyi bir stok düzeni kitaplığınız vardır, bu nedenle açıkça bir çerçeveye ihtiyacınız olmayacaktır.
Bununla birlikte, yeni başlayan biriyseniz ve bir şeyi hazırlayıp çalıştırmanız gerekiyorsa, temel düzeni çok daha basit hale getirdiği ve tarayıcı uyumluluğunu da ortadan kaldırdığı için bir çerçeveye dönebilirsiniz.
Tüm bunları söyledikten sonra, kutudan çıkan birçok çerçeve bazı korkunç sınıf isimlerinden yararlanır. Bir çerçeveyi başlangıç noktası olarak alan ve daha sonra kendi sınıf ve kimlik etiketleriyle özelleştiren bazı web siteleri biliyorum. Ama açıkça bu yeniden yazma işinde de biraz çalışma var. Yukarıda belirtildiği gibi Compass gibi bir şey kullanmak, bunu aşmanıza yardımcı olur.
Dolayısıyla, CSS çerçeveleri - anlambilim pahasına size zaman kazandırabilirler. CSS bilginize de zarar verebilirler, ancak bu, genel olarak konuyu öğrenmeye ne kadar yatırım yaptığınıza bağlıdır. Bunları kullanıp kullanmayacağınız size kalmış.
Sorunlarınızı çözmede mevcut çerçevelerin ne kadar etkili olduğunu kendinize sormanız gerekir. Gereksinimlerinizi karşılıyorlar mı?
Bir çerçeve kullanarak, piksel düzeyinde bazı kurallar veya ayrıntılar belirleyebilir ve zamanınızın geri kalanını uygulamaya ve üretmeye ayırabilirsiniz. Bu, büyük bir üretkenlik artışı. Kendinizi projenin ilerleyen dönemlerinde işleri birkaç piksel ayarlamak için zaman harcadığınızı fark ederseniz (tasarımı mikro yönetme), bu bir çerçevenin yararlı olabileceğinin bir işaretidir.
Pragmatik Programcı'daki 17. İpucu : "Sorunlu etki alanına yakın program" diyor. Bir soyutlama katmanı kullanmak, sizi düzenin gerçek sorunlarını çözmeye yaklaştırabilir. Örneğin, küçük piksel ayarlamaları yerine sahip olduğunuz ekstra zamanla kullanıcı deneyimini geliştirmeye konsantre olabilirsiniz.
Bu, nicelik için kaliteden ödün vermeniz gerektiği anlamına gelmez. Verimlilikle ilgili.
Yakın tarihli bir projede, kendi çerçevemi oluşturdum çünkü çok sınırlı kaynaklarımız vardı ve popüler çerçeveler istediğimi yapmadı. Ardından, tasarım ekibinin PSD'lerini konuşlandırdığım aynı şebekeye uyacak şekilde kurdum.
Bir çerçevenin herhangi bir CSS uygulaması olması gerekmez. İnternetten indirdiğiniz şişirilmiş bir şey veya güncel olmayan fikirleri uygulayan bir şey olması gerekmez. Bu sadece bir işi halletmek için bir teknik. Bazı kodlayıcıların zaten kendi çerçeveleri varsa ve bunu bilmeseler bile şaşırmam. Aslında, DOM'u CSS ile genişlettiğiniz bir dizi varsayılan öğe olarak görürseniz, bu tanım gereği bir çerçevedir.
Aslında son 24 saatin büyük bir kısmını bunu kendi başıma araştırarak geçirdim, heh. Benim sonucum, güzel bir sıfırlama ( YUI Sıfırlama kullandım ) ve belki de temel öğeleri ayarlamak için başka bir şeyin ( YUI yazı tipleri benim durumumda değerliydi; belki de BluePrint'in "ekstra güzellikleri" sizinki olabilir) iyi bir fikirdi. Ancak, genellikle YUI ızgaraları gibi bir "çerçeve" çok kısıtlayıcıdır, sizi sınıf adlarını, kimliklerini vb. Kullanmaya zorlar ve el yapımı CSS gibi sitenize nadiren sığar.
Kısacası: sıfırlamalar oldukça hoş görünüyor; Listeler için margin-vs-padding, paragraf aralığı veya her neyse, tüm varyasyonları ortadan kaldırmak iyidir. Ama alacağım kadarıyla bu.
Pusula bence harika. Ekran yayınını gördüğünüzden emin olun .
Birkaç web sitesi için 960.gs kullanıyorum ve çok basit, kolay ve çabaya değer buluyorum. Yerleşim konusunda bana pek çok iş kazandırıyor. Sabit 960 piksel genişliğiyle uzaklaşan özel CSS oluşturucuyu kontrol ettiğinizden emin olun.
Ben düşünüyorum bu video sunumu Sitesi Nokta CEO'su Kevin Yank tarafından sorunuza cevap verecektir. Gerçekten izlemenizi tavsiye ederim.
Compass, çerçevenizin sınıflarını ve kimliklerini kendi anlamsal adlarınızla yeniden adlandırmanıza izin verir, böylece bir göz atmak isteyebilirsiniz. Ayrıca, mixins gibi sade vanilya CSS ile elde edemediğiniz şeylere erişim sağlar.
Bu araçları gerçekten araştırmadan ve kullanmadan eleştiren sözde "CSS uzmanları" beni hayrete düşürüyor. Onlar gerekli mi? Hayır. Kendi çerçevenizi seviyorsanız (kendi çerçeveniz var, değil mi? Bir CSS çerçevesi yalnızca dikkatlice tanımlanmış bir kitaplıktır - herkes bir tane kullanmalıdır) o zaman kesinlikle kullanmaya devam edin. Kimse sizi diğer çerçeveleri kullanmaya zorlamıyor ve çerçeveler kullanan kişilerin CSS sadıklarına "yanlış yaptıklarını" söylediğini görmüyorum.
Çerçeveleri böyle bir bakış açısından eleştirmek, sadece bir güvensizliği olduğu kadar bir cehaleti de ortaya çıkarır. Örneğin, bir kişinin CSS bilmeden Compass gibi bir araç kullanacağı fikri gülünçtür. Bir çerçevenin genellikle tüm CSS'nizi sizin için yazmadığının farkındasınız değil mi? Yine de çoğu çerçeve bağlamında kendi CSS'nizi çıkarabilir ve yazabilirsiniz. Aslında, CSS bilmiyorsanız, çabucak hayal kırıklığına uğrayabilirsiniz.
Kendi adıma, bir çerçeveye sahip olmayı takdir ediyorum çünkü zaten belgelenmiş, yüzlerce başka kullanıcı tarafından test edilmiş ve Compass aracılığıyla kendi sınıflarımı ve kimliklerimi uygulayabilirim. Çerçevenin uygun olmadığı bir şeye ihtiyacım olursa, kendim kodlayacağım.
AppFuse şöhretinden Matt Raible, bir süre önce AppFuse için CSS Çerçeveleri geliştirmek üzere bir CSS Çerçeve yarışması düzenledi. Sonuçlar burada yayınlanmaktadır . Birkaç varyasyon var ve bazılarını kendim kullandım çünkü AppFuse kullanıyorum ve onları çok iyi buluyorum.
Temalı uygulamalarda kullanıldıkları için bu CSS Çerçevelerinin iyi çalıştığını eklemeliyim. Yani, kurallara bağlı kalırsanız, birinden diğerine geçmek, bir özellikler dosyasındaki bir değeri değiştirmek kadar basittir.
BluePrint'i bir sitede çok başarılı bir şekilde kullandım (burada siteden bahsedebilirim, ancak gönderinin spam olarak işaretleneceğinden eminim!). Gelecekte kullanıp kullanmayacağımdan emin değilim çünkü düşündüğüm CSS fikirlerinden biri, mizanpaj mantığının sabit kodlanmamasıydı. Düzeni tanımlamak için span-24 ve span-12 olarak adlandırılan css öğelerine sahip olmamalı, ancak searchBox ve mainContent gibi bir öğeye sahip olmalısınız. En azından ben böyle görüyorum.
Bulduğum iyi bağlantı: En İyi 12 CSS Çerçevesi ve Bunları Nasıl Anlarsınız?
İşte CSS Çerçeveleri hakkındaki blog yazım CSS çerçevesi ne zaman kullanılır?
Bir CSS çerçevesi kullanmayı ve anlamsal biçimlendirmeyi korumayı bildiğim tek yol, üst düzey bir soyutlama kullanmaktır. Şu anda Compass, kullanabilecek kadar olgun olduğunu bildiğim tek program, ancak Nicole Sullivan, "Nesne Yönelimli CSS" projesiyle bazı ilginç şeyler yapıyor gibi görünüyor.
Compass'ın Sass karışımlarını akıllıca kullanmasının harika olduğunu ve sürdürülebilir semantik işaretlemenin Kutsal Kase'sine doğru büyük bir adım olduğunu düşünüyorum. Sunum sınıflarını biçimlendirmenin dışında tutmak için Compass gibi bir soyutlama olmadan Blueprint veya YUI gibi bir çerçeve kullanmak isteyeceğimi sanmıyorum.
BTW, Elastic adında hoş görünümlü bir CSS çerçevesi var ve onu Compass'a eklemeyi düşündüğüm kadar iyi görünüyor.
CSS'nin basitlikle ilgili olduğuna inanıyorum. Amaç, HTML ile stil sayfanız arasında referans verirken kontrol edilecek bir veya iki yere sahip olmaktır. Daha fazla satır ve özellikle yazmadığınız ve muhtemelen aşina olmadığınız satırların eklenmesi CSS kodunun karmaşıklığını ve dolayısıyla değişkenliğini katlanarak artıracaktır.
Düzenlerinizi yazarken ve ondan genel bir şablon sistemi geliştirirken öneririm. CSS'yi daha modüler yapmayı sevsem de, genellikle ve tasarıma bağlı olarak, CSS'niz büyük / küçük harfe özel olabilir ve hiç modüler olmayabilir.
Blueprint'i birkaç tek seferlik sitede kullandım ve öncelikle tarayıcılar arası testlerde kesinlikle zaman kazandırdı.
İyi tarafı okunabilir olmasına rağmen, işaretlemenize sunum kodu eklemek kesinlikle berbattır. "Biçimlendirmeye dokunmadan yeniden tasarlayabilirsin" konseptini sevsem de, bunun gerçekten de olmayacağı bir site üretiyorsanız ve sadece dün yapılmasına ihtiyacınız varsa, Blueprint bakılması gereken bir şey.
Bununla birlikte, ne tür düzenler oluşturabileceği konusunda da ödünleşmeler vardır. Siteyi en başından itibaren sıkı bir ızgarada çerçevelerseniz, minimum telaşla çerçeveye dönüştürmek çok daha kolay olacaktır.
BluePrint ve YUI kullandım, ancak kimliklerini ve sınıflarını verdikleri bazı isimler beni hep hayal kırıklığına uğratıyor.
Her biri kendi başına, ama ben bir şeyleri sıfırdan yapmayı tercih ederim, ancak bir süre sonra, önceki çalışmanızı kullanacağınız ve yeni projelere uygulayacağınız bir süreç geliştiriyorsunuz ve web sitesinin istediğiniz gibi görünmesini sağlamak için bazı ince ayarlar yapıyorsunuz. beğenmek.
İyi bir adlandırma kuralı kullandığınızdan emin olun, sadece yolun aşağısında başka birinin css'yi düzenlemeye gelmesi durumunda, her stil adının neyi kastettiği konusunda iyi bir fikre sahip olacaklardır.
Craig,
Pusula, aradığınız şeydir: Blueprint CSS sınıflarınızı "span-24" gibi kendi adlarınızla yeniden adlandırmanıza olanak tanır. Ayrıca değişkenler ve karışımlarla CSS işlevselliğini genişletir. Gerçekten, Compass'ı kontrol etmeden çerçeveleri zamanından önce yargılayanlar "noktayı kaçırıyor". Yıllar önce bize mizanpajlarımız için HTML tabloları yerine CSS kullanarak noktayı kaçırdığımızı söyleyenler gibi.
-Mat
kontrol http://www.ez-css.org/ . üzerinde çalışmak için en kolay ve en hafif css çerçevelerinden biri. :)
Bu demoya bir göz atın: http://www.richstyle.org/demo-web.php Bu çerçeve, "HTML etiketlerinin yeterli olması gerektiği" fikrine dayanmaktadır. Bir web çerçevesi de dahil olmak üzere bir yazılım bileşenini seçmek için en önemli faktörün yeniden kullanılabilirlik olduğunu düşünüyorum. Web çerçevesi geliştiricileri için, standartları ne kadar çok taahhüt ederseniz, yeniden kullanılabilirliği o kadar çok garanti edersiniz.