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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*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:

1
2
3
4
5
6
7

 
 @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:

Láthatóan 6 részre osztottam stylesheet-et.

_pager.css
Ide 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.

1
2
3
4
5

 .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.css

A 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.css

Ide é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.css

Formok 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.css

Hirdeté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:

1
2
3
4

* {
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:)