Ebben a bejegyzésben, a különböző css formázási beállításokra fogunk összpontosítani. Szemügyre vesszük milyen lehetőségek közül választhatunk, hogy minél átláthatóbban és minél könnyebben szerkeszthető formában írjuk meg a sokszor igen hosszúra nyúló stílusfájunkat.
A formázás semmilyen kárt nem okoz a css funkciókban, csupán esztétikai jelentősége van. De ez nem jelenti azt, hogy nem fontos. Ez olyan, mintha azt mondanánk, hogy egy festőnek mindegy milyen vászonra fest. Befolyásolja az írás élményét, az olvasás nehézségét és a navigációt, valamint segít a régebben megírt stílusfájlok módosításában. Lássuk hát, mik ezek a módszerek.
Cikkünk a hirdetés után folytatódik!
Mielőtt a formázásra térnénk nézzük meg gyorsan hogyan is tudjuk mehívni a css fájljainkat. Több módszer is létezik. Talán a legelterjedtebb a sima link-ként való meghívás a html fájlunk header részében, amely így néz ki:
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
ezen kívül még egy módszer van a html-ben
<style>
@import url('/css/styles.css');
</style>Egy stíluslapba is behívhatunk több css-t, ugyan ezzel az @import funkcióval. Így elég a html-be csak 1 css-t meghívni.
@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');
/* Ezek a css fájlok is átnézésre kerülnek */Ezen módszerekkel sokkal rendezettebb és rövidebb css fájlokat készíthetünk, amivel nagyban megkönnyíthetjük a dolgunkat.
Na de térjünk is vissza az eredeti témánkhoz.
A css formázásánál viszonylag sok lehetőségünk van, mivel nem vonatkoznak rá szigorú szintaktikai szabályok. Magunk dönthetjük el a távolságot és a sortöréseket. Például:
div { width:350px }
vagy,
div { width:350px }
vagy,
div {width:350px}
A többsoros formátum
#comments { border-bottom:1px solid #B47B10; padding-bottom:5px; } .comments-template { width:580px; float:left; margin-top:20px; } .comments-template ol { margin:30px 0 0 0; width:580px; } .comments-template ol li { width:558px; margin:0 0 20px 0; padding:10px; background:#f8f8f8; border:1px solid #e8e8e8; }
Azt hiszem elmondhatjuk, hogy ez a leggyakoribb módszer. Az oktatásban és könyvekben is gyakran használják. Ebben a példában nincs üres sor, szorosan egymáshoz kapcsolt de mégis könnyen olvasható kódot kapunk.
Többsoros formátum behúzással
#comments { border-bottom:1px solid #B47B10; padding-bottom:5px; } .comments-template{ width:580px; float:left; margin-top:20px; } .comments-template ol{ margin:30px 0 0 0; width:580px; } .comments-template ol li{ width:558px; margin:0 0 20px 0; padding:10px; background:#f8f8f8; border:1px solid #e8e8e8; }
A behúzás mértékének állításával jól különválasztható az egy csoportba tartozó elemek listája.
Az egysoros technika
#comments { border-bottom:1px solid #B47B10;padding-bottom:5px; } .comments-template { width:580px;float:left;margin-top:20px; } .comments-template ol { margin:30px 0 0 0;width:580px; } .comments-template ol li { width:558px;margin:0 0 20px 0;padding:10px;background:#f8f8f8;border:1px solid #e8e8e8; }
Így tudjuk a legtöbb helyet megspórolni. Nincsenek sortörések se szóközök és megovjuk magunkat a sok görgetéstől. Viszont számomra kissé átláthatatlan ez a megoldás.
Egysoros technika tabulátorral
#comments { border-bottom:1px solid #B47B10;padding-bottom:5px; } .comments-template { width:580px;float:left;margin-top:20px; } .comments-template ol { margin:30px 0 0 0;width:580px; } .comments-template ol li { width:558px;margin:0 0 20px 0;padding:10px;background:#f8f8f8;border:1px solid #e8e8e8; }
Egysoros technika tabulátorral és behúzással
#comments { border-bottom:1px solid #B47B10;padding-bottom:5px; } .comments-template { width:580px;float:left;margin-top:20px; } .comments-template ol { margin:30px 0 0 0;width:580px; } .comments-template ol li { width:558px;margin:0 0 20px 0;padding:10px;background:#f8f8f8;border:1px solid #e8e8e8; }
Így már jobban áttekinthető kódot kapunk.
További lehetőségek:
#comments { border-bottom:1px solid #B47B10; padding-bottom:5px; }
#comments { border-bottom:1px solid #B47B10;padding-bottom:5px; } .comments-template { width:580px;float:left;margin-top:20px; } .comments-template ol { margin:30px 0 0 0;width:580px; } .comments-template ol li { width:558px;margin:0 0 20px 0;padding:10px;background:#f8f8f8;border:1px solid #e8e8e8; }
#comments { border-bottom:1px solid #B47B10;border-top:1px solid #B47B10; padding-bottom:5px;padding-left:5px; font-size: 12px;font-weight:normal; }
Minél jobb az olvashatósága egy stílusfájlnak, annál könnyebb vele a munka. Hamar megtalálod benne amit keresel és gyorsan ki tudod javítani a hibákat. Próbáljunk olyan módszert választani ami a szemünknek is könnyű olvasást biztosít, ha az egysoros zavaró, elveszettnek érezzük magunkat benne, akkor válasszuk a többsorosat.
Én, személy szerint a többsoros megoldást használom. Igaz, így a stílusfájlom hosszúsága kb. 5-8x nagyobb és így többet kell a görgetőt használni, de nem bánom. Ha egy kissebb monitoron dolgozunk akkor az egysoros megoldásnál sokszor vízszintesen is görgetni kell ami még ennél is rosszabb.
Kapcsolódó linkek:
- W3schools – CSS How To…
- CSSNewbie – Using the CSS @import Rule
- CleanCSS
- SmashingMagazine – Improving Code Readability With CSS Styleguides
- CSS Formatting Screencast
- woork – Write a well structured CSS file without becoming crazy
Zárszó
A tökéletes elrendezés az, amelyik maximális olvashatóságot és minimális görgetést biztosít. Mindenki keresse meg, a számára tökéletes módszert. Remélem megtaláljátok és megkönnyítitek vele a munkátokat.
Szólj hozzá!