Skracovanie zápisu CSS

Skracovanie zápisu viacerých príbuzných CSS atribútov do jedného je vhodné najmä z hľadiska prehľadnosti kódu a znižovania počtu riadkov, no na druhú stranu aj z hľadiska znižovania veľkosti CSS súboru. Ako bežný prípad skracovania uvediem margin resp. padding.
Predstavme si situáciu, že každý z marginov (ľavý, pravý, horný aj dolný), potrebujeme mať iný. Normálny zápis by vyzeral takto:

.trieda {
  margin-top: 5px;
  margin-right: 8px;
  margin-bottom: 6px;
  margin-left: 9px;
}

Skrátený zápis je minimálne rovnako jednoduchý, avšak treba si zapamätať poradie jednotlivých marginov. Vyzerá takto:

.trieda {
          // hore // vpravo // dole // vľavo
  margin: 5px 8px 6px 9px;
}

Výsledok bude rovnaký, ako v predchádzajúcom zápise, avšak skrátili sme ho na celkom slušný jeden riadok.
So zjednodušovaním sa dá ešte pokračovať.

.trieda {
           // hore // vľavo a vpravo // dole
   margin: 5px 8px 6px
}
 
.trieda {
           // hore a dole // vľavo a vpravo
   margin: 5px 8px;
}
 
.trieda {
           // všade rovnaký
   margin: 5px
}

Tomáš Mašek