Minden weboldal használ CSS-t, sokszor mégsem tekintik modern webes fejlesztési eszköznek. Nem titok, hogy CSS -t írni bárki tud, mégis ez azt eredményezheti, hogy nem mindig a hozzáértő ember nyúl hozzá. Ha nem a megfelelő ember foglalkozik a CSS -sel akkor gyakran csúnya CSS -hackek és idegesítő hibák jelenhetnek meg a kódban, ami feleslegesen bosszantja és akadályozhatja a fejlesztő további munkáját. Mit csinál a profi CSS fejlesztő és miért van szükség rá?

HTML kód készítése CSS fejlesztő -ként

A Cascading Style Sheets azaz a CSS egy stílusleíró nyelv, amely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. A CSS -t nem tudjuk önmagában használni, hisz az a HTML oldal része, ezért ha valaki profi CSS fejlesztő szeretne lenni, annak profi HTML kódot is kell tudni készítenie. A profi, jól struktúrált HTML kód azért is elkerülhetetlen, hisz ezzel találkozik először a felhasználó. A profi HTML kód írásához mindig szem előtt kell tartani a komponensek felépítését és azt, hogy ezek egy egész részei. Fontos, hogy újrahasznosítható, egyszerű, letisztult HTML kód kerüljön ki a CSS fejlesztő kezéből, ami újra hasznosítható és később könnyű belőle építkezni.

A “build” az a folyamat ami során a CSS fejlesztő a HTML kódot a PSD, Sketch, Figma file -ok segítségével állítja elő. A CSS fejlesztőnek szorosan együtt kell működnie a designerekkel. Mivel nem minden designer használja ugyanazt az eszközt, így CSS fejlesztő -nek a Sketch, Photoshop, az InVision vagy a Figma ismerete, elkerülhetetlen, hogy el tudja készíteni az oldal “build” -jét.

JavaScript az interaktivitáshoz

Az oldal bizonyos részeinek interaktívnak kell lenniük. A jó CSS fejlesztőnek ezért gyakran jól kell értenie a JavaScripthez. Nem kell mély JavaScript tudás, de az események és a DOM kezeléséhez szükséges eszközök ismeretére szükség van. A javaScript gyorsan fejlődik, új keretrendszerek, könyvtárak jelennek meg, amik hozzájárulnak a modern interaktív látványos weboldalakhoz. Ezek ismerete és magabiztos használata elkerülhetetlen.

A bűvös CSS kód

A CSS ugyanúgy gyorsan fejlődik mint a JavaScript. A CSS változók, FlexBox, Grid technikák elsajátítása és helyes használata időt igényel. A böngészőfüggetlen CSS kód írása, úgyszintén követelmény, hisz lehet, hogy az oldal jól működik Chrome -ban ha Edge -ben nem jelenik meg jól. A CSS előállításához időnként feladatkezelőket vagy csomagolókat is kell használni, mint például az npm, grunt, a gulp vagy a webpack. Ezek ismeretére szüksége van egy profi CSS fejlesztőnek.

Figyelembe kell venni a különféle betűkészleteket, tipográfiát, képeket, ikonokat, animációkat, átmeneteket, amelyek a CSS fejlesztő számára a mindennapi feladatok részét képezik. Minden területnek meg van a sajátossága, korláta, problémája. Minél több funkciót és technikát ismer a CSS fejlesztő, annál könnyebb a komponensek megvalósítása. A CSS kód írása során, rengeteg tulajdonság és beállítási paraméter létezik. Mindet nem is lehet megtanulni. Szerencsére sok jó IDE létezik, ami segít a CSS fejlesztőnek, kiegészíti a tulajdonságok neveit, segít a paraméterek kiválasztásánál.

Kódolási szabványok

CSS fejlesztőnek képesnek kell lennie, hogy alkalmazkodjon a kódolási szabványokhoz amit az aktuális projekt támaszt, hisz így lesz karbantartható a kód amit ír. A profi CSS fejlesztő előre megállapodik a behúzások mértékében, figyel ha ‘rem’ mértékegységet kíván a projekt akkor nem pixelben adja meg a mértékeket. Minden nagyobb CSS frameworknek van saját kódolási szabványa amihez a CSS fejlesztőnek tudnia kell alkalmazkodnia ha a framework -öt használja. A CSS fejlesztőnek úgyszintén törekednie kell, hogy megtalálja a feladathoz a legmegfelelőbb eszközt, ezért a CSS framework kiválasztása fontos feladat egy projekt indulásánál.

CSS framework -ök 2019 -ben

  • Bulma A Bulma egyik előnye, hogy tiszta CSS kód, nincs hozzá JavaScript
  • Tailwind CSS Utility-First CSS keretrendszer a gyors felhasználói felület fejlesztéséhez.
  • Bootstrap4 ez webfejlesztők körében gyakran használt keretrendszer
  • Semantic UI beszédes osztályneveket használ, ez könnyebbé teszi a HTML írását, különösen az újabb fejlesztők számára.
  • Zurb Foundation a legtöbb funkciót tartalmazza, ZURB által fejlesztett és karban tartott keretrendszer
  • Materialize CSS a Google Material Design alapjaira épül ami a legnépszerűbb tervezési elv ma

Mit csinál a CSS fejlesztő?

A fenti leirás alapján a CSS fejlesztő az alábbi dolgokat csinálja:

  • Gondoskodik arról, hogy minden projekttag megfeleljen a kódolási szabványnak
  • Implementálja a design -t
  • Szervezi a kódot
  • Írja a kódot
  • Javítja a kódolási hibákat
  • Ismeri az új technikákat
  • Javítja a kódot

Technológiai vezetők többsége egyetért abban, hogy a CSS fejlesztő, egy teljes értékű szerepkör, ami nem követeli meg a modern JavaScript -es keretrendszerek ismereteit. Bár segítség ha a CSS fejlesztő nem csak a CSS -hez ért, de a szerepkörnek léteznie kell, és azt a JavaScript -alapú szerepekkel egyenértékűnek kell elfogadni.

Érdemes profi CSS fejlesztő kezébe adni a CSS fejlesztést, hisz az oldal működése, böngésző független kinézete fontos, a felhasználók szempontjából.

Humli Miklós

Szerző Humli Miklós

Régóta dolgozom együtt kis-, közép- és nagyvállalalatokkal az arculattól a nyomtatott anyagokon keresztül az online megjelenésig. Az elmúlt évtizedekben UI, UX designerként, webfejlesztőként és mobil fejlesztőként használt keretrendszerek, szoftverek és technológiák alkalmazása során értettem meg, hogy hatékonyan működni csakis úgy lehet, hogyha megtalájuk a feladathoz a legmegfelelőbb eszközt.

További bejegyzések: Humli Miklós