Proč nepsat CSS deklarace do jednoho řádku?

Třetina z vás už dávno ví, jaké zlo jsou jednořádkové deklarace pro organizaci kódu, třetina váhá a třetina jednořádkové deklarace prostě píše všude. Tohle je text pro druhou a třetí třetinu.

Takhle vypadá psaní deklarací do jednoho řádku:

.osklive {
  position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0;
}

A takhle to vypadá lépe:

.hezky {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Argument pro jednořádkové deklarace obvykle zní takto: V editoru vidím více pravidel pod sebou, lépe se tak orientuji v kódu.

Nesouhlasím, ale pojďme si nejdříve shrnout nevýhody jednořádkového zápisu:

„Lepší” orientace v selektorech a pravidlech, horší v deklaracích

Přátelé, k orientaci v selektorech máme editory kódu. K rozdělení CSS pravidel do logických celků pak rozumné komentování nebo lépe CSS preprocesory. Nikoliv kód samotný.

Nepomůže vám v orientaci po selektorech třeba Goto symbol v SublimeText nebo prostě Ctrl+F v jakémkoliv editoru?

Selektory pod sebou znamenají, že o to víc trpí čitelnost deklarací. Není možná jakákoliv jejich prioritizace a kategorizace. A to bolí.

Diff peklo

Věřím, že používáte nějaký verzovací systém, víte jaký má diff význam pro čtení změn v kódu a že tedy pochopíte následující obrázek:

Do stejného ranku patří i automatizované úkony nad CSS kódem, například debugování pomocí validátorů. Průšvih 300znakové jednořádkové deklarace vám dojde ve chvíli, kdy CSS kód potřebujete prohnat validátorem. A ten vám nahlásí chybu na řádku 23. Jauvajs.

Našly by se i další argumenty proč nepoužívat jednořádkové deklarace, aplikovatelné jen na konkrétní vývojářské prostředí.

Psát tedy deklarace vždy pod sebe? Ano, ale pozor, rozumné výjimky jsou povoleny. Třeba bloky vlastností s jednou deklarací.

Abych to shrnul: nepište CSS deklarace do jednoho řádku. Výhoda jednořádkového zápisu je jen zdánlivá a má dvě velké nevýhody.

CSS kód je technologické haiku. Bavilo by vás číst ho v jednom řádku?

Téma spravovatelnosti kódu zaujalo? Pak by vás mohlo zajímat:

• Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava
• Zásady psaní konzistentního, idiomatického CSS
• SMACSS