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á?

Profi 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 profi 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 használt keretrendszerek, szoftverek és technológiák alkalmazása során értettem meg, hogy hatékonyan működni csakis úgy lehet, hogyha közösen megtalájuk a feladathoz a legmegfelelőbb eszközt.

További bejegyzések: Humli Miklós