Kiedy powinienem używać frameworka CSS?


11

Jakie są najlepsze praktyki korzystania z frameworka CSS? Kiedy lepiej „rzucić własny” CSS od zera, niż używać frameworków?

Odpowiedzi:


11

Frameworki CSS są nieco trudne, ponieważ tak naprawdę nie są dla mnie frameworkami. Są to po prostu predefiniowane klasy. Ale to nie twoje pytanie.

Frameworki CSS świetnie nadają się do makiet i ramek. Nie polecałbym używania ich na aktywnej stronie, ponieważ dodają bez znaczenia klasy do twojego znacznika. „.span3” nie mówi mi nic o treści, tylko projekt.

Jednak plan ma kilka fajnych narzędzi, które pomogą ci połączyć klasy frameworkowe i semantyczne po zakończeniu.

Zawsze wykonuję własny CSS.


4
W tej sprawie jestem z Thorn007. CSS jest naprawdę cholernie prosty, jeśli się do tego zabierzesz. Wystarczy użyć dobrego resetu CSS i rzucić własne.
jessegavin

3

Po prostu ich unikaj, są po prostu denerwujące.

Zwłaszcza ten.

* { margin:0; padding:0; }

Moją największą skargą jest to, że jeśli odziedziczysz / utrzymujesz witrynę, która używa resetowania i / lub frameworka, musisz nauczyć się tego frameworka, zanim będziesz mógł zmodyfikować witrynę.

Po dodaniu znacznika h1 oczekuję pewnych rzeczy. Większość resetów usuwa wszystkie dopełnienia, marginesy, bloki itp., Dzięki czemu znacznik h1 nie działa już tak, jak powinien. Muszę więc wrócić i dodać wszystko, co tam było.

Ogólnie (z mojego doświadczenia) ludzie, którzy nie rozumieją css, którzy używają resetów i ram, i powoduje to więcej pracy dla ludzi, którzy to robią.


1
Eric Meyer i programiści Yahoo rozumieją CSS i używają resetów CSS. Z mojego doświadczenia wynika, że ​​oszczędzają dużo czasu i bólu głowy, próbując osiągnąć spójność w różnych przeglądarkach. - Szkielety CSS są jednak kiepskie.
jessegavin

Kiedy dodam tag h1, spodziewam się pewnych rzeczy .. niestety musisz spodziewać się różnych rzeczy z każdej przeglądarki .. i stąd potrzeba resetu css ( nie frameworka )
Gabriele Petrioli

h1 jest dość złym przykładem, ponieważ przeglądarki zwykle używają różnych marginesów i tak dalej. Osobiście wolę „zestaw” do zresetowania - tzn. Zamiast resetowania wszystkiego do 0, po prostu ustaw go w swoim własnym arkuszu stylów!
DisgruntledGoat

* {margin:0; padding:0;}jest najważniejszym resetem CSS ze wszystkich. Usuwa margin-top/maring-bottompod wszystkimi tagami nawet ptagi, więc po tym, jak nie zobaczysz dużej przestrzeni między każdą linią. Nawet ta strona prawdopodobnie używa, w p {margin:0;}przeciwnym razie przeglądarka mieszkałaby ogromną przestrzeń między każdą linią. Zastanawiam się, jak możesz powiedzieć, że są denerwujące.
Marco Demaio,

2

Moim zdaniem jedyna usługa zapewniana przez CSS Framework jest punktem wyjścia dla tych, którzy nie są zbyt dobrze zaznajomieni z CSS.


2

Polecam również użycie reset.css od Erica Meyera, ale myślę, że „frameworki” CSS mogą być korzystne dla układu. Blueprint, YUI grid i 960-grid mogą pomóc w osiągnięciu bardzo skomplikowanych układów bez samodzielnego pisania css.

Chociaż wspomniano wady, to samo można powiedzieć o budowaniu strony internetowej poza CMS zamiast na przykład niestandardowego kodu, ale mogą one być przydatne i dla wielu witryn uzyskane korzyści przeważają nad wszelkimi dodatkowymi problemami z css lub wydajnością.


1

Jeśli faktycznie wdrażasz własny projekt, napiszesz własny CSS (chyba że ktoś inny napisał dokładnie taki projekt, jaki chcesz).

Zakładając, że piszesz własny CSS, „frameworki” mogą być przydatne, gdy masz style, które są:

  1. używane w więcej niż jednym miejscu; i
  2. na tyle skomplikowane, aby włamać się do własnych klas

W przypadku naprawdę prostych stylów lepiej jest użyć klas, aby wskazać, czym coś jest (np. class="navigation"), A następnie zdefiniować jego wygląd, stosując reguły stylów do tej klasy w arkuszu stylów.

Ale w przypadku bardziej złożonych stylów, które niekoniecznie są powiązane z żadnym elementem (np. Style związane z układem, takie, jakie dają nazwy ram .span3), nie ma nic złego w umieszczeniu ich w klasie i zastosowaniu tej klasy w CSS. Możesz zastosować oba podejścia razem.

W większych, bardziej złożonych witrynach, w których elementy mogą być łączone w nieprzewidywalny sposób, podejście oparte na strukturze może naprawdę pomóc w zarządzaniu kodem.

Powiedziałbym, że równie dobrze możesz napisać własną „strukturę”. W cytatach umieszczam „framework”, ponieważ CSS nie jest tak dużym językiem. Możesz przeczytać CSS: The Definitive Guide (Eric Meyer) w ciągu jednego dnia, a następnie przeczytać cały kod np. Blueprint („framework” CSS) i prawie zrozumieć, co się dzieje. Być może trzeba trochę zbadać obejścia IE, ale mówimy tu o co najmniej o rząd wielkości mniej złożoności niż np. JQuery tutaj.


1

Używam blueprint, do CSS.
CSS jest, jak wszyscy powyżej mówią, bardzo prosty.

Jednak w rzeczywistości musisz wziąć pod uwagę platformę.

W przypadku CSS silnik renderujący zwiększa złożoność.

Gecko vs WebKit vs Presto vs Trident ... kto chce robić te wszystkie rzeczy?

To, co daje ci tutaj „framework”, to możliwość pisania układów, które najprawdopodobniej będą działały na wszystkich przeglądarkach, więc nie będziesz musiał googlować w trybie „WTF-am-I-doing = -this-crap” IE 7 quirksmode naprawić lub coś podobnie śmiesznego.

Szkielety wykonają 90% pożądanego układu, a następnie zawsze możesz dodać własne style później.

Tak więc, aby odpowiedzieć na pytanie, powiedziałbym, że wybierz dowolny szkielet i sprawdź, czy to działa dla ciebie. Po prostu może. Jesteś złoty i możesz wrócić do wszystkiego, co naprawdę chciałeś zrobić. Jeśli nie, rozszerz go, używając css i zmień to, co nie działało. W ten sposób możesz zachować korzyści dla różnych przeglądarek, ale nadal możesz je dostosowywać.

Niewielką korzyścią jest to, że jeśli wybierzesz jedną z nich i będziesz z niej korzystać cały czas, a następnie zachorujesz, awansujesz i będziesz musiał szkolić swojego następcę, możesz powiedzieć:

„Tak, użyłem frameworka ABC. Dokumenty są tutaj. Kod jest. Szkolenie zakończone. Powodzenia.”


0

Kiedy rozwiąże wszystkie Twoje potrzeby . (Jest to oparte na idei krawiectwa ).

Z jedynej książki na temat ram? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (Łączenie tylko dlatego, że jest bezpłatne i istotne tutaj.)


Najlepszym rozwiązaniem może być wycięcie i wklejenie odpowiednich części strony, do której prowadzi link. W przeciwnym razie jest to rodzaj światła. Odradza się tylko odpowiedzi na linki, ponieważ linki często się psują z czasem. Czy możesz zaktualizować tę odpowiedź, aby pomóc OP i przyszłym użytkownikom w czymś, w co mogą zatopić zęby? Z góry dziękuję!
closetnoc
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.