Jak píši CSS: mikrostruktura, třídění vlastností a jiné malichernosti

Dnešní článek vám přinášíme v rámci HČNNIH – Hnutí proti článkům s naprosto nulovou informační hodnotou!

Pokud je mi známo, existují dva základní způsoby zápisu CSS kódu, lišící se v odřádkovávání anebo naopak v neodřádkovávání za každou z dvojic vlastnost: hodnota;.

1. Vertikálně tolerantní přístup

výběr prvků {
        vlastnost: hodnota;
        další vlastnost: hodnota;
        a další vlastnost: hodnota;
        ...
}

Každá vlastnost je na vlastním řádku.

Na jednu stranu se dokument rozrůstá do délky a tudíž je obtížnější (optické) vyhledávání požadovaného prvku.

Na stranu druhou, je snažší vyhledávání požadované vlastnosti v rámci jedné skupiny, to protože začátky všech slov-vlastností se nacházejí na stejné horizontální úrovni. Takovýto seznam vlastností může být stejně přehledný jako seznam telefonní – tedy, pokud byste si vlastnosti seřadili dle abecedy :-).

Osobně jsem tímto způsobem nikdy nepsal a odmítl jsem ho právě na základě vertikální roztahovačnosti.

2. Horizontálně tolerantní přístup

výběr prvků {vlastnost: hodnota; další vlastnost: hodnota; a další vlastnost: hodnota; ...}

Všechny vlastnosti jsou na jednom řádku.

Ve srovnání s vertikální metodou, tato mnohem méně nutí k vertikálnímu posunu. Protože stylopis se často může vlézt na minimální počet „obrazovek“, vyhledávání prvků se stává znatelně snažším. Zejména, pokud je stylopis doplněn o další zpřehledňující prvky: prázdné řádky, odsazení potomků a pseudotříd, případně komentáře.

Nevýhodou je méně pohodlné vyhledávání požadované vlastnosti prvku. Jistě, zvýraznění syntaxe může (částečně) horizontální nepřehlednost odbourat. Ale nikdy neodbourá veškerý diskomfort z této metody plynoucí.

Za dávných časů, takto jsem psal.

3. Kombinující, kompromisní a vesměs sofistikovaný přístup

Tuto metodu jsem si časem a pílí vypiloval do podoby následující.

vybrané elementy {
        atributy pozice
        atributy rozměrů
        atributy pozadí atp.
        atributy písma}

Pro lepší pochopení možná přijde vhod příklad z praxe.

#header #logo a {
        position:absolute; left:35px; top:5px;
        width:350px; height:75px; overflow:hidden;
        background:url('images/header.png') no-repeat;
        font-size:250%; font-style:italic;}

Jak vidno, tento způsob si bere něco od každého.

  1. Umísťuje více vlastností na jeden řádek, a tím šetří vertikálním prostorem a zvyšuje vertikální přehlednost (oproti prvnímu přístupu).
  2. Vlastnosti třídí do skupin, kterým přiřazuje fixní pozici – ve srovnání s druhým přístupem zesnadňuje vyhledávání vlastností.

Takže v zásadě nejde o nic víc, než o smrštění vertikálně tolerantního přístupu (při zachování/vytvoření jiného řádu) anebo o vertikální roztažení horizontálně velkorysého přístupu.

Mohlo by to být delší. Dalo by se promlouvat (a jinde se i promlouvá) na obdobná témata ze syntaktického pytlíčku: odsazování, mezery kolem dvojteček, uvozovky kontra apostrofy, vynechávání středníku za hodnotou poslední vlastnosti :-), „makro-architektura“ CSS kódu (pořadí stylovaných prvků), oddělování layoutu, typografie a jiných aspektů stylu dokumentu buď do zvláštních stylopisů anebo v rámci jednoho, linkování… ale ztratit se v malichernostech je snadné, kdežto vidět rozdíl mezi konvencemi objektivně užitečnými a těmi ostatními vždy snadné není.

Jestli jste právě dočetli tento článek a říkáte si Dozvěděl jsem se vůbec něco? anebo Ale kde je vlastně ta pointa?, tak jste asi ve znamení Střelce si zkuste přečíst něco jiného.

O článku Jak píši CSS: mikrostruktura, třídění vlastností a jiné malichernosti

  • Publikováno: 8.11. 2008 - 1:41
  • Patří do kategorie: něco i weblogy
  • Týká se: .

Komentáře (22)

k formuláři

RSS kanál komentářů

    • Komentář číslo: 1
    • *
    • Jméno: Martin
    • Odesláno:
      8.11. 2008 — 9:53

    jo, vypadá to profesionálně, ale nevýhody zjistíš, až budeš dávat zdrojáky do CVS

    a to přijde, uvidíš

    • Komentář číslo: 2
    • *
    • Jméno: kukulich
    • Odesláno:
      8.11. 2008 — 11:09

    Já to momentálně řeším tak, že pokud mám tři a méně vlastností, je vše na jednom řádku. Při více vlastnostech už je každá vlastnost na vlastním řádku.

    • Komentář číslo: 3
    • *
    • Jméno: Jiří Bureš
    • Odesláno:
      8.11. 2008 — 13:53

    No tak to čtu, dojdu na konec a zjistím, že mi to nic nepřineslo! :-)

    Ale zase vážně. Taky používám třetí přístup psaní CSS. Doplnil bych jenom, že mám ustálené pořadí vlastností na řádku daného typu (ale to ty asi taky).

    • Komentář číslo: 4
    • *
    • Jméno: Lucien144
    • Odesláno:
      8.11. 2008 — 14:24

    Ja kombinuju 3. pristup s rozdelenim stylu do 3 souboru podle obsahu – layout.css, typo.css, colors.css

    • Komentář číslo: 5
    • *
    • Jméno: Martin Michálek
    • Odesláno:
      8.11. 2008 — 15:52

    Proč kompromisy?

    Osobně bych měl výrazný problém zorientovat se ve vlastnostech prvku zapsaného podle (3).

    Myslím, že CSS psané a čtené lidmi by mělo splňovat jediný parametr – maximální čitelnost. Příklad z CSS Tidy href=„http://­csstidy.source­forge.net/xhtml-after.css“ rel=„nofollow“>http:/­/csstidy.source­forge.net/xhtml-after.css.

    Kompresi je lepší nechat strojům a dělat ji případně automaticky až ve chvíli deploye. Příklad skutečně zkomprimovaného CSS. href=„http://­csstidy.source­forge.net/xhtml-after-max.css“ rel=„nofollow“>http:/­/csstidy.source­forge.net/xhtml-after-max.css

    • Komentář číslo: 6
    • *
    • Jméno: Martin
    • Odesláno:
      8.11. 2008 — 16:48

    První příklad mě přijde nejlepší (používám :-). Při psaní kódu je libovolný text z klávesnice „nejdosažitelnější“ a proto se, (mě určitě) nejlépe edituje.

    • Komentář číslo: 7
    • *
    • Jméno: Kahi
    • Odesláno:
      8.11. 2008 — 17:53

    [3] Jiří Bureš: Já jenom trochu. Jak co. Font jsem si třeba nikdy nezvykl psát zkráceně, takže ho rozepisuju a je mi fuk jestli je font-weight před či po font-style…

    [5] Martin Michálek: No vida – to já mám problém se čtením tvého příkladu, o kterém říkáš, že splňuje maximální čitelnost. Možná je to o zvyku. Mimochodem, to si při psaní hlídáš, jestli vlastnost vkládáš na správnou pozici, abys dodržel abecední pořadí?

    Ad komprese. Možná jsem se špatně vyjádřil, ale počet odřádkování nezmenšuji kvůli ušetřenému datovému objemu, ale kvůli ušetřenému vertikálnímu rozměru.

    Taky mám dojem, že komprese odstraněním bílých znaků je zanedbatelná, ve srovnání s gzipem href=„http://­kahi.cz/blog/gzi­povani-podruhe-skripty-a-styly“ rel=„nofollow“>http:/­/kahi.cz/blog/gzi­povani-podruhe-skripty-a-styly.

    [6] Martin: Argument s klávesnicí je zajímavý.

    • Komentář číslo: 8
    • *
    • Jméno: VfB
    • Odesláno:
      8.11. 2008 — 18:46

    jinak existuje několik i online nástrojů na převod css kódu ze zápisu stylu 1 na styl 2 a naopak

    • Komentář číslo: 9
    • *
    • Jméno: Roman Pištěk
    • Odesláno:
      8.11. 2008 — 21:37

    Osobně jsem dříve používal způsob č. 1, abych časem přešel na způsob č. 2, díky kterému jsou stylopisy pro můj mozek daleko čitelnější.

    S tímto stylem zápisu (č. 1) lze jednotlivá pravidla seskupovat a odsazováním dokonce vyznačovat hierarchii reflektující stylovaný dokument. Toto je při způsobu č. 1 nereálné.

    Co se týče vlastností psaných za sebou, není jich v rámci jednoho pravidla zas tak moc (v praxi max. 12?), aby se v nich nedalo jakžtakž vyznat.

    • Komentář číslo: 10
    • *
    • Jméno: Rival
    • Odesláno:
      8.11. 2008 — 21:53

    Jednoznačně první způsob, neboť je ze všech nejlépe čitelný.

    To tvoje mínus (cituji: „Na jednu stranu se dokument rozrůstá do délky a tudíž je obtížnější (optické) vyhledávání požadovaného prvku.“) je irelevantní, nebo znáš někoho, kdo by něco ve stylopisu hledal skrolováním? ;)

    • Komentář číslo: 11
    • *
    • Jméno: Dorian
    • Odesláno:
      8.11. 2008 — 22:08

    Já také patřím mezi ty, co kombinují trochu ze všeho, nahoře mám vždy „pomůcky“, které jsou většinou jednoduché (hidden, center, atd.) a ty se pak hodi na jeden řádek všechny k sobě.

    Vlastní stylování píšu vertikálně tolerantním přístupem, ctrl+F to jisti ;)

    P.S.Mimochodem, tlacitko fajn je fajn. Neodolal jsem.

    • Komentář číslo: 12
    • *
    • Jméno: Kahi
    • Odesláno:
      8.11. 2008 — 22:19

    [9] Roman Pištěk: Tak jsem dlouhou dobu psal. Pak jsem začal delším definicím (jako background nebo font-family) vyhrazovat zvláštní řádek a po další delší době jsem si definoval a vypiloval popsanou metodu No.3.

    [10] Rival: V poslední době jinak než skrolováním nevyhledávám. CTRL-F jen zřídkakdy – a to nejde o vyhledávání prvku, ale o skok třeba na sekci věnovanou sidebaru. Je fakt, že s delšími stylopisy se moc nepotýkám…

    • Komentář číslo: 13
    • *
    • Jméno: Petr Bechyně
    • Odesláno:
      9.11. 2008 — 0:10

    Nejlépe se mi osvědčil způsob 1.

    Styly mám rozdělené do několika souborů:

    • obecná pravidla
    • layout
    • moduly
    • menu

    Při velkém množství nakódovaných webů je to velmi efektivní způsob.

    • Komentář číslo: 14
    • *
    • Jméno: tiso
    • Odesláno:
      9.11. 2008 — 5:21

    Používam 2. spôsob:

    • s ustáleným poradím prvkov
    • ak tam mám náhodou veľa vlastností, tak ich niekedy zalamujem na viac riadkov, aby som nemusel vertikálne skrolovať.

    Ale ten 3. tiež vyzerá zaujímavo…

    Ešte jedno + pre 1.: jednoduhé kopírovanie vlastností – označím riadok a skopírujem tam, kam chcem…

    • Komentář číslo: 15
    • *
    • Jméno: Martin Hložek
    • Odesláno:
      9.11. 2008 — 22:45

    Přihodím sem odkaz na jednu zajímavou prezentaci:
    http://natbat­.net/2008/Sep/28/css-systems/

    Sám používám metodu č.2. Stejně jako Kahi Ctrl+F používám na skoky po sekcích, jinak hledám se orientuji řádcích. Odsazování podle specifičnosti selektoru apod. nemám rád, protože je s tím práce navíc a užitek pro mě žádný – a jak je i řečeno ve slidech výše, člověk ve finále víc přemýšlí nad tím jak co od osadit, než nad vlastním stylováním.

    • Komentář číslo: 16
    • *
    • Jméno: Kahi
    • Odesláno:
      10.11. 2008 — 4:08

    [15] Martin Hložek: dík za odkaz, docela zajímavé [verze s komentářem].

    • Komentář číslo: 17
    • *
    • Jméno: VfB
    • Odesláno:
      10.11. 2008 — 7:59

    jinak používám jedno-řádkový styl
    jinak styly pro jednotlivé části mám u sebe a před tím komentář a ještě před tím jeden prázdný řádek (řízení foldingu pro vimko), u hodně obsáhlých css, pak na začátek dávám TOC (obsah) a někdy i definice v designu použitých barev

    • Komentář číslo: 18
    • *
    • Jméno: Martin Michálek
    • Odesláno:
      10.11. 2008 — 12:02

    [7] Kahi: Kahi, abecední třídění nepoužívám. Snažím se CSS rozdělit do strukturovaných a komentovaných bloků tak, aby každý neobsahoval více než 8–10 pravidel.

    Chápu samozřejmě i argumenty pro horizontálně tolerantní přístup. Sám jsem jej na několika projektech nedávno použil, ale nakonec se zase vrátil tomu neúspornému, ale pro mě čitelnějšímu.

    Vertikálně tolerantní přístup bych použil v případech, že stylopis má opravdu pár řádků a vlastností u selektrorů není mnoho. Typicky třeba barevné schéma.

    Je to vlastně spíše problém layoutu rozhraní editorů CSS: číst dlouhé řádky mě unavuje a když mám vlastnosti pod sebou, vejde se mi jich na obrazovku málo. Kdyby CSS editory navrhoval designér, asi by udělal něco jako sloupcový layout, kde v každém sloupci by byl blok slektorů s vlastnostmi pod sebou.

    [15] Martin Hložek: Martine, díky. Vypadá to po čase na zajímavé myšlenky o CSS.

    • Komentář číslo: 19
    • *
    • Jméno: Tomáš Halada
    • Odesláno:
      10.11. 2008 — 12:19

    Já teda píšu zásadně vždy na nový řádek, s tím že je seskupuju přesně jako ty, akorát pořád pod sebe – pořád je to pro mě nejpřehlednější, a díky tomu ustálenýmu seřazení mám pohromadě vše kolem fontu, barvy a pozadí, atd…

    • Komentář číslo: 20
    • *
    • Jméno: Lokutus
    • Odesláno:
      24.11. 2008 — 14:49

    Hezký.
    Já sice nepíču CSS, ale myslím, že i tady platí jedno jediné pravidlo, bez ohledu na to, co je psáno.
    To pravidlo je typografické a zajišťuje snadnou čitelnost textu. Je starobylé, tudíž je prověřené věkem.
    Je to pravidlo 80 znaků na řádek.
    Je možno to rozšířit na 120 znaků na řádek, ale principem je, aby se text vešel na šířku stránky i s okraji.

    Širší vertikální roztažení je výhodnější, neboť ač je dokument delší, je vidět jen jeden skrolbar a posouvání dokumentu se děje pouze na ose Y.
    Naopak širší horizontální roztažení má za následek zobrazení druhého skrolbaru a nutnost posouvat dokument v obou osách.

    Navíc nejčitelnějším oddělovačem informací je odřádkování.

    Tomu se historicky říká best-practise a znali to už v dobách, kdy používaly svitky (ano, pouze vertikální skrolování).

    • Komentář číslo: 21
    • *
    • Jméno: Martin Kaman
    • Odesláno:
      10.11. 2009 — 12:08

    Díky za článek, vyzkoušel jsem trojku a vzápětí si osvojil způsob číslo 4:

    CSS zapisuju způsobem číslo 1 a v editoru (používám PhpED) si u větších souborů zapínám Code folding → Collapse All (vizte http://twitpic­.com/ozbf5).

    Výhody:

    • změny v repozitáři se ukazují srozumitelně, CSS vlastnost se dá smazat zkratkou pro výmaz řádku
    • dokument je krátký a dá se v něm skrolovat
    • máte rozbalené jen ty selektory, se kterými pracujete – vlastnosti ostatních selektorů vás nerozptylují
    • kdykoliv se dá přepnout na způsob č. 1

    Nevýhody:

    • musí se klilknout, když se chcete podívat na vlastnosti

    Ve větších dokumentech vyhledávám přes Ctrl+F nebo Ctrl+G (jdi na číslo řádku – č. řádku mi při ladění ukazuje Firebug). Když přistanu na řádku číslo XY, automaticky se rozbalí „skupina“, ve které se řádek nachází.

    • Komentář číslo: 22
    • *
    • Jméno: Kahi
    • Odesláno:
      11.11. 2009 — 0:56

    [21] Martin Kaman: Děkuji, že jsi se podělil.

Přidat komentář

Nápověda ke psaní komentářů

Zde formátuje Texy!

  • *zvýraznění*
  • **silné zvýraznění**
  • > citace
  • "odkaz":http://kam
  • [4] reakce na komentář
  • zdrojové kódy a více

komentáře

úplně nahoru