rendezett css, globális white space reset

Amikor elkészítünk egy site-ot, a legfontosabb, hogy a kódunk minél rendezettebb, átláthatóbb legyen. Ez különösen érvényes, amikor css-t kódolunk. Sok féle rendezési módot kipróbáltam már. Az egyik az amikor minden elemet, osztályt logika szerint kommentekkel választunk el egyetlen css fájlban:

/*strukturális elemek*/
 .fejlec {

 }

/*end oldal határoló elemek*/


/*hivatkozások*/
 .jobboldal a:link, .jobboldal a:visited {

 }

/*end oldal határoló elemek*/

Ez akkor lehet hasznos, ha csak egy egyszerű sablon-t készítünk (pl. WordPress sablon) vagy az oldal mérete, design elképzelése szerint nem kell túl sok osztály, azonosítót deklarálnunk. A másik megoldás, és én ezt támogatom jellemzően, amikor a style.css tartalmát logikai egységekre bontjuk. #### Hogyan is néz ez ki?

Létrehozzuk a style.css-t:

 @import url(_pager.css);
 @import url(_text.css);
 @import url(_href.css);
 @import url(_table.css);
 @import url(_forms.css);
 @import url(_banner.css);

Nem kell mást tennünk mint a style.css-t befűzni oldalunkba:

 <link href="css/style.css" media="screen, projection" rel="stylesheet" type="text/css"></link>

Láthatóan 6 részre osztottam stylesheet-et. _pager.cssIde kerüljenek az oldal szerkezetét meghatározó css-ek. Pl .container, body stb. Valamint itt célszerű meghatározni a különböző szélességeket. pl ha van egy 100%, 75%, 50% szélességű elemünk, akkor célszerű létrehozni hozzá a style-t.

 .width100 { width: 100%; }

 .width75 { width: 75%; }

 .width50 { width: 50%; }

Ha tényleg törekedni szeretnénk a rendezettségre, akkor itt ne használjunk karakterformázást, hagyjuk meg a következő css filenak. _text.cssA karakterformások helye. h1, h2, h3, h4, h5, h6, p, ul, li, span, stb. Persze a pseudo használata nem tiltott, hiszen nem egyszer talalkozunk azzal, hogy a valami azonosítót viselő div-ben található p tab karakterformázása teljesen eltér a többi p tag formázásától. _href.cssÉn még nem találkoztam olyan oldallal, ahol ne kellett volna több színű, méretű linkeket használnom. Tehát ennek megfelelően letrehozzuk a _href.css file-t. És ha valaki sír, hogy ez vagy az a link miért ilyen vagy olyan, hamar megtalaláljuk, hiszen ebben csak a hivatkozásokra vonatkozó deklarációkat találjuk. _table.cssIde értelemszerűen a táblázatok formázása kerül. Aki nem használ táblázatot az oldalában persze, az elhagyhatja:) _forms.cssFormok mi más:) Ide kerüljenek a fieldset, legend, label elemek is. Egyéntől függ, hogy a formokat befoglaló diveket is itt deklaráljuk-e. _banner.cssHirdetések, a mágikus, mindenki által utált hirdetések. Érdemes a standard és az általunk használt banner méreteket felvenni ide. Ennyi én nem használok többet, persze lehetne még dolgokat belefűzni, de szerintem ennyi bőven elég. És teljesen átláthatóvá válik a css file. #### Globális white space reset

Az átláthatóság és a rendezettséghez tartozik ez is. Hiszen ha minden elemnel alapértelmezetten nullának kell lennie a margin és a padding értékeknek, akkor miért szaporítanánk a css méretét, amikor globálisan is megoldhatjuk a problémát. Nem kell mást tennünk mint a _pager.css elejére beilleszteni a következőt:

* {
padding:0;
margin:0;
}

Kész ezzel megoldottunk minden padding, és margin problémát. Persze bizonyos helyzetekben azért felül kell írnunk ezt a white-space reset-et, de ezt csak a szükséges helyen kell megtennünk:) Sok sikert a rendezéshez:)