Frameworki CSS - czy warto z nich korzystać?

Frameworki CSS – czy warto z nich korzystać?

Czas czytania: 5 minut

Głównym zadaniem frameworków CSS jest przyspieszenie i ustandaryzowanie pracy twórców różnego typu stron internetowych. Jednak jak zawsze tak i w tej kwestii zdania są podzielone.

W tym wypadku bowiem warto się zastanowić czy w ogóle warto z nich korzystać. Jeśli tak to na jakich zasadach jakie mają one zalety oraz wady. Jak widać odpowiedz na pytanie zadane w tytule „Frameworki CSS – czy warto z nich korzystać?” w cale nie będzie taka prosta. I co najważniejsze uzyskana odpowiedz może zależeć od tego kogo się zapyta.

Skąd wynika różnica zdań u wykonawców

W tej kwestii każdy może mieć bowiem inne zdanie i co ciekawe może je nawet w konkretny sposób umotywować! Dlaczego tak jest i czym to jest wywołane? Z pewnością wieloma czynnikami takimi jak

  • miejsce pracy
  • posiadana wiedza
  • doświadczenie zawodowe
  • czas na wykonanie projektu
  • wymagania wobec projektu zarówno pracodawcy jak i klienta

Jak widać trochę tych czynników jest i myślę, że znalazły by się osoby, które dodały by nawet kolejne. To jednak nie jest w tym monecie najistotniejsze.

Co to są właściwie te frameworki / biblioteki CSS?

Praktycznie każdy użytkownik Internetu ma co chwilę do czniania z jakimiś frameworkiem / biblioteką CSS – jednak nie zawsze jest tego świadomy. Bo w tej chwili nie mówimy o kodzie witryny, a bardziej o technologii w jakiej została wykonana. Obecnie bowiem wielu twórców decyduje się na gotowe rozwiązania – przynajmniej w miejscach gdzie nie ma potrzeby tworzyć czegoś nowego.

Takie podejście sprzyja Frameworką. I powoduje, że stają się one jednym z najpopularniejszych narzędzi stosowanych do budowy witryn internetowych. I tu nie ważne jest czy korzystamy z systemów CMS czy budujemy stronę od podstaw. Wiele motywów i szablonów do systemów CMS opartych jest bowiem również o gotowe biblioteki CSS.

przykładowe systemy do zarządzania treścią CMS

Jakie elementy są wbudowane w biblioteki?

A więc co to są frameworki CSS? To nic innego jak zbiory gotowych rozwiązań. Ich autor lub autorzy przygotowali je w taki sposób by na ich bazie można było zbudować zróżnicowane strony. W praktyce więc mamy gotowy kod np.:

  • menu strony
  • ustawienia klas CSS dla body, HTML
  • gotowe wyglądy przycisków
  • responsywne tabele
  • taby
  • czasem slider

W większości z nich występuje też tzw. grid (siatka). Z jej pomocą można podzielić stronę na części. Najczęściej dzielimy ją na 12 równej szerokości kolumn. Oczywiście w większości to właśnie struktura Grida narzucona przez autora / autorów umożliwia nam dostosowanie strony do RWD. Jedyne co my musimy zrobić to w umiejętny sposób odwołać się w kodzie HTML do odpowiedniej klasy CSS. Oczywiście gotowa biblioteka praktycznie nigdy nie wystarczy do zbudowania strony, jest ona jednak traktowana jako podstawa.

Jakie są najpopularniejsze Biblioteki CSS

Nazwy bibliotek CSS takich jak Bootstrap czy Foundation z pewnością osobą zajmującym się budową stron internetowych nie są obce. Na nich oczywiście świat się nie kończy. Są to bowiem najpopularniejsze frameworki, ale nie jedyne. Inne popularne to:

  • Bulma
  • Purecss
  • Materialize
frameworki CSS, popularne biblioteki czy ich używać

Dlaczego ludzie lubią frameworki CSS?

Wielu „programistów” szczególnie takich pracujących w małych lub średnich agencjach interaktywnych i marketingowych (chociaż nie tylko) wykorzystuje frameworki w swojej codziennej pracy. W większości przypadków wybór frameworka zależy też od technologii w jakiej wykonuje się strony. Nie wszystkie biblioteki mogą być bowiem zawsze używane.

Ustandaryzowanie we firmach biblioteki ma też zastosowanie bardziej praktyczne, taki projekt można bowiem później przekazać dowolnej osobie. I jeśli zna też tą technologię to może praktycznie bez większego problemu np. zaktualizować stronę lub ją rozbudować o kolejne elementy.

Zalety gotowych bibliotek CSS?

Wśród zalet bibliotek z pewnością warto wymienić:

  • standaryzacje kodu – każdy element ma swoje miejsce i określoną nazwę
  • oszczędność czasu – kod biblioteki jest powtarzalny
  • zestaw gotowych rozwiązań – autorzy biblioteki przygotowali wiele gotowych rozwiązań takich jak:
    • gotowe menu nawigacyjne – wystarczy tylko umieścić w nim nasze podstrony
    • wygląd przycisków
    • oscylację pól np. formularza
  • czytelność kodu – w przyszłości inne osoby mogą szybko edytować stronę
gotowe przyciski z Bootstrap
przyciski z Bootstrap

Wady gotowych bibliotek?

Tak samo jak zalety frameworki posiadają także swoje wady:

  • dużo niepotrzebnego / śmieciowego kodu – biblioteki posiadają wiele rożnych elementów. Elementy te nie będą nam potrzebne we wszystkich projektach. Do tego często to co już się znajduje w bibliotece nie do końca nadaje się do użytku w ostatecznym projekcie. Co prowadzi do sytuacji, że musimy nadpisywać domyśle elementy biblioteki by osiągnąć zamierzony efekt końcowy.
  • waga kodu – a skoro mamy już dużo niepotrzebnego kodu to trzeba pamiętać, że on też ma czasem naprawdę spore rozmiary
  • powtarzalność kodu – to wada jak i zaleta. W tym wypadku jednak chodzi o to, że z punktu widzenia kodu strona będzie mało unikalna.
  • mała skalowalność kodu – nie wszystkie ustawienia obiektów na stronie są możliwe do osiągnięcia np. 5 kolumn w jednym rzędzie w Bootstrap 3+. Trzeba samodzielnie coś takiego zrobić możemy mieć 4 kolumny i od razu 6.

Wydaje mi się, że to są najczęstsze uwagi jakie słyszałam od innych twórców stron internetowych. Być może macie jeszcze jakieś swoje.

Jak to właściwie z nimi jest podczas budowy strony internetowej?

W praktyce zawsze wykorzystujemy jedynie część gotowej biblioteki. Nie spotkałam się ani też nie słyszałam by komuś udało się skorzystać lub była mu potrzebna cała biblioteka. A co ważniejsze to bardzo często też trzeba dołożyć całkiem sporo własnego kodu lub dodać kolejne biblioteki JS lub CSS – by osiągnąć potrzebny efekt.

W większości używa się tylko grida i czasami menu czy przycisków z przeróbkami (nie rzadko ze zmianami w kodzie CSS). Oczywiście to też uzależnione jest od biblioteki oraz efektu jaki chcemy uzyskać.

Dlatego też wielu Front-end Developerów dochodzi do wniosku, że to nie ma sensu. Lepiej samemu coś napisać dopasowanego pod własne potrzeby lub wyciągnąć z biblioteki jedynie interesujący nas fragment kodu.

Alternatywy – czyli zrób to sam! Samodzielna budowa kodu CSS strony!

My tu tak naprawdę jednak rezygnując z frameworka nie pozostajemy sami sobie. W Internecie można znaleźć wiele ciekawych generatorów ciekawych generatorów Gridów (siatek) o które można oprzeć budowaną stronę. Przy ich użyciu oraz np. dodaniu Flexbox można często stworzyć

  • dużo bardziej rozbudowaną witrynę
  • pozbawioną zbędnego kodu – a przez to często szybszą w ładowaniu
  • unikalną.

Budowa takiej strony z pewnością jednak może być bardziej czasochłonna. I nie koniecznie zrozumiała dla osoby, która miała by taką witrynę zaktualizować. Co ciekawe po pewnym czasie my sami możemy się w tym kodzie pogubić.

A więc warto czy nie warto korzystać z frameworków CSS?

Trudno powiedzieć, to w gruncie rzeczy kwestia indywidulanych preferencji. Oraz bardzo często polityki firmy w której aktualnie pracujemy. Czasami bowiem mamy narzuconą technologię w jakiej pracujemy a tym samym i konkretną bibliotekę. A tego już nie przeskoczymy.

%d bloggers like this: