Miért ne használjunk inline CSS-t?

Írásainkat olyan, az informatika iránt érdeklődőknek szánjuk, akik egyelőre még szinte semmit vagy csak nagyon keveset tudnak az IT, weboldal készítés, internet, hálózatok, programozás, stb. világáról. Az általunk használt szavak, kifejezések és magyarázatok a nem szakmabelieknek szólnak. Cserébe közérthetően szeretnénk bemutatni az informatika különböző területeit és fogalmait.

Egyik korábbi írásunkban igyekeztünk közérthetően elmagyarázni, hogy mi is az a CSS (Cascading Style Sheets), mi a működési elve, miért hasznos és egyúttal izgalmas területe a frontend fejlesztő munkájának. Emlékeztető gyanánt jöjjön egy gyors összefoglaló a lényegről.

A CSS használatával a webfejlesztők olyan, gyakran használatos stíluselemekre vonatkozó információkat - mint pl. betűtípusok, betűméret, szín, háttér, dobozok, keretek stb. - összefoglalnak egy-egy “stíluslapba” (ezt úgy is szokás mondani, hogy CSS “osztályokat” hoznak létre). Az egyes CSS osztályoknak egy-egy egy egyedi, összefoglaló elnevezést adnak, amire ezután már - bármikor, amikor ilyen tulajdonságcsoportra van szükség - csak hivatkozni kell, és a kód adott szakasza máris felveszi az adott classban szereplő tulajdonságokat. Mindez hatékonyabbá, strukturáltabbá teszi a munkát, és nem elhanyagolható további pozitívuma, hogy így nincs felesleges “kódszaporítás”, vagyis az oldal betöltési sebessége jobb így, mintha CSS class-ok használata nélkül mindig mindent egyedileg, helyben formáznánk.

Mi az, hogy "inline CSS"?

Magyarul “sorközi” CSS-nek is szokták nevezni az “inline” angol szót, de mi inkább az eredeti szóhasználatnál maradunk. Az inline CSS is a tartalom megjelenítésének eszköze, de szemben a fent említettekkel itt nem egy bármikor máshol is könnyen behívható “CSS class”-ról ("CSS osztályról”) van szó, hanem egy amolyan “helyben, itt-és-most” megoldásról. Az inline CSS-t “helyben”, egyedi megoldásra lehet használni, amit másutt a projektben (feltételezhetően) nem fogunk ismét használni.

Vagyis inline CSS-sel egyedi stílusokat alkalmazunk a weboldal egyes elemeire, ahelyett, hogy egy CSS osztályt használnánk, amelyet többször is felhasználhatunk.

Nézzünk egy példát!

Tegyük fel, hogy a megrendelő kéri, hogy weboldalának X aloldalán szereplő “Az akció visszavonásig érvényes” , illetve Y oldalán szereplő “Erre a termékre garanciát nem vállalunk.” mondatok pirossal, 18 px betűmérettel jelenjenek meg.

Egyik megoldás, hogy inline CSS-t alkalmazunk és csak erre az egy-egy mondatra vonatkozóan (“a sor közben”) adjuk meg a stílusra vonatkozó, csak itt, egyszer használatos utasítást.

<div style="color: red; font-size: 18px;">Az akció visszavonásig érvényes.</div>

<div style="color: red; font-size: 18px;">Erre a termékre garanciát nem vállalunk.</div>

Másik megoldás viszont, ha előre gondolkodunk és helyi megoldások helyett CSS class-t hozunk létre az adott formázási elemekkel (pl. ‘Red warning’ elnevezéssel), és így oldjuk meg ezt a kérést. Miért jobb ezen utóbbi módszer?

• Bár most egyedi kérésnek tűnik, de feltételezhető, hogy máskor szükség lesz ilyen jellegű kiemelésekre, és sokkal egyszerűbb és gyorsabb lesz CSS classra hivatkozni, és nem soronként formázgatni majd.
• Ha a megrendelő az eredményt látva szeretne módosítani, pl. betűméretet növelni ezen figyelmeztető szövegeknél, egyszerűbb, ha ezt egyszer kell megtenni és ezáltal automatikusan megnő a betűméret minden ilyen feliratban, mintha egyesével kéne megkeresni a szöveg szakaszokat és ott a módosítani mindent egyesével.

Mi szól az inline CSS használata ellen?

Általánosságban elmondható, hogy bár az inline CSS-nek is megvan (esetleg…) a maga létjogosultsága, ha valóban egyedi megoldás kell adott ponton, de a mindennapi gyakorlatban nem tekinthető a legjobb módszernek.

Íme néhány ok, amiért általában nem ajánlott az inline CSS használata:

1. Kódduplikáció: Ha ugyanazt a stílust kell alkalmazni az oldal több elemére, az inline CSS használatával ugyanazt a kódot többször kell létrehozni, megírni. Ez nagyobbá és nehezebben karbantarthatóvá teszi a kódbázist.
2. Teljesítmény, azaz oldalbetöltés: Ha sok inline CSS-t használunk, az megnöveli a HTML-dokumentum méretét, ami megnövelheti a weboldal betöltési idejét is.
3. Az újrafelhasználhatóság hiánya: Az inline stílusok nem használhatók újra több oldalon keresztül, így minden olyan stílust, amelynek több oldalon keresztül konzisztensnek kell lennie, minden egyes oldalon meg kell duplikálni. Tehát praktikusan nem újrafelhasználhatóak.
4. Adott helyzetre érvényes és stílust felülíró: Az inline stílusok specifikusabbak, mint a CSS classokban definiált stílusok, vagyis “erősebb” utasítások. Ez azt jelenti, hogy felülírják az adott szakaszra vonatkozó, máshol definiált stílusokat. Ez megnehezítheti bizonyos elemek stílusainak későbbi módosítását.

Ha jól átgondolt egy weboldal design-ja mielőtt a fejlesztés kezdetét venné, akkor több mint valószínű, hogy CSS class-okkal mindent meg lehet oldani, és igazából teljesen elkerülhető az inline CSS használata.

Ha eddig eljutottál az olvasásban, akkor biztos, hogy érdekel a téma!
Ide kattintva böngészhetsz további cikkek között, ha pedig képzés érdekel, akkor Junior frontend fejlesztő képzésünk részleteit itt tudod megnézni →