Moderní tvorba webových aplikací
O webu

Nula před desetinnou tečkou u čísla

Je lepší psát před desetinou tečnou u čísla 0.5 zbytečnou nulu, nebo ne?

3 minuty

Při zápisu desetinných čísel bývá v programování volitelné uvádět nulu před desetinnou tečkou. Číslo 0.5 se tedy rovná .5.

V CSS se s tím jde setkat např. při používání em jednotek:

element {
  padding: .5em;
}

Výše uvedený kód je ekvivalentem:

element {
  padding: 0.5em;
}

Je ale lepší nulu psát, nebo vynechávat?

Předně jsem toho názoru, že je to jedno, jen je dobré se domluvit na jednotném stylu napříč projektem.

Vynechání počáteční 0

Pro vynechání nuly hovoří 3 věci:

  1. Je to o jeden znak rychlejší na zápis.

  2. Nemusí se po síti k návštěvníkovi přenášet zbytečný znak.

  3. Pro prohlížeč může být teoreticky rychlejší nevyhodnocovat číselnou část před tečkou.

Dvě poslední ze tří věcí může automaticky zajistit automatisace v podobě CSS pre/post-procesoru.

Psaní s 0

  1. Někomu může přijít psaní s nulou přehlednější:

    element {
      padding: 5em 0 .5em;
    }

    Oproti:

    element {
      padding: 5em 0.5em;
    }

    Kdy až na tu mezeru relativně podobné kusy kódu dělají úplně něco jiného.

  2. Méně zkušeným lidem může přijít takový zápis nejasný nebo nezvyklý.

Přehlednost je v tomto případě dost subjektivní. Když si člověk zvykne zbytečnou nulu nepsat, přijde mu potom 0.5 také divné.

Populární Style Guide

V style guidech větších skupin vývojářů se lze setkat s oběma přístupy:

  • Google HTML/CSS Style Guide: Leading 0s – nepsat počáteční nulu
  • Sass Guidelines: nuly – psát počáteční nulu

Těžko tak proto jednoznačně určit, že je ten nebo ten přístup lepší.

Co preferujete vy? A proč?

Co si myslíte o tomto článku?

Diskuse

Související články

CSS item-pack: balance – vyvážené rozložení flex položek

Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.

11 minut

CSS Container Queries – responsivní komponenty

Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.

16 minut

CSS Anchor Positioning – posicování elementů relativně k jiným

Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.

6 minut

Centrování na webových stránkách

Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.

8 minut

Novinky e-mailem

Když budu mít něco opravdu zajímavého, můžu vám to poslat e-mailem

Přidej se k 500+ čtenářům
Jen kvalitní obsah
Žádný spam

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků · Témata · Zkratky
2013–2026