Frameworki CSS - czy warto z nich korzystać?

Frameworki CSS – czy warto z nich korzystać?

Czas czytania: 3 minut

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

Odpowiedz na to pytanie dlaczego tak jest w cale nie już taka prosta. I tak naprawdę zależy od tego kogo się zapyta. Praktycznie bowiem każdy będzie miał na ten temat nieco inne zdanie! Dlaczego tak jest i czym to jest wywołane? Warto jednak tu wspomnieć, że każda ze stron może mieć swoje logiczne powody. O tym jednak trochę później.

Brzmi świetnie, prawda może aż za świetnie?

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

Praktycznie każdy użytkownik internetu ma co chwilę do czniania z jakimiś frameworkiem / biblioteką CSS. Nie chodzi mi tyle o strukturę kodową ile o same strony o nie oparte. Frameworki są obecnie jednymi z najpopularniejszych narzędzi stosowanych do budowy witryn internetowych.

Nazwy takie jak Bootstrap czy Foundation zapewne też nie są specjalnie nikomu 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ć

Nie miej w większości występuje 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. W naszej kwestii z kolei leży jedynie odpowiednie jego wykorzystanie tak by uzyskać pożądany efekt końcowy. Biblioteki CSS to jednak nie tylko sam Grid.

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. Często sam użyty framework (lub biblioteka bo w tym miejscu jak najbardziej to określenie pasuje) zależy też od technologii w jakiej wykonuje się strony. Nie wszystkie mogą być bowiem ze sobą używane. I to się w wielu przypadkach jak najbardziej sprawdza. Dodatkowo taki projekt można później przekazać dowolnej osobie i jeśli zna też tą technologię to może prawie bez problemu np. zaktualizować stronę lub ją rozbudować.

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 wykorzystujemy tylko część gotowej biblioteki. Praktycznie nigdy nie jest potrzebna cała (właściwie to nie słyszałam by komuś była w 90% potrzebna). Bardzo często też trzeba dołożyć całkiem sporo własnego kodu jak i rozwiązań, efektów JS. Ostatecznie więc używa się tylko grida i czasami menu czy przycisków z przeróbkami. 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. Bawienie się w te całe biblioteki. Lepiej samemu coś napisać dopasowanego pod własne potrzeby.

Alternatywy – czyli zrób to sam!

My tu tak naprawdę jednak 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 + np. Flexbox można 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ć.

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.