A CSS framework megoldások árnyoldalai

Címkék: , , , , , ,

a-css-framework-megoldasok-arnyoldalai

Avagy a gyors webfejlesztés hátulütői

Ebből a cikkemből választ kapsz a következő kérdésekre:

  • Mik azok a CSS keretrendszerek (frameworks) és mire jók?
  • Mi a Bootstrap, Foundation, UIkit és Bulma?
  • Miért szeretik a fejlesztők használni?
  • Miért nem biztos, hogy neked is használni kell ilyen keretrendszereket?

Ha már egy ideje bekerültél a webfejlesztés világba, akkor biztosan hallottál a CSS frameworkökről, ha pedig még nem hallottál, akkor éppen itt az ideje! 🙂

Mik azok a CSS keretrendszerek (frameworks) és mire jók? Miért szeretik az emberek használni ezeket?

Mielőtt ezt megválaszolnám lépjünk egyet vissza! Képzeld el, hogy a HTML egy szerkezet, a CSS pedig egy réteg. Ez a réteg adja a stílust és design-t a szerkezetnek. A CSS a jelenlegi (modern) webfejlesztésnek egy hangsúlyos eleme, ami meghatározza a HTML elemek stílusát, elrendezését. Ezeknek a stílusoknak és elrendezéseknek vannak előregyártott megoldásai, amiket ezek a keretrendszerek kínálnak. Napjainkban már szinte mindenki használja ezek. Miért?

Röviden: egyszerű a használatuk és megkönnyítik a munkát, hiszen előre kialakított (használatra kész) frontend komponenseket kínálnak, amelyeket összepakolva egyszerűen lehet építeni egy reszponzív webinterfészt. Továbbá rugalmasak és a könnyű használat mellett rengeteg dokumentáció van hozzájuk, ha valahol elakadna a fejlesztés során a felhasználó.

Mi a Bootstrap, Foundation, UIkit és Bulma?

A Bootstrapről már tuti hallottál, de rengeteg más keretrendszer is létezik. A fejlesztők és a tervezők is megtalálhatják a számunkra legszimpatikusabb szoftvert. Természetesen a különböző keretrendszerek különböző rugalmasságot engednek és funkcióikban is valamelyest eltérnek egymástól. A Bootstrap, a Foundation, a UIkit és a Bulma a legismertebb keretrendszerek közé tartozik. Nézzük át röviden ezeket a szoftvereket:

Bootstrap

Közkedvelt, nyílt forráskódú eszközkészlet, amellyel gyorsan lehet design és reszponzív (mobil) weboldalakat létrehozni. A Bootstrap előnyei között van, hogy Saas-változókkal is lehet benne dolgozni, továbbá kiterjedt előre megírt komponensei, illetve JavaScript pluginjai vannak.

Foundation

Ez a szoftver nem mást állít magáról, minthogy a legfejlettebb reszponzív frontend keretrendszer a világon: bármilyen eszközhöz, médiumhoz és kisegítő lehetőséghez.

UIkit

Könnyű és moduláris frontend keretrendszer gyors és hatékony webes felületek fejlesztéséhez.

Bulma

Ez egy ingyenes, nyílt forráskódú keretrendszer, amely használatra kész frontend összetevőket biztosít, amelyeket könnyen kombinálhatunk, hogy reszponzív webes felületeket hozzunk létre. Sőt! Weboldalukon külön felhívják a figyelmet arra, hogy használatához nem szükséges CSS tudás. (Erre hamarosan visszatérünk…!)

Ahogy már írtam sok framework van, én most itt csak ezt a négyet emeltem ki, hiszen tulajdonképpen a legtöbb ugyanazt kínálja, tudásukban általában csak kis eltérés figyelhető meg. De, hogy még néhányat megemlítsek: Semantic UI, Materialize, Base, Material UI, vagy Pure.

Teljesen jogosan merül fel a kérdés, hogy ha ennyire szuperek, akkor miért ne használjuk ezeket?

Nyilván lebeszélni senkit sem akarok, hogy használja ezeket a szoftvereket, mivel meg van a maguk haszna. Jó néhány projekthez praktikusak, illetve sok álláshirdetésben is elvárás ezek ismerete. Tehát abszolút nem hátrány, ha valamennyire képben vagy ezekkel.

Ám az én meglátásomban ezek a gyorsítók olyanok, mint a zacskós leves. Lehet, hogy jó lesz és tényleg percek alatt “megfőzzük” az ételt, de tényleg ilyeneken akarsz élni? Ugyanúgy, ahogy a zacskós leves mögött sincs valódi konyhai ismeret, az előre elkészített modulokat kínáló framework megoldások használatával se tanulod meg valójában a CSS nyelvet.

Hogy egy másik hasonlattal éljek: ugyanazért nem érdemes ezekkel a rendszerekkel kezdeni a tanulást, amiért anno nem engedték az iskolában, hogy számológépet használj matek órán. A tanár célja akkor az volt, hogy megtanuld a számolás alapjait. A Bootstrap és más hasonló rendszerek a webfejlesztés “számológépei”. Nagyon hasznosak, ha gyorsan létre kell hozni egy slidert, vagy gombot, de ha nem tudod magadtól is megcsinálni ezeket, akkor az olyan, mintha anélkül használnád a számológépet, hogy egyáltalán tudnád mi az összeadás és kivonás…

Vagyis, ha Te még nem tudod például, hogy mi a különbség a block, vagy a inline típusú elemek között, vagy mi az a box-modell, akkor nem érdemes egyből Bootstrapet használni. Sajátítsd el először a sitebuild alapjait, a HTML és a CSS nyelveket átfogóan.

Továbbá több esetben ezek használata egyszerűen nem előnyös, vagy fölösleges, mert…

  1. akár már pár tíz kilobájtból lehet olyan keretrendszert készíteni, ami egyszerű, jóval kevesebb kompromisszummal és munkával fog járni, ráadásul könnyebben karbantartható és újrafelhasználható. könnyen hozzá lehet igazítani az adott cég/weboldal designjához. Ezt egyébként meg is tanítom a HTML, CSS tanfolyamon!
  1. túl sok alkotórésze és segédprogramja van. Szinte biztos, hogy a felét sem fogod használni soha.
  2. a testre szabása nem mindig olyan egyszerű, mint azt ígérik, mivel sok esetben néhány alkotórészéhez !important felülbírálást kell alkalmazni, ami nem egy ideális CSS megoldás.
  3. nem ad “igazi” reszponzivitást. A Bootstrap például csak telefonra, tabletre és asztali gépre optimalizál. Ehelyett a tartalomra alapozva kellene tervezni a webhelyet, hogy biztosítsuk annak használhatóságát, függetlenül attól, hogy milyen eszközről van szó.

A fenti ellenérvek nem azt jelentik, hogy én teljesen a Bootstrap és társai ellen volnék. Tudom, hogy nem könnyű a saját stíluslapodat megcsinálni a nulláról, mivel órákba, vagy akár napokba is telhet. De a befektetett munka meg fogja hozni a gyümölcsét! A Bootstrapben nincsenek meg a saját elképzelésed szerinti egyedi elemek, amelyek a weboldalakat kiemelkedővé tennék a többi tucat weblap közül. Az egyedi elemek készítése fejleszteni fogja a CSS és HTML-beni jártasságodat, ezzel téve a szakértelmedet még értékesebbé. Tehát azt javaslom, hogy (legalábbis kezdetben) ne használj keretrendszereket, ha a frontendre összpontosítasz, válj inkább a CSS mesterévé, ha igazi, vérbeli webfejlesztő akarsz lenni!



Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.



Akikre büszkék vagyunk

Siker sztorik

Molnár Erika

Molnár Erika

Nekem borzasztó érthető volt, követhető és minden támogatást megkaptam. A facebook csoportban lehet kérdezni, rávezetnek a megoldásra és így nagyon gyorsan lehet fejlődni. Mindenképp ezzel akarok foglalkozni. Leginkábban abban szeretnék fejlődni, hogy egyedi sablonokat építsek, mert nagyon sok olyan felhasználó van, aki előre készített komponensekből akarja összerakatni a weboldalát, de én jobbat szeretnék, főleg így, hogy beleláttam a HTML és a sablonkészítés rejtelmeibe.

Elolvasom >>>

Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

A programozás alapjai

Ingyenes leckesorozat!

Ahhoz, hogy később kód szinten is meg tudj valósítani összetettebb frontend igényeket, tisztában kell lenned a programozás alapfogalmaival. Ebben a leckesorozatban bevezetlek a programozás alapismereteibe teljesen programfüggetlenül.

Megismerkedhetsz az algoritmusokkal, ciklusokkal, logikai műveletekkel és adattípusokkal, emellett gyakorlati feladatokat is kapsz minden témakörhöz. Mindezt egy kényelmes online oktatófelületen.

Regisztrálj és kezdd el még ma!

szám, kisbetű, nagybetű, legalább 8 karakter

Elolvastam és elfogadom az Adatvédelmi Nyilatkozatot

A programozás alapjai

Kövesd közösségi csatornáinkat is!