13. 12. 2007 v sekci webdesign:

Úvaha o pojmenování tříd

Aneb jak vytvářet svůj styl a pojmenovávat si své třídy. Je class=‚blue‘ takové peklo?

Na Vitamínu vyšel článeček o Sexy! stylopisech, který mi opět otevřel jednu starou stylesheetovou­ úvahu.

Většina velkých webů, které tvořím, má CSSka přes 50kB. Někdy se přibližují klidne ke stovce (nastylujte si eshop, blog, B2B aplikaci a admina jedním stylem, protože je to celé příliš propojené a pochopíte o čem mluvím). To si pak člověk docela rozmýšlí, jestli si přidá nějaké další unikátní formátování pro konkrétní element.

Pojmenovávat třídu MODRÁ je ve většině případů hloupé. Klient změní CI a rázem je třída modrá, kterou používáte v padesáti různých templatech, ve skutečnosti zelená. Takhle raději ne.

Ale na druhou stranu – existují třídy, u kterých se vysloveně hodí pojmenování dle jejich funkce a nikoliv elementu, ke kterému patří. Např. když chcete nadpisu přidat z grafických důvodů určitý spodní okraj, tak si a/ vytvoříte a nastylujete nové ID se přesným označením nadpisu (hlavniNadpis­Vyhledavani), b/ přidáte mu předdefinovanou třídu. A tuto třídu nepojmenujete hlavniNadpisVyh­ledavani, protože prostě figuruje na příliš mnoha místech. Já ji pojmenovávám mBot (margin-bottom).

Stejně tak se dají přidávat třídy pro odplavání elementu – left a right, každý si snadno domyslí účel třídy rel apod.

Závěr: Nic není černobílé a pojmenování tříd v CSS taktéž. Myslete hlavou, nikoliv obecnými poučkami. A raději u toho nepoužívejte diakritiku.

Komentáře

13. 12. 07, 17.51

K té diakritice u komentářů, nedávno jsem objevil ještě další rozšíření toho bugu, co v odkazovaném článku není – Internet Explorer 6 bug href=„http://­nidzo.cz/progra­movani/webdesig­n/zajimavy-internet-explorer-6-bug.aspx“ rel=„nofollow“>http:/­/nidzo.cz/pro­gramovani/web­design/zajima­vy-internet-explorer-6-bug.aspx

13. 12. 07, 18.16

Mam dotaz. :-) Poutivat pro tridy a id spis anglicka slova nebo normalne v cechah cesky? :-) Ja pouzivam pouze ceska slova ale co tak sleduji tak i v cechach se vice pouzivaji anglicka slova. Samozrejme pouzivam ceska bez diakritiky.

3. Ukee
13. 12. 07, 18.30

Já kombinuju češtinu a angličtinu :) … je to ale někdy mazec se v tom pak vyznat.

Třídy jsem se časem naučil pojmenovávat podle tagu u kterého jsou, takže obvykle „nadpis-kategorie-h2“, „introtext-div“ ale taky „imgleft“ a „box-null“ – těchto dvou názvů se už asi do smrti nezbavím :).

13. 12. 07, 18.32

[2] jde o zvyk…
Pokud se naucis pojmenovavat si tridy a id v kazdem stylopisu stejne, pak se v nem bude snaze a rychleji orientovat. A jestli budou cesky, anglicky, madarsky nebo finsky, to je celkem jedno. Je to tvuj vlastni css styl, delej si s nim co chces.
Kdyz ale tvoris web ve firme a jsi soucat tymu, je tu moznost ze ho po tobe bude predelavat nekdo jiny, a jde o to, jestli mu chces zprijemnit praci a pouzit vice zazita anglicka slovicka…

13. 12. 07, 18.49

[3] Nebylo by efektivnější ve stylech zapisovat např.:
h2.nadpis-kategorie
div.introtext
img.left
atd.?

Velikost stylopisu se imho nebude nijak moc lišit a ušetříš několik znaků v HTML dokumentu ;)

6. karf
13. 12. 07, 20.32

Autorka zmíněného článku možná sexy je, o jejích stylesheetech bych to asi netvrdil. Ohánět se sémantikou u názvů tříd je divný argument.

Název třídy „blue“ je přece to samé, ne-li lepší, než „rel“ nebo „left“. Blue alespoň zastupuje nějakou specifickou hodnotu, kdežto „left“ nebo „rel“ jsou v podstatě přímou náhradou za style=„position: relative; float: left;“. Proč místo toho psát class=„rel left“? Je to sice kratší, ale zase zbytečně zavádíte nové identifikátory pro existující syntaxi, je to zneužití mechanismu tříd. Spíš bych se ptal, jestli není něco špatně, když potřebuju takové low-level třídy (i když sám je taky někdy používám ;). V poslední době používám inline styly na specifických stránkách čím dál častěji. Když si klient nebo grafik ve třetím kroku objednávky vymyslí nějakou anomálii, tak tam raději střelím style, než abych zaneřádil stylesheet nesmyslnou třídou, která se stejně použije jen jednou.

Legrační je taky vždycky argument typu „když klient změní CI…“. Když klient změní CI, tak se pak předělává celej web, ještě jsem nezažil případ, kdy by se redesignovalo jen předěláním CSS, to je čirá utopie. Navíc přejmenování „blue“ na „red“ je otázka jednoho search&replace. Já např. vesele používám třídy col-left a col-right pro levý a pravý sloupec a ještě se mi snad nestalo, že bych to musel předělávat (a kdyby, tak přejmenování je řádově jednodušší, než faktická úprava layoutu).

13. 12. 07, 20.32

Třeba mBot se mi moc nelíbí, protože z nějakého důvodu se přepíše margin na padding nebo border a je tom chaos. Raději spacer nebo tak něco. S left, right, cleaner apod. souhlas. Tam asi není výstižnější popis. Líbí se mi taky článek o HTML 5 co byl teď na listapart – názvy elementů z HTML 5 se dají docela dobře používat už teď jako idčka a classy (header, footer, nav, section, article…).
Co v článcích o stylech ale nechápu je propagování komentářů. Většinou si vystačím s pár řádky, ale komentovat si každý použitý hack apod. mi připadá jako ztráta času. Když si navíc classy a idčka pojmenuju stejně jako smarty šablonu tak pak nemusím dohledávat, kde je co použito. Jak moc využíváte komentáře (třeba v těch 50 – 100 kB souborech)?

14. 12. 07, 09.00

[7] ale jo, komentářema hlavně dělím stylopis na části – je to pak lehce přehlednější.

9. Ukee
14. 12. 07, 10.33

[5] njn, ale nebereš v úvahu mé „imgleft“ vs tvému „img.left“, tam máš znak navíc, já mám zase o znak víc v „nadpis-kategorie-h2“ … takže ve výsledku se to vykrátí ;)