August 4th, 2010

Celostránkové třídy a identifikátory

Filed under: Know-how — Ondřej Válka @ 14:57

Pište HTML kód jako znovupoužitelné komponenty, víceméně nezávislé na rodičovských prvcích.

V HTML kódu často přidávám prvku <body> (nebo některému jinému vysoko posazenému prvku) nějakou třídu nebo identifikátor. Označím tímto tak např. stránku s unikátním obsahem nebo třeba šablonu podstránky.

Využívám toho k odlišnému stylování vybraných částí layoutu – jejich vzhled upravuji podle toho na které stránce nebo ve které šabloně se nacházejí.

<body class="layout-subpage" id="page-about">
    …
</body>

Na první pohled to vypadá docela prakticky.

Nevýhody tohoto přístupu se objeví, jakmile vyvíjíte složitější web. Pokud layout prochází změnami, bývá nutné překydávat kusy kódu sem a tam. Celý koncept se pak stává nepraktickým a je třeba sáhnout po flexibilnějším řešení.

8 Comments

  1. Martin Cohen

    Amen!

    August 4th, 2010 at 15:58

  2. Martin Michálek

    Ondro ahoj a souhlas. :)

    Jen prosím — jak přesně myslíš poslední odstavec? Můžeš být konkrétnější? Když výrazně měníš layout celého webu, “překydávat CSS kód” musíš myslím v každém případě.

    August 5th, 2010 at 09:29

  3. Ondřej Válka

    Ahoj i tobě, Martine. Snad odpovím správně.

    Překydáváním jsem myslel toto: mám nějakou kompomentu na stránce (např. nejaký custom stylovaný seznam čehokoliv) a vím, že se mi bude hodit pouze na této stránce.

    Pak přijde situace, kdy se bude hodit ho přesunout/zkopírovat na jinou stránku nebo do jiné šablony. A v tom momentě je mnou prezentovaný přístup jako železná koule na noze.

    August 5th, 2010 at 09:40

  4. Peter Kahoun

    On topic: OOCSS:
    - http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/
    - http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/

    August 5th, 2010 at 12:28

  5. Martin Michálek

    Ondro, ano ale do takové situace se dostaneš jen v případě, když celostránkové třídy používáš dogmaticky na všechny selektory na všech stránkách, u kterých si myslíš, že je nebudeš používat jinde.

    Jednu dobu jsem to dělal stejně, ale myslím, že to je špatný postup.

    Snažím se mít selektory co možná nejlehčí, tzn. namísto
    .page-photos .photo použiju “lehký” selektor .photo, byť si myslím, že fotky nebudu zobrazovat jinde než na stránky s fotkami.

    Až ve chvíli, kdy ta situace nastane, přidám před .photo tu celostránkovou třídu.

    Je nutné samozřejmě vybírat selektory obezřetně aby nedocházelo ke konfliktům, ale s takovým postupem se mi nestává, že bych mě selektor s celostránkovu třídou omezoval ve chvíli, kdy přijde redesign.

    Myslím, že jednoduchost je základní princip čitelného kódu. :)

    August 6th, 2010 at 09:23

  6. Ondřej Válka

    Martine, díky! Přesně tohle jsem měl na mysli. Stejně jako ty jsem dogmaticky celostránkové třídy a nyní došel ke stejnému závěru.

    Doufal jsem, že článek napíšu pochopitelně, tak alespoň že v komentářích jsme si to vysvětlili. :-)

    August 6th, 2010 at 09:35

  7. Miroslav Holec

    Dle mého názoru je třeba v takovém případě kódovat universálně s tím, že ty body CLASS a body ID využiješ jen na specifické úpravy ne? Jasně, že když nastavíš body ID a budeš všechno psát na něj, že z toho bude pekelný bordel :-D

    August 6th, 2010 at 11:49

  8. Ondřej Válka

    Mirku, souhlasím. Článkem jsem chtěl říct, že právě ani ty specifické úpravy není vhodné dělat pomocí celostránkových tříd.

    Resp. to velmi usnadní práci. Pokud při práci na projektu upravuješ množství šablon, které jsou ještě navíc rozkouskovány do oddělených souborů. “Vracet se” pak do spojovacích šablon (typicky šablona záhlaví a zápatí s prostorem pro obsah) a něco v nich upravovat bývá nepohodlné. Nemluvě o někdy krkolomné implementaci v prostředí nejrůznějších frameworků.

    Zkrátka rozdrolit komponenty na kousky je praktický a hlavně univerzální princip. :-)

    August 6th, 2010 at 12:49