Ne zaman bir CSS çerçevesi kullanmalıyım?


11

Bir CSS çerçevesi kullanmak için en iyi uygulama senaryoları nelerdir? Çerçeveleri kullanmak yerine CSS'inizi "yuvarlamak" ne zaman daha iyidir?

Yanıtlar:


11

CSS çerçeveleri biraz zor çünkü bana göre çerçeveler değil. Bunlar sadece önceden tanımlanmış sınıflardır. Ama bu senin sorunun değil.

CSS çerçeveleri maketler ve tel çerçeveler için mükemmeldir. İşaretlemenize anlamsız sınıflar ekledikleri için bunları canlı bir sitede kullanmanızı önermem. ".span3" bana içerik hakkında hiçbir şey söylemiyor, sadece tasarım.

Bununla birlikte, blueprint, tamamlandıktan sonra çerçeve sınıflarını ve semantik olanlarınızı birleştirmenize yardımcı olan bazı harika araçlara sahiptir.

Her zaman kendi CSS'mi yuvarlarım.


4
Ben bu konuda Thorn007 ile beraberim. CSS, aşağı indiğinizde oldukça basittir. Sadece iyi bir CSS sıfırlaması kullanın ve kendiniz seçin.
jessegavin

3

Sadece onlardan kaçın, can sıkıcı bir şey değildir.

Özellikle bu.

* { margin:0; padding:0; }

En büyük şikayetim, sıfırlama ve / veya bir çerçeve kullanan bir siteyi devralır / sürdürürseniz, siteyi değiştirmeden önce bu çerçeveyi öğrenmeniz gerektiğidir.

Bir h1 etiketi eklediğimde bazı şeyler bekliyorum. Çoğu sıfırlama tüm dolgu, kenar boşluğu, blok vb.'yi alır, böylece bir h1 etiketi artık varsayılan olarak olması gerektiği gibi davranmaz. Bu yüzden geri dönüp orada olan her şeyi eklemek zorundayım.

Genellikle (benim tecrübelerime göre), sıfırlama ve çerçeveleri kullanan css'yi anlamayan insanları ve bunu yapan insanlar için daha fazla çalışmaya neden olur.


1
Eric Meyer ve Yahoo'daki web geliştiricileri CSS'yi anlıyor ve CSS sıfırlamaları kullanıyor. Deneyimlerime göre, tarayıcılar arası tutarlılık sağlamaya çalışırken çok fazla zaman ve baş ağrısı kaydediyorlar. - CSS çerçeveleri gergin.
jessegavin

Bir h1 etiketi eklediğimde belirli şeyler bekliyorum .. ne yazık ki her tarayıcıdan farklı şeyler beklemeniz gerekiyor .. ve bu nedenle, css sıfırlama ihtiyacı ( çerçeveler değil )
Gabriele Petrioli

h1 oldukça kötü bir örnektir, çünkü tarayıcılar farklı kenar boşlukları kullanma eğilimindedir. Şahsen ben sıfırlamak için bir "set" tercih - yani her şeyi sıfırlamak yerine, sadece kendi stil sayfanızda ilk etapta ayarlayın!
DisgruntledGoat

* {margin:0; padding:0;}en önemli CSS sıfırlamasıdır. Her satır arasında büyük bir boşluk görmeyecek şekilde margin-top/maring-bottomtüm etiketleri altında bile etiketleri kaldırır p. Bu web sitesi bile muhtemelen p {margin:0;}aksi takdirde tarayıcı her satır arasında büyük bir alan yaşayacaktı. Onların sinir bozucu olduklarını nasıl söyleyebileceğinizi merak ediyorum.
Marco Demaio

2

Bence bir CSS Çerçevesi'nin sunduğu tek hizmet, CSS'ye aşina olmayanlar için bir başlangıç ​​noktasıdır.


2

Ben de Eric Meyer sıfırlama.css kullanmanızı öneririz, ancak CSS "çerçeveleri" düzeni için yararlı olabilir düşünüyorum. Blueprint, YUI ızgarası ve 960 ızgarası, css'yi kendiniz yazmadan son derece karmaşık bazı düzenler elde etmenize yardımcı olabilir.

Bahsedilen dezavantajlar olsa da, örneğin özel kodu yuvarlamak yerine bir CMS'den bir web sitesi oluşturmak için de aynı şey söylenebilir, ancak yine de yararlı olabilir ve birçok site için elde edilen faydalar herhangi bir yabancı css veya performans sorunlarından daha ağır basar.


1

Aslında kendi tasarımınızı uyguluyorsanız, kendi CSS'nizden bazılarını yazacaksınız (başka biri tam olarak istediğiniz tasarımı yazmamışsa).

Kendi CSS'nizden bazılarını yazdığınızı varsayarsak, “çerçeveler” şu tarzlara sahip olduğunuzda yararlı olabilir:

  1. birden fazla yerde kullanılır; ve
  2. kendi sınıflarına girebilecek kadar karmaşık

Gerçekten basit stiller için, bir şeyin ne olduğunu belirtmek (örneğin class="navigation") için sınıfları kullanmak ve stil sayfanızda o sınıfa stil kuralları uygulayarak görünümünü tanımlamak daha iyidir .

Ancak, herhangi bir öğeye bağlı olmayan daha karmaşık stiller için (örneğin, mizanpaj ile ilgili stiller, çerçevelerin nasıl ad verdiği tür .span3), bunları bir sınıfa yerleştirmek ve CSS'ye o sınıfı uygulamakla ilgili bir sorun yoktur. Her iki yaklaşımı birlikte kullanabilirsiniz.

Öğelerin öngörülemeyen şekillerde birleştirileceği daha büyük, daha karmaşık sitelerde, çerçeve benzeri bir yaklaşım kodunuzu yönetilebilir tutmanıza yardımcı olabilir.

Yine de kendi “çerçevenizi” de yazabileceğinizi söyleyebilirim. “Çerçeve” yi tırnak içine aldım çünkü CSS gerçekten o kadar büyük bir dil değil. Bir gün içinde CSS: The Definitive Guide'ı (Eric Meyer) okuyabilir, ardından Blueprint'teki (CSS “çerçevesi”) tüm kodu okuyabilir ve neler olduğunu neredeyse anlayabilirsiniz. IE geçici çözümlerini biraz araştırmanız gerekebilir, ancak burada en azından örneğin jQuery'den daha az karmaşıklık büyüklüğünden bahsediyoruz.


1

CSS için plan kullanıyorum.
CSS, yukarıdaki herkesin söylediği gibi, gerçekten basittir.

Ancak, gerçekte, platformu düşünmelisiniz.

CSS ile oluşturma motoru karmaşıklığa katkıda bulunur.

Gecko vs WebKit vs Presto vs Trident ... tüm bunları kim yapmak ister?

Burada size bir 'çerçeve' veren şey, büyük olasılıkla tüm tarayıcılarda çalışacak düzenler yazma yeteneğidir, bu nedenle 'WTF-am-I-doing = -this-crap' IE 7 quirksmode için googling yapmak zorunda kalmazsınız ya da benzer şekilde gülünç bir şey.

Çerçeveler istediğiniz düzenin% 90'ını yapar ve daha sonra istediğiniz zaman kendi stillerinizi ekleyebilirsiniz.

Bu nedenle, soruyu cevaplamak için herhangi bir çerçeve seçin ve sizin için işe yarayıp yaramadığını görün derim. Sadece olabilir. O zaman altınsınız ve aslında yapmak istediğiniz her şeye geri dönebilirsiniz. Değilse, css kullanarak uzatın ve çalışmayanı değiştirin. Bu şekilde çapraz tarayıcı avantajını korursunuz, ancak yine de özelleştirebilirsiniz.

Küçük bir fayda olarak, birini seçip sürekli kullanırsanız ve daha sonra hastalanırsanız veya terfi ederseniz ve halefinizi eğitmek zorunda kalırsanız, şunları söyleyebilirsiniz:

"Evet, ABC çerçevesini kullandım. Dokümanlar burada. Kod var. Eğitim bitti. İyi şanslar."


0

Tüm ihtiyaçlarınızı çözdüğünde . (Bu, terzilik fikrine dayanır .)

Çerçeveler hakkındaki tek kitaptan mı? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (Yalnızca bağlantı ücretsiz ve alakalı olduğu için bağlanıyor.)


Bağlandığınız sayfanın ilgili bölümlerini kesip yapıştırabiliyorsanız en iyisi olabilir. Aksi takdirde, cevap olarak, bu bir tür ışıktır. Burada sadece bağlantı cevapları önerilmez, çünkü bağlantılar genellikle zaman içinde kopar. OP ve gelecekteki kullanıcılara dişlerini batırabilecekleri bir şeyle yardımcı olmak için bu cevabı güncelleyebilir misiniz? Şimdiden teşekkürler!
closetnoc
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.