CSS tippek

A linkleltár második részében szemezgettem az internet kincsei közül a CSS témájában, most néhány hasznos tippet szeretnék megosztani a stíluslapokkal kapcsolatban.

Gyakori hibák

Saját tapasztalatomból (is) tudom, hogy következetességgel és odafigyeléssel sok-sok munkaóra megspórolható. Én a legtöbb időt az alábbiak figyelmen kívül hagyása miatt vesztegettem el.

Pont, vessző, pontosvessző, szóköz – mindig csak a megfelelő helyre!

• .p » ponttal az elején a class="p" stílusú tag-ekre vonatkozik
  p » pont nélkül minden bekezdésre érvényes
• a, a:hover, a:visited » ez egyes stílusok felsorolásakor közéjük mindig kell vessző, az utolsó után viszont soha
• a {border: 0; background: #000; color: #fff;} » egy stílus meghatározásánál az egyes tulajdonságok után mindig legyen pontosvessző (bár az utolsó után már nem kötelező, de nem baj, ha ott van)
• a {font-size: 10px} » az érték és annak mértékegysége között soha ne legyen szóköz

Nem mindegy a sorrend!

• p a » bekezdésn belüli link
  a p » linken belüli bekezdés
• p.header » minden class="header" stílusú bekezdés
  .header p » a class="header" header stílusú tag-en belüli összes bekezdés

Egyszerűen jobb

Mint az élet sok más területén, így itt is igaz, hogy a legegyszerűbb a legjobb; mert ha kevesebb a kód, akkor először is kisebb a fájl, másodszor pedig könnyebb átlátni.

Rövidítsünk, ha lehet!

• p {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 11px;
line-height: 15px;
font-family: helvetica, sans-serif}

  » mindezek helyett elég ennyi:
  p {font: bold italic small-caps 11px/15px helvetica, sans-serif}

• body {background-color: #000;
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center top}

  » egyenértékű ezzel:
  body {background: #000 url(bg.gif) no-repeat center top}

• p {border-color: #000;
border-style: solid;
border-width: 10px}

  » egyszerűbben és rövidebben:
  p {border: #000 solid 10px}

Ráadásul…

• …jó tudni, hogy egy tag-nek akárhány stílusa lehet (szóközökkel elválasztva).
  p class="txt alignright" » ebben az esetben a bekezdések a .txt és az .alignright stílusokban definiált tulajdonságokkal jelennek meg