Manapság már inkább követelmény, mint ajánlás, hogy egy magára valamit is adó webdesigner vagy sitebuilder ismerje és aktívan használja a CSS adta lehetőségeket. A neten számos lapon olvasható magyar és egyéb nyelveken a sok-sok CSS tipp és trükk, viszont kevés szó esik általában arról, hogy magukat a CSS fájlokat és tartalmukat hogy érdemes rendszerezni és formázni.
Ez az írás most épp emiatt leginkább 2 témáról fog szólni:
- 1.) hogy lehet magukat a CSS fájlokat rendszerezni, milyen előnyökkel és hátrányokkal járnak az egyes módszerek
- 2.) hogy lehet a CSS fájlok tartalmát rendszerezni, olvashatóbbá és áttekinthetőbbé tenni.
A módszerek egyike sem jelent tökéletes megoldást, de legalább némi áttekintést nyújt a lehetőségekről.
Tartalomjegyzék
/* 1.) CSS fájlok rendszerezése
———————————————— */
Manapság a CSS fájlok mérete jelentősen megnövekedett, köszönhetően annak, hogy nem csak szövegek formázására és linkek színezésére használjuk, illetve egyre nagyobb és összetettebb lapok/portálok látnak napvilágot nap mint nap. Épp ezért ma már egyeltalán nem biztos, hogy érdemes minden CSS formázást 1 db fájlba pakolni, mint ahogy azt régebben tettük.
A legtöbbünknek szerintem (a magam és környezetem példájából kiindulva) van 1 olyan alap CSS fájlja, melyet az általa készített lapoknál felhasznál és amibe pakolja azokat az általános formázásokat, amelyek minden lap esetében megegyeznek (alapértelmezett fonttípusok, body margók, sortávok stb..). A továbbiakban ehhez jönnek hozzá azok a CSS tartalmak, melyek minden egyes honlap esetében mások és mások. Erre az alapértelmezett CSS fájlra a cikk későbbi részében „default.css”-ként fogok hivatkozni.
1.1) Mindent egybe
Az egyik lehetséges megoldás, hogy az alapértelmezett CSS tartalmát tovább bővítjük és hozzáadunk minden szükséges plusz tartalmat. Előnye, hogy a későbbiekben is bármely módosítás esetében csak 1 fájlt kell megnyitni és átnézni, módosítani. Hátránya, hogy nagyobb lapok esetében ez a CSS fájl méretét jelentősen megnövelheti, a sok kódot nehezebb átnézni illetve számos oldal esetében olyan tartalmakat is betöltünk, melyekre nem is lenne szükségünk (pl. egy „kapcsolat” c. oldalba miért kellene a képgalériámhoz tartozó CSS formázást behúznom, nemigaz?).
1.2) Darabolás az oldal típus alapján
Egy másik lehetséges megoldás, hogy a CSS tartalmát a laptípusok alapján daraboljuk fel. Van ugye egy default.css-ünk, melyet minden egyes oldalba be kell húznunk. Magán a honlapon van pl. egy képgalériám, van egy kapcsolati oldal ahol egy form-ot kell megjelenítenem, van egy oldalam ahol a referencialistámat kell kitennem és hasonlók … a lehetőségek száma végtelen. :)
Ilyen esetben megoldást jelenthet az, ha minden egyes fájlba behúzzuk a default.css-t és utána oldalanként csak azt a CSS-t, melyre ténylegesen szükségünk van. Pl.:
kezdőlap: default.css
kapcsolat: default.css + contact.css
képgaléria: default.css + gallery.css
letöltések: default.css + download.css
stb…
A HTML fájlokba több CSS-t az alábbi módon tudunk behúzni:
1 2 3 4 5 6 7 | <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS tutorial</title> <link rel="stylesheet" media="screen" type="text/css" href="css/default.css" /> <link rel="stylesheet" media="screen" type="text/css" href="css/gallery.css" /> <link rel="stylesheet" media="screen" type="text/css" href="css/download.css" /> </head> |
E módszer előnye, hogy a CSS fájlok tartalma jóval kisebb lesz és ezáltal már átláthatóbb, mintha egyben tárolnánk mindent. Előnye az is, hogy minden oldal csak azt húzza be, amire ténylegesen szüksége van. Hátránya az, hogy nagyon oda kell figyelni a duplikált kódokra, hisz könnyen megeshet, hogy egyes CSS formázásokat mind a kapcsolat oldalon, mind pedig a képgaléria oldalon használunk (legyen az akár csak pár sor).
Ez esetben megint csak döntenünk kell, hogy kezeljük a problémát:
1.1.1) közös részek átpakolása a default.css-be
Előnye, hogy nem lesz meg ugyanaz a kódunk több helyen is, így elkerüljük az „itt kijavítottam, de ott elfelejtettem” kezdetű mondatokat. Hátránya, hogy elkezdjük növelni a default.css-ünk méretét és megint csak ott tartunk, hogy minden egyes lapba be fogunk húzni olyan tartalmakat is, melyekre nem lenne szükség.
1.1.2) meghagyunk mindent ott ahol van
Ha úgy érzed, hogy számodra nem jelent problémát ez a dolog, hagyhatod a közös részeket az egyes CSS fájlokban és későbbiekben odafigyelsz arra, hogy ha vmit módosítani kell, azt esetleg több helyen is át kell majd írnod.
1.1.3) a közös részeket külön fájlba teszed
Azokat a közös elemeket, melyek több lapra is érvényesek, nem a default.css-be pakolod át, hanem egy külön CSS fájlba. Így a default.css, a gallery.css, a download.css stb… mellett lesz pl. olyan is, hogy gallery_download.css.
Előnye, hogy a default.css méretét nem növeled, fájlszinten egy darabig biztos átlátható lesz, hogy mely CSS mely laphoz tartozik és mik azok az elemek, melyek több lapnál is közösek, illetve így a lapokhoz még mindig csak azokat a CSS formázásokat húzod be, amikre ténylegesen szükség van. Hátránya szerintem az, hogy esetleg 1-2 sor miatt kell új fájlokat létrehoznod, illetve hogy nagyszámú CSS esetében könnyen áttekinthetetlenné válik, mi hova tartozik.
1.3.) Darabolás oldalszerkezet alapján
Egy lehetséges megoldás az, amikor a lapok szerkezeti elemei szerint, az egyes szekciók szerint daraboljuk a CSS-t. Általában egy lapnak van fejléce, lábléce, menüje (1 vagy több), tartalma stb…
A CSS-t feldarabolhatjuk ezek szerint is, így lesz a default.css-en kívül még header.css, menu.css, footer.css, forms.css stb..
Előnye, hogy módosításkor könnyen megtalálhatóak az egyes részek, hisz ha pl. a láblécben akarok valamit módosítani, biztos hogy a footer.css-ben kell majd turkálnom. Előnyös azoknál a lapoknnál is (sőt, főleg itt előnyös), ahol ezek az egyes szerkezeti részek változnak, pl. más és más header-t töltök be, vagy épp egyes oldalakon nem kell a menü (pl. képgaléria).
Hátránya, hogy bizonyos szempontból nem elég jól tagolt illetve a kódok ismétlődhetnek egyes fájlokban, oda kell rá figyelni.
1.4) Darabolás a HTML elemek szerint
Megtehetjük azt is, hogy az egyes HTML elemekre koncentrálva bontjuk le a CSS-est. Pl. lesznek oldalaink, ahol vannak formok, más oldalainkon táblázatokat jelenítünk meg, a harmadikon meg mondjuk csak szöveges leírások fognak szerepelni. Ez esetben a default.css mellé készül majd egy forms.css, egy tables.css stb…
Hátrányaként említeném, hogy könnyen beleeshetünk abba a hibába, mikor a CSS-eket nagyon szétkapjuk és sok-sok kis fájlunk lesz, ezeket nehéz követni.
Némi segítséget nyújthat a fájlok elején elhelyezett kommentezés, mikor minden egyes CSS-be beírjuk azokat a template fájlokat, melyekre hatással lesz a CSS fájlban történő módosítás. Pl. a forms.css elején szerepelhet egy ilyen kiegészítés:
1 2 3 4 5 6 | /************************************ fajlok, melyekbe behuztam ezt a css-t kapcsolattartas.tpl, kerdoiv.tpl, arajanlat.tpl ************************************/ #kerdoiv {} |
/* 2.) CSS kódolási stílusok
———————————————— */
Attól függetlenül, hogy magát a CSS-t mennyire ismerjük, még lehet csúnya a kódunk. Számtalan esetben láttam olyan CSS formázásokat, melyek bár bravúros megoldásokat tartalmaztak, rondák voltak. Tagolatlan, kommentek teljes hiánya, behúzások hol space-szel hol tab-bal történtek és hasonlók. Ne tegyünk ilyet. Egy szépen formázott kódra jó ránézni és ugyanolyan kellemes érzést kelt másokban, mint egy szép honlapgrafika.
Persze ez még biztos nem fog mindenkit lázba hozni, úgyhogy nézzük tovább, milyen előnyei vannak a formázásnak és a stílusnak.
Egy honlap nem az örökkévalóságnak készül, biztos hogy életünk során (amennyiben máshoz nem is kerül a kód) még párszor hozzá kell majd nyúlnunk. Egy összegányolt kódot a készítőjének sem egyszerű átnézni mondjuk fél vagy 1 egy távlatából. Vagy nézzünk egy másik esetet: munkahelyünkön a kollegáinknak kell azzal a kóddal a továbbiakban foglalkoznia. Jártam már párszor úgy, hogy a megkapott kódot több idő volt átnézni és rendberakni, mintha az egészet újra írtam volna a nulláról, mondhatom nem egy kellemes foglalatosság.
Munkahelyen az egységes, közös stílusnak még megvan az az előnye is, hogy nem lehet látni a kódon, ki készítette. Akár az enyém is lehetne, nem számít. Hisz ugyanazt és ugyanúgy csinálja mindenki, így sokkal könnyebb átnézni és módosítani akár a későbbiekben is akár nekem, akár a többieknek.
CSS írás terén is megvannak a különböző stílusok, akárcsak a programozásban (programozóknak biztos ismerős lesz a „BSD stílus”, a „GNU stílus”, a „K&R stílus). Egyik sem tökéletes, egyik sem jobb mint a másik, a választás nagyrészt ízlésünkön fog múlni. Az viszont fontos, hogy csapatmunka esetében jussunk közös nevezőre és mindenki ugyanazt a stílust használja.
2.1) A tartalom tagolása
A CSS fájlok tartalmát több módszer alapján is lehet tagolni és az egyes részeket kommentezés segítségével elkülöníteni egymástól.
2.1.1) Lap szerkezeti felépítése szerint
Egyik lehetséges módszer, amikor a lap szerkezeti felépítése szerint tagoljuk a tartalmat és az egyes részek alá írjuk az összes hozzá tartozó formázást attól függetlenül, hogy az szövegformázás-e, linkformázás-e, szerkezeti felépítésre vonakozó rész-e stb.. Például:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /* FEJLEC ----------------------------------------------- */ #fejlecdoboz { width: 500px; height: 30xp; } p.text-contact { font-weight: bold; } p.text-bevezeto { color: blue; } /* NAVIGACIO ----------------------------------------------- */ #menu { width: 50px; height: 200xp; } li.menuelemek { font-weight: bold; font-style: italic; } /* TARTALOM ----------------------------------------------- */ #tartalomdoboz { width: 450px; height: 800px; } /* LABLEC ----------------------------------------------- */ #lablecdoboz { width: 500px; height: 30xp; } |
2.1.2) Lapelemek típusa szerint
Egy másik féle tagolás az, amikor a tartalmat az egyes lapelemek típusa szerint (div-ek és dobozok, linkformázások, felsorolások, form-ok stb.) szedjük szét. Például:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* DOBOZOK ----------------------------------------------- */ #fejlecdoboz { width: 500px; height: 30xp; } #menu { width: 50px; height: 200xp; } #tartalomdoboz { width: 450px; height: 800px; } #lablecdoboz { width: 500px; height: 30xp; } /* SZOVEGFORMAZASOK ----------------------------------------------- */ p.text-contact { font-weight: bold; } p.text-bevezeto { color: blue; } /* FELSOROLASOK ----------------------------------------------- */ li.menuelemek { font-weight: bold; font-style: italic; } /* FORMOK ----------------------------------------------- */ form#kapcsolat { margin: 5px; } form#arajanlat { margin: 10px; border: 1px solid black; } |
2.2) Kemény vagy lágy tabulátor
Amikor a kódokat formázzuk, 2 lehetőségünk van a behúzásokra. Egyik a kemény tabulátor, amikor tényleges tab-okkal húzzuk be a kódot a helyére, a másik a lágy tabulátor, amikor tulajdonképpen adott számú space-szel (szóközzel) húzzuk be a tartalmat a helyére. Ez utóbbiak előnye, hogy szerkesztőprogram beállításaitól függetlenül mindenkinél ugyanúgy fognak megjelenni, hátránya, hogy ha később módosítani kell a kódon vagy ezt a lágy tabulátort netalántán valamelyik kollegánk kézzel ütögeti be, akkor nagyon utálos dolog tud lenni az a rengeteg space billentyű csapkodás, mire helyére rángatunk esetleg minden sort.
A kemény tabulátorok hátrányaként lehet megemlíteni, hogy szerkesztőprogramtól függően más és más térközöket fogunk látni, viszont ha egyedül dolgozunk, illetve olyan csapatban ahol a fejlesztőkörnyezet (közel) megegyezik, ezt könnyen ki lehet küszbölni és nincs vele gond.
Bármelyik mellett is döntünk, a mérete legyen kb 4-5 szóköz, ez már igen jól olvasható kódot eredményez.
2.3) Behúzások, térközök
Itt igazából 2 fajta behúzásról is lehetne beszélni. Egyik, mikor az egyes kiválasztók tartalmát (tulajdonságokat) húzzuk be, formázzuk egy bizonyos rendszer szerint, illetve a másik, hogy az egyes kiválasztók egymáshoz való viszonyát is behúzással jelölhetjük (mondhatjuk szülő-gyermek viszonynak is).
2.3.1) Tulajdonságok behúzása és a lezárások
Az alább felsorolt kódok közül bármelyiket lehet választani, hisz mindegyik helyes. Én személy szerint az elsőt szoktam használni, mert így a CSS fájlt végiggörgetve a bal oldalon semmi más nem látok, csak a kiválasztók neveit illetve hogy ID-ről vagy CLASS-ról van-e szó.
1 2 3 4 | kiválasztó { tulajdonság: érték; tulajdonság: érték; } |
kiválasztó { tulajdonság: érték; tulajdonság: érték; } |
1 2 3 | kiválasztó { tulajdonság: érték; tulajdonság: érték; } |
1 2 3 4 5 | kiválasztó { tulajdonság: érték; tulajdonság: érték; } |
1 2 3 4 5 | kiválasztó { tulajdonság: érték; tulajdonság: érték; } |
Ezt a legutolsót az amit talán kimondottan rossznak mondanék, csúnya kódot eredményez, mert összefolyik a tartalom.
2.3.2) Kiválasztók behúzása
1 2 3 4 5 6 7 8 9 10 11 12 13 | #id { tulajdonság: érték; tulajdonság: érték; } #id.classneve1 { tulajdonság: érték; } #id.classneve2 { tulajdonság: érték; } #id.classneve2 span { tulajdonság: érték; } |
Vagy másik eset, amikor több kiválasztó azonos tulajdonságait mintegy csoportba foglalom (dobozolás) és csak azokat tulajdonságaikat teszem külön, melyek mindegyik esetében más és más. Például nézzünk egy kicsit élethűbb mintát, mint a fentiek:
1 2 3 4 5 6 7 8 9 | #idneve1, #idneve2, #idneve3, #idneve4 { width: 300px; height: 200px; border: 1px solid black; } #id1 { background-color: blue; } #id2 { background-color: white; } #id3 { background-color: green; } #id4 { background-color: red; } |
2.4) 1 sor vagy több sor
Az 1 sorba tett tartalmaknak megvan az az előnye, hogy amennyiben nem sikerül túl hosszúra 1-1 sor és emiatt nem megy ki a monitor jobb oldalán illetve nem törik meg több sorba, nagyon jól átlátható kódot eredményeznek kiválasztók szintjén. Hátránya, hogy ha hosszú a sor, a kód nehezen áttekinthetővé válik.
1 2 3 4 | #id1 { width: 300px; height: 100px; border: 1px solid #900900; margin: 5px 13px 6px 3px; } #id2 { width: 200px; height: 154px; border: 3px solid #cacaca; margin: 8px 14px 8px 3px; } #id3 { width: 150px; height: 447px; border: 5px solid #495843; margin: 6px 18px 7px 3px; } #id4 { width: 450px; height: 265px; border: 1px solid #dedede; margin: 1px 12px 3px 3px; } |
Egy másik érdekes megoldást láttam még a minap, mely macerásnak tűnik ám elég rendezett:
1 2 3 4 | #id1 { width: 300px; height: 100px; border: 1px solid #900900; margin: auto 13px 6px 3px; } #id2 { width: 200px; height: 154px; border: 3px solid #cacaca; margin: 0 14px auto 3px; } #id3 { width: height: border: 5px solid #495843; margin: 6px 18px 7px 3px; } #id4 { width: 450px; height: 265px; border: 1px solid #dedede; margin: 1px 12px 0 3px; } |
A több sornak megvan az az előnye, hogy a tulajdonságok és értékek számától és méretétől függetlenül mindig jól olvasható lesz a kód. Hátránya, hogy nagyobb CSS fájlok esetében sokszor nagyon sokat kell görgetni, hogy a módosítani kívánt részt megtaláljuk.
1 2 3 4 5 6 7 8 9 10 11 12 13 | #id1 { width: 300px; height: 100px; border: 1px solid #900900; margin: auto 13px 6px 3px; } #id2 { width: 200px; height: 154px; border: 3px solid #cacaca; margin: 0 14px auto 3px; } |
2.5) Kommentek
A kommentek használata rendkívüli módon megkönnyítheti vagy inkább meggyorsíthatja egy kód későbbi módosítását, ezért én mindenképp javaslom a használatát. Nem csak mások számára tesszük így olvashatóbbá a kódot, magunk életét is megkönnyíthetjük vele.
A kommentek azon kívül, hogy hasznos információkat tartalmaznak, a kódot tagolják is. Nézzük az alap komment hogy néz ki:
1 2 3 4 5 | /* itt a megjegyzes szovege */ .classneve1 { color: red; font-weight: bold; } /* itt a megjegyzes szovege */ .classneve2 { color: blue; font-weight: normal; } |
Kicsit formázva még jobban fog kinézni, s bár kis mértékben növelni fogja a fájlméretet, összességében véve a kódot átláthatóbbá teszi
1 2 3 4 5 | /* ---------- itt a megjegyzes szovege ---------- */ .classneve1 { color: red; font-weight: bold; } /* ---------- itt a megjegyzes szovege ---------- */ .classneve2 { color: blue; font-weight: normal; } |
Ráadásul ez a 2.1.2-es pontban már látott kóddal (amikor nagyobb részek címeként használtuk) szépen összhangban van:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* SZOVEGFORMAZASOK -------------------------------------------------- */ /* ---------- galeria szovegei ---------- */ .classneve1 { color: red; font-weight: bold; } .classneve2 { color: blue; font-weight: normal; } .classneve3 { color: red; font-weight: bold; } .classneve4 { color: blue; font-weight: normal; } /* ---------- formok szovegei ---------- */ .classneve11 { color: red; font-weight: bold; } .classneve12 { color: blue; font-weight: normal; } .classneve13 { color: red; font-weight: bold; } .classneve11 { color: blue; font-weight: normal; } |
Illetve számtalan további változat van, ki hogy szereti vagy tartja szépnek
1 2 3 | /****************************/ /* SZOVEGFORMAZASOK */ /****************************/ |
/* ---------------------------------------
SZOVEGFORMAZASOK
------------------------------------------ */ |
1 2 3 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~
SZOVEGFORMAZASOK
~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
/* SZOVEGFORMAZASOK
------------------------------------------
*/ |
1 2 3 | /********************************/ /* >>>>> SZOVEGFORMAZASOK <<<<< */ /********************************/ |
1 2 3 | /* ------------------------------ */ /* --->>> SZOVEGFORMAZASOK <<<--- */ /* ------------------------------ */ |
2.6) Csoportosítások
Csoportosítás alatt (szokás szerint :) ) megint csak több dolgot lehet érteni. Lehet egyrészt csoportosítani a kiválasztókat, ahogy azt a 2.5 alatt már láthattuk némi komment rásegítéssel, illetve lehet csoportosítani magukat a tulajdonságokat is. Nézzünk egy példát rá:
1 2 3 | #idboxneve { width: 300px; height: 200px; |
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: black; |
margin: 5px; padding: 8px; } |
2.7) Dobozolás
A dobozolásról már kicsit fentebb volt egy minta, de most nézzük részletesebben. Dobozolásnak hívjuk azt, amikor azokat a kiválasztókat, melyek egyes tulajdonságai megegyeznek, csoportba vagy másképp dobozba foglalom. Előnye az, hogy a kód egyrészt átláthatóbb lesz, a szerkesztést gyorsítja (hisz egyes értékeket így elég lesz 1 helyen átírni és több kiválasztóra is hatással lesznek) és a magának a CSS fájlnak is rövidíti a kódját, tehát kisebb lesz a fájl mérete.
Egyik lehetséges megoldás, ha a kiválasztók neveit egy sorba tesszük. A sorok számán így mindenképp spórolni fogunk, ám hosszú sor esetében kellemetlen lehet a horizontális görgetés a fájlban:
1 2 3 4 5 6 7 8 9 10 | #idnevemertazjo1, #idnevemertazjo2, #idnevemertazjo3, #idnevemertazjo4, #idnevemertazjo5, #idnevemertazjo6, #idnevemertazjo7 { width: 300px; height: 200px; border: 1px solid black; background-color: yellow; } #idnevemertazjo1 { background-color: blue; } #idnevemertazjo2 { background-color: white; } #idnevemertazjo3 { background-color: green; } #idnevemertazjo4 { background-color: red; } |
Ezért megfontolandó a kód ilyesfajta tördelése:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #idnevemertazjo1, #idnevemertazjo2, #idnevemertazjo3, #idnevemertazjo4, #idnevemertazjo5, #idnevemertazjo6, #idnevemertazjo7 { width: 300px; height: 200px; border: 1px solid black; background-color: yellow; } #idnevemertazjo1 { background-color: blue; } #idnevemertazjo2 { background-color: white; } #idnevemertazjo3 { background-color: green; } #idnevemertazjo4 { background-color: red; } |
2.8) Szóközök
A szóközök használata szintén egy olyan dolog, melyre érdemes odafigyelni a tulajdonságok és értékek környékén.
Ez egy jó megoldás:
1 2 3 4 5 | kiválasztó { tulajdonság: érték; tulajdonság: érték; tulajdonság: érték; } |
Ez rossz megoldás:
1 2 3 4 5 | kiválasztó{ tulajdonság:érték; tulajdonság:érték; tulajdonság:érték; } |
Ez szintén jó megoldás:
1 2 | kiválasztó { tulajdonság: érték; tulajdonság: érték; } kiválasztó { tulajdonság: érték; tulajdonság: érték; } |
Ez viszont rossz:
1 2 | kiválasztó {tulajdonság:érték; tulajdonság:érték;} kiválasztó {tulajdonság:érték; tulajdonság:érték;} |
Ugyanúgy, ahogy ez is rossz:
1 2 | kiválasztó{tulajdonság:érték; tulajdonság: érték;} kiválasztó{tulajdonság:érték; tulajdonság: érték;} |
Összefoglalva kicsit az eddig leírtakat: mint látható, számtalan módja van a fájlok és azok tartalmának rendszerezésére. Tökéletes megoldás nincs, van akinek egyik, van akinek a másik módszer fog tetszeni. Biztos lesznek olyanok is, akik esetleg e módszerek keverékét tartják majd a legjobbnak, még ez sem gond. Egyedül arra figyeljetek, hogy már letettétek a voksotokat egyik vagy másik mellett, akkor próbáljátok meg azt következetesen tartani minden egyes munka esetében.
Forrás:
George Schlossnagle: PHP fejlesztés felsőfokon
Architecting CSS
http://www.digital-web.com/articles/architecting_css/
CSS Code Visual Grouping Techniques
http://www.brownbatterystudios.com/sixthings/2006/03/21/css-code-visual-grouping-techniques/
CSS coding conventions
http://www.phpied.com/css-coding-conventions/
5 Tips for Organizing Your CSS
http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css
„Előnye az is, hogy minden oldal csak azt húzza be, amire ténylegesen szüksége van.”
Hmmm… én azt gondoltam, hogy mivel a böngésző úgyis letárolja, jobb, ha 1ben van, és akkor lapváltáskor már a cache-olt css-t használja (hiszen ugyanarra a .css-re mutat az is).
Nem jól gondoltam? Ezt csak az IE csinálja így?
A több CSS-t használatának ez csak egy előnye (bár más téren ugyanakkor hátrány is), amit megemlítettem. :)
A böngészők tényleg letárolják a CSS-t, legalábbis amiket ismerek ill. használok.
Ennek ellenére nem hátrány, ha pl. egy ingyenes és fizetős szolgáltatást is tartalmazó honlap esetében a free userek a főlap letölődésekor nem kell lerántsák még azt a css állományt is, amit csak a fizetős userek, regisztráció után „használnak”. Gyorsabb lapletöltődés az eredménye.
Mindegyik módszer mellett és ellen vannak érvek, én személy szerint az 1db css-t szeretem.
Nah, azért ám! :)
Én is 1 css használat híve vok, és ha nem túl nagyok akkor a saját javascripteket is egy külső file-ba pakolom.
Ami a css, javascript vagy html kommenteket illeti, hát abban is a rövid, „velős” a kedvencem, a kisregényeket nem kedvelem. Ha a rövid komment nem mond semmit, akkor a hosszú sem fog… Persze a tutorialoknál kell a bővebb komment a scriptbe és a cikkbe is, de az ugye egy másik dolog.
ÉN tökre értem,hogy hol milyen kód kell, a színkódokat is tudom, meg minden,de nem értem ezeket az angol dolgokat ha megnézek egy css-t. Pl, mi az a hover, meg ezek, és mért kell az elején meg mért pont h1 h2…. valaki segítsen! aki ért hozzá,és el tudná magyarázni msn azt nagyon szépen kérem vegyen fel: bogesz33@hotmail.com
Nagyon fontos lenne, előre is köszihhh!
Háát… Bogi ki kell ábrándítsalak…
Hogy mi-miért, és miért pont az, na ez egy nagyon hosszú történet lenne.
Röviden: akár pl. a basic, vagy más programnyelvben itt is az angol szavak rövidített formáit használjuk: h pl. header (főcím). Némi angol tudással könnyen értelmezhető a css (nagyrésze).
Ha itt a jobb oldali menüben a css referencia címke alatti postokat átolvasod, az sokat segíthet, vagy ha tudsz angolul, akkor hasznos lehet a xttp://www.w3schools.com/css/default.asp oldal is.
Az én tapasztalatom az, hogy fejlesztésnél hasznos, ha a css fájlok külön vannak szedve (valamilyen ésszerű struktúrába), élesben pedig jó ha egyben van minden. Ha van rá lehetőség, azt javasolnám, hogy egy scripttel fésüljük össze a css fájlokat egy, de max néhány nagyobba, így megnövelve a betöltési sebességet. Persze ez nem mindig megoldható, de szvsz a legjárhatóbb út.