Jaki jest najlepszy framework CSS i czy są warte wysiłku?

Czytając na innym forum, natknąłem się na świat frameworków CSS. Ten, na który szczególnie patrzyłem, to BluePrint . Zastanawiałem się, czy ktoś jeszcze natknął się na frameworki CSS, zasugerować, który jest najlepszy i czy są warte wysiłku?

„Frameworki” CSS zupełnie nie mają sensu.

CSS nie jest podobny do JavaScript, w którym można dołączyć podstawową bibliotekę / strukturę, a następnie wywoływać z niej funkcje i obiekty, aby wykonywać prace wyższego poziomu. Wszystko, co może dać framework CSS, to reguły deklaratywne: niektóre domyślne rzeczy do resetowania reguł przeglądarki, niektóre style klas, do których należy wymusić autoryzację strony, oraz reguły układu za pomocą 'float' i 'clear'. Możesz napisać to samodzielnie w kilku linijkach CSS, zamiast wykorzystywać setki ramowych reguł.

W szczególności kwestia „układu siatki” sięga starych, złych czasów mieszania prezentacji ze znacznikami. 'div class = "span-24"' nie jest lepsze niż tabela, będziesz musiał tam wrócić i zmienić znaczniki, aby wpłynąć na układ. Wszystkie ramy, które widziałem, opierają się na pływających polach o stałej liczbie pikseli, co uniemożliwia stworzenie płynnego układu dostępnego w szerokiej gamie rozmiarów okien.

Jest to tworzenie wsteczne, przydatne tylko dla kogoś, kto zbyt boi się napisać regułę CSS.

Więc nikt jeszcze nie odpowiedział na to pytanie (chociaż widziałem kilka głosów za), więc Spróbuję przynajmniej zająć się drugim pytaniem w tym monicie.

Struktury CSS są świetne; podobnie jak inne frameworki, skracają czas programowania i umożliwiają natychmiastową pracę nad projektem specyficznym dla witryny i CSS. Myślą o trudnych decyzjach, więc nie musisz.

Niestety korzystanie z frameworka ma dwie wady (ogólnie):

1. Ramy dyktują ogólną strukturę i mechanikę Twojego kodu CSS. Nie mówię teraz o resecie CSS (te są przydatne same w sobie, ale nie są to prawdziwe frameworki); Mówię o frameworku od uczciwego do dobrego, który już podjął decyzje o tym, jakich znaczników semantycznych będziesz używać w swoim dokumencie, itp. W związku z tym jesteś uzależniony od frameworka i kiedy pojawi się błąd w ramach, najczęściej będziesz musiał to naprawić samodzielnie.

2. Frameworki nie są wymówką dla bycia nieświadomym problemów z różnymi przeglądarkami / zaawansowanymi CSS. Niezmiennie je napotkasz, tak jak przy pracy z frameworkiem PHP lub JavaScript. I musisz wiedzieć, jak sobie z nimi radzić. Istnieje powszechne powiedzenie, że powinieneś najpierw napisać własny framework, zanim użyjesz czyjegoś frameworka.

Rzucając okiem na Blueprint, tak naprawdę nie nazwałbym tego ramą; może reset z kilkoma dodatkowymi gadżetami na wierzchu.

Spojrzałem na BluePrint i kilka innych, a jedyny framework CSS, który poleciłbym, to YUI Grids

Plusy:

• Napisane przez jednego z najlepszych inżynierów frontendu (IMO) (Nate Koechley)
• Bardzo mały. 4KB
• Bardzo elastyczny (1000 różnych układów)
• Obsługuje układy o płynnej szerokości (100%), a także wstępnie ustawione układy o stałej szerokości w 750 piks., 950 piks. I 974 piks. Oraz możliwość łatwego dostosowania do dowolnej liczby.
• Obsługuje łatwe dostosowywanie szerokości dla układów o stałej szerokości.
• Kolumny szablonów są niezależne od kolejności źródła, więc możesz umieścić najważniejsze treści na pierwszym miejscu w warstwie znaczników, aby poprawić dostępność i optymalizację wyszukiwarek (SEO).
• Samoczyszcząca się stopka. Bez względu na to, która kolumna jest dłuższa, stopka pozostaje na dole.
• Układy mniejsze niż 100% są automatycznie wyśrodkowane.
• Nieco semantyczne nazwy klas (lepsze niż górne, lewe, prawe itp.)

Cons:

• Wiele dodatkowych znaczników w porównaniu z ręcznie napisanymi kodami HTML i CSS
• Wymaga trochę nauki, aby dowiedzieć się, jak tworzyć złożone układy

Jak napisali inni, nie ma prawdziwych „ram” dla CSS. Resetowanie arkuszy stylów również bardzo pomaga w układzie. Zwykle trzymam się resetowania arkusza stylów i stamtąd. Ale jeśli nie masz dużego doświadczenia w CSS, siatki YUI mogą zaoszczędzić trochę czasu.

Compass to rzeczywista struktura CSS w tym sensie, że zapewnia nie tylko szablony (zarówno YUI, jak i plan), ale także konstrukcje wielokrotnego użytku i deklaracje wyższego poziomu, jednocześnie zapewniając znajomą składnię CSS.

Poświęć trochę czasu na przestudiowanie i zrozumienie (naprawdę zrozum!) Kilku frameworków css, takich jak BluePrint i YUI, oraz resetowania css, takich jak Eric Meyer. Następnie poświęć trochę czasu na stworzenie własnego resetowania i / lub struktury w oparciu o metody pracy i rodzaj tworzonych witryn.

Osobiście używam większości resetów Erica Meyera z niektórymi własnymi klasami i resetami, a także kilkoma pomysłami od BluePrint i YUI.

Niedawno oglądałem prezentację Erica Meyera na temat frameworków CSS, w której zadał pytanie: "więc który z nich jest dla mnie odpowiedni?" Następnie odpowiedział na pytanie, pokazując pusty slajd. Chodziło mu o to, że z pewnością w większości resetów i frameworków są wbudowane przydatne koncepcje, ale ten, który będzie dla Ciebie najlepszy, to ten, który napiszesz dla siebie (jest wart wysiłku).

Dlaczego warto używać „frameworków” CSS?

• Jeśli masz presję czasu.

• Jeśli nie znasz css i nie znasz kogoś, kto może napisać to za Ciebie.

• Jeśli nie jesteś zbyt cenny, jeśli chodzi o standardy itp.

Znam programistów, którzy byli bardzo zadowoleni z używania blueprinta lub 960, ponieważ pozwala im on samodzielnie złożyć układ, bez konieczności zwracania się do programisty front-end. Jest to idealne rozwiązanie dla projektów osobistych lub startupów z ograniczonymi zasobami.

Jeśli masz już przyzwoitą wiedzę na temat CSS, prawdopodobnie masz już przyzwoitą bibliotekę układów, więc najwyraźniej nie potrzebujesz frameworka.

Jeśli jednak jesteś początkującym i po prostu chcesz coś uruchomić, możesz zwrócić się do frameworka, ponieważ znacznie upraszcza podstawowy układ i rozwiązuje również problem z kompatybilnością przeglądarki.

Powiedziawszy to wszystko, wiele frameworków po wyjęciu z pudełka korzysta z okropnych nazw klas itp. Znam niektóre strony internetowe, które przyjęły framework jako punkt wyjścia, a następnie dostosowały go za pomocą własnych tagów klas i identyfikatorów. Ale oczywiście jest też trochę pracy związanej z tym przepisaniem. Korzystanie z czegoś takiego jak kompas, jak wspomniano powyżej, pomaga to obejść.

A więc frameworki CSS - mogą zaoszczędzić czas kosztem semantyki. Mogą również zaszkodzić twojej znajomości CSS, ale to bardziej zależy od tego, ile zainwestujesz w naukę przedmiotu w ogóle. To, czy z nich skorzystasz, zależy od Ciebie.

Musiałbyś zadać sobie pytanie, jak skuteczne są dostępne ramy w rozwiązywaniu twoich problemów. Czy spełniają Twoje wymagania?

Korzystając z frameworka, możesz ustawić pewne zasady lub szczegóły na poziomie pikseli, a resztę czasu poświęcić na implementację i produkcję. To ogromny wzrost produktywności. Jeśli zauważysz, że spędzasz czas na dostosowywaniu rzeczy o kilka pikseli późno w projekcie (mikro zarządzanie projektem), jest to znak, że framework może być przydatny.

Wskazówka nr 17 w The Pragmatic Programmer mówi: „Program blisko domeny problemu”. Korzystanie z warstwy abstrakcji może przybliżyć Cię do rozwiązania rzeczywistych problemów związanych z układem. Na przykład: możesz być w stanie skoncentrować się na poprawie wrażeń użytkownika dzięki dodatkowemu czasowi, zamiast drobnym dostosowywaniem pikseli.

Nie oznacza to, że trzeba poświęcić jakość na rzecz ilości. Chodzi o wydajność.

W ostatnim projekcie stworzyłem własny framework, ponieważ mieliśmy bardzo ograniczone zasoby, a popularne frameworki nie robiły tego, co chciałem. Następnie skonfigurowałem pliki PSD zespołu projektowego, aby były przyciągane do tej samej siatki, którą wdrożyłem.

Framework nie musi być żadną konkretną implementacją CSS. Nie musi to być coś nadętego, które pobrałeś z internetu lub coś wdrażającego przestarzałe pomysły. To tylko technika wykonywania pracy. Nie zdziwiłbym się, gdyby niektórzy programiści mieli już własne frameworki i nawet o tym nie wiedzą. W rzeczywistości, jeśli rozważasz DOM jako zestaw domyślnych elementów, które rozszerzasz za pomocą CSS, to z definicji jest to framework.

Właściwie spędziłem dużą część ostatnich 24 godzin na samodzielnym badaniu tego, heh. Doszedłem do wniosku, że fajny reset (użyłem YUI Reset ) i może coś innego do ustawienia podstawowych rzeczy ( czcionki YUI były warte zachodu w moim przypadku; może "dodatkowe gadżety" BluePrint byłyby w twoim) to dobry pomysł. Ale „framework” - który jest ogólnie czymś w rodzaju siatek YUI - jest zbyt restrykcyjny, zmuszając cię do używania ich nazw klas, identyfikatorów itp. I rzadko pasuje do twojej witryny, tak jak zrobiłby to ręcznie robiony CSS.

Krótko mówiąc: resetowanie wydaje się całkiem niezłe; dobrze jest wyeliminować wszelkie różnice, np. marginesy a dopełnienie list, odstępy między akapitami, czy cokolwiek innego. Ale to tak daleko, jak ja bym to zrobił.

nie używałem go tak, ale myślę, że emastic może być dobrą alternatywą, którą warto sprawdzić. jest podobny do blueprint w zakresie, ale obsługuje również elastyczne układy (stąd nazwa) i możesz określać wartości w px, em lub%, a nawet je mieszać.

Myślę, że kompas jest niesamowity. Upewnij się, że widzisz zrzut ekranu .

Używam 960.gs dla kilku stron internetowych i uważam, że jest to bardzo proste i łatwe oraz warte wysiłku. Oszczędza mi dużo pracy nad układem. Upewnij się, że sprawdziłeś niestandardowy generator CSS, który znika ze stałą szerokością 960 pikseli.

Myślę, że ta prezentacja wideo autorstwa CEO Site Point, Kevina Yanka, odpowie na twoje pytanie. Naprawdę polecam to obejrzeć.

Compass umożliwia zmianę nazw klas i identyfikatorów frameworka na własne nazwy semantyczne, więc warto to sprawdzić. Zapewnia również dostęp do rzeczy, których po prostu nie dostajesz za pomocą zwykłego wanilii CSS, takich jak mieszanki.

Jestem zdumiony tak zwanymi „ekspertami CSS”, którzy krytykują te narzędzia, nie zaglądając do nich i nie używając ich. Czy są niezbędne? Nie. Jeśli podoba Ci się własny framework (masz własny, prawda? Framework CSS to tylko starannie zdefiniowana biblioteka - każdy powinien z niego korzystać), to jak najbardziej go używaj. Nikt cię nie zmusza do używania innych frameworków i nie widzę ludzi, którzy używają frameworków, którzy mówią purystom CSS, że „robią to źle”.

Krytyka frameworków z takiego punktu widzenia ujawnia zarówno niepewność, jak i ignorancję. Na przykład pomysł jest śmieszny, że ktoś użyłby narzędzia takiego jak Compass, nie znając CSS. Zdajesz sobie sprawę, prawda, że ​​framework generalnie nie pisze dla Ciebie całego CSS? Nadal możesz wyrwać się i napisać własny CSS w kontekście większości frameworków. W rzeczywistości, jeśli nie znasz CSS, możesz szybko się sfrustrować.

Osobiście cenię sobie posiadanie frameworka, ponieważ jest już udokumentowany, przetestowany przez setki innych użytkowników i mogę zastosować własne klasy i identyfikatory za pośrednictwem Compass. Jeśli potrzebuję czegoś, do czego framework nie jest odpowiedni, zakoduję własne.

Matt Raible z AppFuse brał udział w konkursie CSS Framework jakiś czas temu, aby opracować ramy CSS dla AppFuse. Wyniki są publikowane tutaj . Istnieje kilka odmian i sam użyłem ich, ponieważ używam AppFuse i uważam je za bardzo dobre.

Powinienem dodać, że te ramy CSS działają dobrze, ponieważ są używane w aplikacjach tematycznych. Oznacza to, że jeśli będziesz trzymać się reguł, przełączanie się z jednej na drugą jest tak proste, jak zmiana jednej wartości w pliku właściwości.

Użyłem BluePrint z dużym powodzeniem na stronie (mógłbym wspomnieć o witrynie tutaj, ale jestem pewien, że post zostałby oznaczony jako spam!). Nie jestem jednak pewien, czy będę go używać w przyszłości, ponieważ jednym z pomysłów CSS, o którym myślałem, było to, aby logika układu nie była zakodowana na stałe. Nie powinieneś mieć elementów css o nazwach span-24 i span-12, aby zdefiniować układ, ale coś takiego jak searchBox i mainContent. Przynajmniej tak to widzę.

Dobry link, który znalazłem: 12 najlepszych ram CSS i jak je zrozumieć

Oto mój wpis na blogu dotyczący ram CSS. Kiedy używać frameworka CSS?

Jedynym sposobem, w jaki wiem, aby używać frameworka CSS i zachować znaczniki semantyczne, jest użycie abstrakcji wyższego poziomu. W tej chwili Compass jest jedynym, o którym wiem, że jest wystarczająco dojrzały, aby go używać, ale Nicole Sullivan wydaje się robić kilka interesujących rzeczy w swoim projekcie „Object-Oriented CSS”.

Uważam, że sprytne wykorzystanie miksów Sass przez Compass jest genialne i stanowi duży krok w kierunku Świętego Graala w postaci łatwego do utrzymania znacznika semantycznego. Myślę, że nie chciałbym używać frameworka takiego jak Blueprint lub YUI bez abstrakcji, takiej jak Compass, aby zachować klasy prezentacji poza znacznikami.

Przy okazji, istnieje ładnie wyglądający framework CSS o nazwie Elastic, który wygląda na tyle dobrze, że rozważam dodanie go do Compassa.

Uważam, że CSS to prostota. Celem jest posiadanie jednego lub dwóch miejsc do sprawdzenia, kiedy odwołujesz się między HTML a arkuszem stylów. Dodanie większej liczby wierszy, a zwłaszcza wierszy, których nie napisałeś i prawdopodobnie nie znasz, wykładniczo zwiększy złożoność, a tym samym zmienność kodu CSS.

Sugerowałbym tworzenie układów podczas ich pisania i opracowywanie na ich podstawie ogólnego systemu szablonów. Chociaż uwielbiam uczynić CSS bardziej modułowym, często iw zależności od projektu, Twój CSS może być bardzo specyficzny dla przypadku i wcale nie być modułowy.

Użyłem Blueprint na kilku jednorazowych witrynach i zdecydowanie zaoszczędziłem czas, głównie w testach w różnych przeglądarkach.

Zdecydowanie jest do bani dodawanie kodu prezentacji do znaczników, chociaż z drugiej strony jest to czytelne. Uwielbiam koncepcję „można przeprojektować bez dotykania znaczników”, ale jeśli tworzysz witrynę, w której to i tak naprawdę się nie wydarzy i po prostu potrzebujesz tego zrobić wczoraj, Blueprint jest czymś, na co warto zwrócić uwagę.

Istnieją również kompromisy w zakresie typów układów, które można w praktyce stworzyć. Jeśli utworzysz szkielet witryny od początku na ścisłej siatce, znacznie łatwiej będzie przenieść ją do szkieletu przy minimalnym zamieszaniu.

Użyłem BluePrint i YUI, ale zawsze denerwują mnie niektóre nazwy, które podają swoje identyfikatory i klasy.

Każdemu osobiście, ale wolę robić rzeczy od zera, ale po pewnym czasie opracujesz proces, w którym wykorzystasz swoją poprzednią pracę i zastosujesz ją do nowych projektów i po prostu wprowadzisz kilka poprawek, aby strona wyglądała tak, jak byś to zrobił lubię to.

Upewnij się, że używasz dobrej konwencji nazewnictwa, na wypadek gdyby ktoś inny przyszedł do edycji css, wtedy będzie miał dobry pomysł, do czego odnosi się nazwa każdego stylu.

Craig,

Kompas jest tym, czego szukasz: umożliwia zmianę nazw klas CSS Blueprint, takich jak „span-24”, na własne nazwy. Rozszerza również funkcjonalność CSS o zmienne i miksery. Naprawdę, ci, którzy przedwcześnie oceniają frameworki bez sprawdzania Compass, „nie mają sensu”. To trochę tak, jak ci ludzie, którzy powiedzieli nam lata temu, że omijamy sedno, używając CSS zamiast tabel HTML w naszych układach.

-Matt

sprawdź http://www.ez-css.org/ . jeden z najłatwiejszych i najlżejszych frameworków css do pracy. :)

Spójrz na to demo: http://www.richstyle.org/demo-web.php Ten framework opiera się na założeniu, że „tagi HTML powinny wystarczyć”. Myślę, że ponowne użycie jest najważniejszym czynnikiem przy wyborze komponentu oprogramowania, w tym frameworka internetowego. W przypadku programistów platform internetowych, im bardziej zobowiązujesz się do przestrzegania standardów, tym bardziej gwarantujesz możliwość ponownego użycia.