<!–texy–>V rámci své snahy otevřít jednomu klientovi oči, jsem mu dal odkaz na tento post a na SEO Servisní Analyzátor.

Klient se totiž už nějaký ten čas v dobré víře nimrá ve zbytečnostech na svém webu, které se snaží optimalizovat podle rad Seo servisu a jemu podobných (už máme na Seo servisu 94% z analýzy zdrojového kódu). .o)

Poděkoval za článek, prý je zajímavý. Zkoušel prý i doporučený Seo Servisní Analyzátor a otestoval svou doménu a také žádná sláva. Nyní se mne ptá, co by se s tím dalo udělat.

A hmmm… mně je trapné přiznat, že to byl prostě jen vtip a že mne nenapadlo, že si toho nevšimne. .o)

Jen zatím nevím, jak web vylepšit tak, aby měl dost ohně, vody i vzduchu…

PS: dá se web nastavit tak, aby v tom SEO Servisním analyzátoru dostal 100%? :o))

<!–texy–>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ý.

<!–texy–>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.

<!–texy–>Musím priznať, že občas využívam SEO analyzátor aj keď len zo zvedavosti, akéže mi to vyhodí číslo. Z ich rád si vôbec nerobím starosti, zväčša sú to nepodstatné odporúčania.

<!–texy–>K Petrovu [#4] dopním, že mám v podstatě podobný styl, ale selektory jako "body.stories #con­tent .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.

<!–texy–>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.

<!–texy–>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.

<!–texy–>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…

<!–texy–>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.

<!–texy–>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