Jól szervezett stíluslapok

Mikor valaki első pillantást vet egy stíluslapra, az egyik legnagyobb visszariasztó erő lehet számára a stíluslap szervezése, felépítése. Mindig azt javasoljuk a kezdőknek, hogy tanulmányozzák a működő veblapokat, abból lehet a legtöbbet tanulni – mégis; ha a szelektorok, stílusszabályok garmadája ráront a tanulni vágyóra, ne csodáljuk, ha csak ül a monitor előtt, és azt gondolja: ezt nem lehet megtanulni… Pedig mégis. Nehéz lehet, de lehetetlen nem. Sok stíluslapot és HTML oldalt kell átböngészni, egymással összevetni, amíg az ember jártasságot szerez benne, miképp is értelmezze a látottakat.

Sajnálatos módon, a tartalom és a megjelenítés elválasztásának alapszabálya – amely a stíluslapos formázást ennyire népszerűvé, és hatékonnyá tette – megértését is megnehezítette.  Ezt erősíti, hogy minden designernek megvan a saját módszere a stíluslap szervezésére. Ha valakitől megörököljük, átvesszük egy weblap karbantartását, egy csomó problémát vet fel. Egy nem létező tökéletes világban mindenki jól szervezett, könnyen érthető, áttekinthető stíluslapot készít. Sajnos, ezt a CSS Nirvánát nem mostanában fogjuk elérni, mindenesetre megkönnyíthetjük a magunk és mások munkáját, ha betartunk néhány alapelvet.

Alapvető szervezés

Egy stíluslap négy fő részre osztható:

  1. univerzális stílusok (body, p, a, stb.),
  2. library jellegű stílusok,
  3. elrendezés (layout) stílusok és
  4. az egyedi lapok stílusai.

Hogy megkönnyítsük a négy stíluscsoport fellelését, írjunk rövid, de lényegretörő kommentet az egyes szekciók elválasztására.

/* Univerzális stílusok kezdete */

... stílusdeklarációk

/* Univerzális stílusok vége */

Bármilyen jól szervezett is egy stíluslap, mégis könnyű eltévedni benne. A stílusszabályok java része a ‘sablon’-stílusok szekciójába kerül, és úgy érdemes formázni, hogy passzoljon a megfelelő HTML jelölés behúzásaihoz.

Univerzális stílusok

Az univerzális stílusokkal kezdeni a stíluslapot eléggé elfogadott megoldás. Itt állítjuk be a hátteret, a fontméretet, a linkek megjelenését, stb. Jó, ha az univerzális stílusok a stíluslap elején kapnak helyet, és érdemes abbe a részbe csak típus-szelektorokat elhelyezni. A stíluslap e része írja le, hogyan jelenjenek meg a leggyakrabban használt HTML elemek, például a body, az a, a p, vagy a blockquote.

Library jellegű stílusok

A stíluslap következő részebe kerülhetnek a library jellegű stílusok. Ezek a stílusok azok, amelyek az osztályokba sorol elemekhez szolgáltatnak megjelenítési információt. Kicsit kevésbé lilán megfogalmazva: legyen egy .photo_right osztályunk, és ezt arra használjuk, hogy a képeket az oldalak jobb oldalára ‘lebegtessük’:

<!--HTML-->
<img src="myimage.jpg" class="photo_right" />

/*CSS*/
.photo_right{ float: right; margin-left: 10px; }

Ezeket a szelektorokat olyan elemekhez érdemes használni, amelyek bár több oldalon is előfordulnak, mégis egységesen kell megjelenniük.

Elrendezés

Ahogy korábban említettem, az elrendezést leíró stílusszabályból van általában a legtöbb. Sokat segíthet az áttekinthetőség megőrzésében, ha a stíluslap formázása megpróbálja követni a HTML oldal behúzási struktúráját. Például, ha van egy HTML oldalunk, amely valahogy így néz ki:

<div id="container">
  <div id="header">
    <div id="navigation"></div>
  </div>
</div>

Az elrendezést leíró stíluslapunkat valahogy így tagolhatjuk:

#container { }
  #container #header { }
    #container #header #navigation { }

Ha a stíluslappal következetesen követjük a HTML behúzásait, könnyebben beazonosíthatjuk, melyik szelektor melyik elemhez tartozik. Fontos különbséget tenni az egyedi sablonelemek és a más (lapról lapra változó) elemek között. A sablonhoz tartoznak azok az elemek, amelyek magukban foglalják a hasznos tartalmat, és minden oldalon megjelennek (néhány ritka kivételtől eltekintve). Ezekhez a sablon elemekhez jobb egyedi azonosítót (ID) rendelni, mint osztályba sorolni őket. Például, legyen egy kétoszlopos lapkiosztásunk, a tetején egy fejléc-szerűséggel. A HTML és a stíluslap valahogy így fog alakulni:

<!-- HTML -->
<div id="container">
  <h1 id="header">Ez itt a fejléc</h1>
  <div id="column_one">Az első oszlop</div>
  <div id="column_two">A második oszlop</div>
</div>

/*CSS*/
#container {
width: 780px;
}
  #header{
  width: 100%;
}
  #column_one{
  width: 600px;
  float: left;
}
  #column_two{
  width: 180px;
  float: right;
}

Ha a sablon elemekhez egyedi azonosítókat használunk, az megkönnyítit a fontos szelektorok azonosítását mind a HTML-ben, mind a stíluslapon. Sőt, a lapon a későbbi esetleges nagyobb design váltás végrehajtása is egyszerűbb, mert a kódból pontosan látszik, mi, hogyan néz ki.

Osztályokat a nem egyedi elemekhez érdemes használni. Vagyis, ha van például egy rendezetlen listánk (<ul>), amelyekben linkeket sorolunk fel, azt besorolhatjuk egy osztályba. Hacsak nem ez a fő navigációs sáv egyedi linktára, az egész webhelyen a link_list osztályú felsorolások konzisztens módon, azonosan jelennek meg. Nézzünk egy példát egy ilyen, sablonban elhelyezett linkfelsorolásra.

<!--HTML-->
<div id="column_one">
  <p>Ez az első oszlop</p>
  <ul class="link_list">
    <li>első link</li>
    <li>második link</li>
  </ul>
</div>

/*CSS*/
#column_one{
width: 180px;
}
  #column_one ul.link_list li { background-color: #ccc; }

Ebben a példában csak a #column_one egyedi azonosítójú (ID) <div> elemen belül taláható link_list osztályú elemek háttere kapja meg a #ccc színt. Ezeket az osztályokat érdemes a stíluslap elrendezésért felelős szekciójába írni. Minden olyan osztályt, amely valamely ID szelektorhoz kapcsolódik, ide érdemes elhelyezni, és úgy elrendezni, ahogy a kapcsolódó HTML oldal behúzásait rendeztük.

Egyedi oldalstílusok

A stíluslap utolsó részére érdemes elhelyezni azokat az osztályokat, amelyek csak bizonyos oldalakra, vagy bizonsos oldaltípusokra vonatkoznak. Ha ezeket a szelektorokat csoportosítjuk, az megkönnyíti az egyedi lapok díszítőelemei közötti tájékozódást. Többször belefuthatunk olyan helyzetbe, amikor szükségünk van egy bizonyos oldalon egy bizonyos stílusra, de ezt a stílust a webhely más részein nem kell alkalmaznunk. Ez az az eset, amikor az adott stílusszabályt érdemes a stíluslapon az egyedi oldalstílusok szekcióban elhelyezni.

Azt szokták mondani: ahány ház, annyi szokás. Ha valakinek más, jobb ötlete van a stíluslapok rendben tartására, ne fogja vissza magát, a kommentelés lehetősége itt nyitva áll.

Thanks to Mirificam Press

  • Share/Bookmark

Kapcsolódó bejegyzések:

  1. Táblázat, vagy nem táblázat?

2009. 01. 08. · htmlinfo · 2 megjegyzés
Címkék: , , ,  · Kategória:: Tippek

2 válasz

  1. rrd - 2009. 01. 08.

    Nálam első helyen az oldalfelépítéssel kapcsolatos definíciók vannak, vagyis, hogy három oszlop, mi a teljes szélesség, stb.

    ezután a html selectorok, mint a ul, li, tr

    és ezután nagyjából azok amiket leírtál.

  2. Simulacrum - 2009. 01. 09.

    Szép összefoglalás, én is pont ezt a sorrendet alkalmazom. Annyi kis plusszal, hogy általában margin, padding kinullázással kezdem minden elemre a CSS-t, esetleg általános font megadással. A stíluslapon belül való behúzást én már kicsit soknak érzem, ilyet még nem csináltam. De szép is lenne, ha ilyenre is lenne idő! :-) Azzal egyetértek, hogy nehéz más által írt CSS-ekben tájékozódni, de pl. Firebug nagyon nagy segítség ilyenkor.

Szólj hozzá!


  • Kezelés