Komentáře: Hledá se vhodná třída. Zn.: Spěchá!

Od: Peter Kahoun

Peter Kahoun — Fri, 25 Nov 2011 21:21:52 +0000

Jablka v podstatě nepoužívám, protože s takovými prvky se nesetkávám prakticky vůbec. Pokud kóduji svůj návrh, mám poměrně dobrou představu, jak moc je vzhled prvku vázán k obsahu a jak bych měl navrhnout obecnou třídu (zda vůbec). Pokud kóduji cizí návrh, který bude rozvíjen, volím pojmenování, které mají minimální nebo žádnou vazbu na vzhled. Nakonec je naivní předpokládat, že CSS kód může být navržen, rozvíjen pouhým přidáváním definic a přitom zůstat srozumitelný a efektivní — v žádném případě: buď je potřeba se smířit s redundancí, neefektivitou kódu, nesouladu pojmenování a funkce (ano, s takovým kódem se dá žít dlouho) anebo rafactorovat, což je pochopitelně proces nepříjemný.

Od: manakmichal

manakmichal — Mon, 22 Aug 2011 23:10:51 +0000

Já už do tříd zapracovávám téměř jen mikroformáty a vlastní odvozeniny. Pokud je potřeba, vytvářím globální jednoznačně definované třídy.
Obecně se snažím, kvůli správě souborů a rozšířitelnosti, s třídami šetřit, protože to jde i přes jedno id # a potomky. Kód je pak i čitelnější a menší.

Ale je to také projekt od projektu.

Od: Vašek Chromický

Vašek Chromický — Wed, 10 Aug 2011 16:29:11 +0000

K Petrovu [#4] dopním, že mám v podstatě podobný styl, ale selektory jako „body.stories #content .col-left .list .item“ jsem opustil kvůli výkonnosti. Browser (který čte selektory zprava doleva) pak pro každý element na stránce s třídou „item“ nemusí projíždět DOM navrch až k tagu html, jestli některý z rodičů náhodou není třídy „list“.
Částečně to lze řešit použitím zobáčku „.list > .item“, ale to už raději vytvořím třídu „stories-list-item“ (za podpory LESSu), a browser nemá nad čím přemýšlet. Takový „.stories-list-item.selected“ je taky zcela v pořádku.
Naopak vůbec nejpikantnější je definovat třídy jako „.maloPouzivana span“ (za span lze dosadit i a/p/div a jiné hojně použivané elementy). Pak browser chodí až navrch pro každý druhý element na stránce.

Od: SEO Konzultant

SEO Konzultant — Wed, 10 Aug 2011 16:01:12 +0000

Osobně se snažím popisovat co nejobecněji a spíš významem než obsahem. Tj. např. pro tabulku libovolných produktů či služeb bych použil „products“ a samozřejmě násobnou třídu „products jablka“, pakliže bych to měl na webu nějak diferencovat. Případně jestli jsou na webu jen jedny tabulky, tak bych styloval prostě #main table (#main je můj inner div pro hlavní obsah)

Pro obecně položky (cokoliv vypsané z databáze) používám .item, často přidávám zas další třídy typu bližší určení, název tabulky ze které vypisuji či např odd / even.

Navíc nově používám pár měsíců html5, takže můžu používat takové ty „article“ atd. a pojmenovávání se vyhnu úplně.

Obecně u tabulek (atd.), které vypisují nějaké funkce, považuji za dobrý zvyk dát jako jednu z tříd název oné funkce. Takže pak se jednoduše změní vzhled všeho, co vypisuje jedna funkce, mohu funkci změnit a s ní i upravit vzhled atd. Hlavní css vlastnosti pak nastavuji v té globální třídě pro funkci a pomocí specifické třídy tabulky pak už jen měním specifické rozdíly.

Od: Petr Staníček

Petr Staníček — Wed, 10 Aug 2011 15:55:18 +0000

Když tak nad tím přemýšlím, snažím se v HTML kódu držet věci co nejjednodušší a všechnu složitost a hierarchii přenést na bedra CSS.

Jinými slovy: místo poměrně jednoúčelové class=“col-left-list-item-selected“ mám jen vnořené třídy col-left, list, item a selected a všechna hierarchie je v CSS. Nebojím se používat opravdu mohutné kontextové selektory typu:
body.stories#content.col-left.list.item.selected { … }
Hodně tomu pomáhá řegba LESS framework, kde jsou podporovány vnořené definice a tohle se spravuje skutečně krásně a snadno. Jde jen o to, dobře si rozmyslet, co můžu na jaké úrovni nadefinovat obecné, co společné/sdílené a co účelové pro konkrétní kontext; co je vhodné nechat otevřené a nadefinovat až na dolní úrovni, a co předdefinovat už na obecnější úrovni a pak případně přepsat na spodku kaskády. Obvykle to praktikuju tak, že pokud nějaký prvek nebo třídu definuju v CSS už na nejvyšší úrovni, bez kontextu, pak je to univerzální, obecně platné, používané všude jednotně (jednotný styl pro A, H4, P.indent apod.), jinak všechno definuju až v konkrétním kontextu. A klidně i duplicitně, pokud je to ve prospěch přehlednosti a udržovatelnosti stylopisu.

Takže stručně shrnuto: co možná se netrápím složitými názvy tříd, třídy klidně recykluju přes různé kontexty – a v CSS pak minimalizuju obecné definice a dávám přednost přeně cíleným kontextovým selektorům. A rozhodně doporučuju všem popřemýšlet o LESS a podobným nadstavbám.

Od: Vašek Chromický

Vašek Chromický — Wed, 10 Aug 2011 15:00:39 +0000

Dělám to podobně, jen jako oddělovník mezi těmito hypotetickými prefixy/namespacy používám pomlčku. Dá se to hezky štosovat do aleluja a ani třídy jako „content-form-item-errorList“ se pak člověk nezalekne. Navíc můžu mít v projektu třeba tisíc „…-errorList“ tříd, ale nebudou se mezi sebou bít.

U CSSek si myslím, že je nejdůležitější mít v nich pořádek — mít oddělená (mít jasno v tom, co jsou) pravidla pro layout, pro obsah, pro jednotlivé stránky atd., aby se v nich člověk neztratil. Společně se zmíněným pomlčkováním se to pak dá přežít :-).

Je to takový hodně zvláštní svět sám pro sebe. A s preprocesory je to všecko zas úplně jinak…

Od: ramino

ramino — Wed, 10 Aug 2011 14:53:30 +0000

S touto myslienkou som sa pohraval aj ja, ale nikdy som nenasiel konecne riesenie…hlavne elementy su jasne…vnorene odvijam od rodica napr. header-top, header-right, header-left,… potom som presiel na skracovanie h-top -> ht-left, ale pri vacsich weboch som sa uz stracal preto som sa upustil od skracovania.

A tabulky a buttony oznacujem farbou, tzn. farba ktora v tabulke prevlada pouzijem ako nazov triedy.

Vyrazne ulahcuje vymyslanie novych tried aj lesscss.

Od: Vlastimil Fišer

Vlastimil Fišer — Wed, 10 Aug 2011 14:12:39 +0000

Určitě dobré téma na zamyšlení.

Já používám již dlouho zavedený styl, rozdělím si web na několik základních částí (minimálně header, content, footer) a poté vždy pojmenovávám třídy podle těchto částí, např.: .content_title, .fotter_link .. atd.

Ať se daří !
Vlasta Fišer