singha board

Když tak člověk píše CSS kód a už podesáté opakuje tutéž část deklarace, může se snadno stát, že ho to přestane bavit. Je to zřejmě dáno faktem, že standardní CSS, jako takové, je vlastně velice triviální. Mám rád jednoduché a účinné systémy, ale někdy je přílišná strohost na škodu, obzvláště pokud se jedná o produktivitu. A tak jsem si říkal, jak by to asi vypadalo, kdyby CSS bylo strukturované podobně, jako je tomu u jiných programovacích jazyků. Logické celky sjednocené do bloků, které spolu s hierarchickým odsazováním vytvářejí dokonalou programátorskou harmonii

Po staru…

Mějme tedy exemplární CSS kód v běžném tvaru, jak jej všichni známe, čili např.:

div.pageLeftNavOuter div.pageLeftNavInner ul
{
  width:172px;
  margin:0;
  border:none;
  padding:1px 0 0;
  background:url("../_img/dotted.gif") top left repeat-x;
}
div.pageLeftNavOuter div.pageLeftNavInner ul li ul
{
margin:9px 0 0;
background:none;
}
div.pageLeftNavOuter div.pageLeftNavInner ul li
{
  border:none;
  width:172px;
  padding:7px 0 11px;
  font-size:75%;
  line-height:18px;
  background:url("../_img/dotted.gif") bottom left repeat-x;
}
div.pageLeftNavOuter div.pageLeftNavInner ul li.pageLeftNavSelected ul li
{
  padding:7px 0 11px;
}
div.pageLeftNavOuter div.pageLeftNavInner ul li ul li
{
  font-size:100%;
  background:url("../_img/dotted-dash.gif") top left repeat-x;
}

Tento kód je poměrně nepřehledný, obsahuje redundantní deklarace a zabere 605 bytů (pokud tedy uvažujeme 8 bitů pro jeden znak). Upozorňuji, že se jedná o kód reálný, převzatý z praxe, nikoliv vycucaný z prstu.

… a nově

Strukturovaný CSS kód by pak vypadal následovně:

div.pageLeftNavOuter div.pageLeftNavInner{
  ul{
    li{
      .pageLeftNavSelected ul li{
        padding:7px 0 11px;
      }
      ul{
        margin:9px 0 0;
        background:none;
        li{
          font-size:100%;
          background:url("../_img/dotted-dash.gif") top left repeat-x;
        }
      }
    }
    width:172px;
    margin:0;
    border:none;
    padding:1px 0 0;
    background:url("../_img/dotted.gif") top left repeat-x;
  }
}

Jistě uznáte, že je tento zápis mnohem přehlednější, srozumitelnější a nezanedbatelně se nám také snížila datová náročnost (303 bytů). Syntaxe je bezpochyby okamžitě jasná všem, kteří kdy měli co do činění s JavaScriptem, PHP nebo jiným podobným jazykem.

written by singha