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 rel="stylesheet" type="text/css" media="screen, projection" href="css/style.css" />

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

  * {

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