(ne) efektivní způsob zápisu CSS

Všimnul jsem si, že tady __construct a možná i někdo jiný vytýká neefektivní zápis kaskádových stylů. Odkázal mě na tuto stránku a když jsem si prošel, o čem je, tak s tím souhlasím (že se to tak děje, a že to možná je neefektivní), ale záleží na tom? Podle mě ne. Jedná se o pár milisekund, nikdo to nepostřehne.

Článek je tedy o tom, jak se vyhodnocují CSS pravidla - zprava doleva.

Zajímalo by mě, jestli to někdo řeší? Upřímně, raději si napíšu přehledné HTML s přehlednými názvy, než se starat o to, zda to bude efektivní v CSS, když to stejně nikdo nepozná. Pár milisekund asi nehraje moc velkou roli...

Když to napíšu příkladem, CSS pravidlo:



nebude v CSS efektivní, souhlasím, ale kdo to pozná?

Radši budu zapisovat styly takto a kdykoli jej otevřu, vyznám se v nich, než řešit pár milisekund. Váš názor? Jak tedy píšete vaše CSS?


(osobně mi to přijde jako nesmysl, řešit něco takového :-))

l564:
To sice psát můžeš, ale ve složitých projektech by tě za to rádi určitě neměli (aspoň já ne).

Dám zase příklad



tedy něco na způsob, jako píšeš ty. Problém je v tom, že pokud tuto třídu použiješ jinde, musíš ji zase přetlouct jinak, případně nějaké parametry nastavit na výchozí. A proto je podle mě lepší, to specifikovat hned, k čemu se to váže, protože pak se v tom lépe vyznám a přijde mi to hodně přehledné.

l564:
Nikomu nic neberu :-) Samozřejmě si to piš tak, jak chceš. Jen jsem ti chtěl napsat, v čem vidím problém. Protože pak podle mě nemají třídy moc smysl a mohl bych pro všechno vymýšlet názvy pro ID.

Pokud to totiž děláš tak, jak píšeš, tak nemůžeš ty třídy moc použít už dál, v jiném bloku, kde by měly sice stejný význam, aly byly by trošku změněné, ne? Nebo je pak přestyluješ pro ten daný blok, kde to je jiné?

Plaváček:
Píšu, jak chci :-) Ptám se tím, jak to dělají i jíní v oboru :-)

„ale tvůj příklad je už přeci jenom příliš extrémní“
Myslíš? A jak by jsi to tedy udělal, pokud by třeba existovalo více odlišných stránek (odlišených podle ID u body)? Tzn. že výpis na homepage by vypadal jinak, než výpis na jiné stránce.

jenikkozak:
To bych v tom měl teda docela guláš, že něco mám přímo u HTML, něco v CSS.

Taurus:
Proč striktně?

představuje odkaz na více informací. Takový může být například u samotného výpisu článků, kde se vypisuje jen perex. Dále stejný název může být použitý v side baru u novinek, dál může být použita pro vypsání všech komentářů u produktu (pokud se jich vypisuje jen nějaký počet), pro vypsání dalších podobných produktů... A pro každý případ může být nastylována trošku odlišně - a není třeba vymýšlet žádné další názvy, ne?

Taurus:
Na to jsem odpovídal, k tomu k příkladu v prvním příspěvku, tzn. že by to nestačilo :-)

Na homepage může být v obsahu někde seznam článků, u každého z nich bude krátký textík + odkaz "více" - tj. ta třída .more . Pod tímto seznamem může být odkaz "Zobrazit články" - zde zase může být použita třída s názvem .more, ale už může vypadat trochu jiak.

Plaváček:
Vím o tom, že někteří ID nepoužívají, sám je používám pro takové ty hlavní bloky :)

Jinak se ta diskuse strhla trochu jiným směrem, než jsem chtěl. Zajímalo mě, jestli taky někdo kouká na efektivnost svého CSS, pokud ho píše, takže myslím, že každý raději píše tak, aby to pro něj bylo čitelné a vytýkání například od zmíněného __constructa mi přijde zbytečné :)

Str4wberry:
„No, a teď budeš chtít vytvořit :hover a vznikne ti z toho:“
Proč tolik? Pokud dělám hover, píšu hover a ne i :active a :focus :-)

„což je docela šílené“
Šílené mi to nepřijde, dlouhé ano. Ale zase vím, hned z CSS, kde se ten odkaz nachází. A pokud by k něčemu takovému došlo, dávám za čárkou enter a pak to mám hezky pod sebou :-)

__construct:
Tak ne, já to tak nemyslel. Ale zatím jsem si toho u nikoho jiného nevšiml. Samozřejmě máš s tím pravdu, že to neefektivní je, ale záleží na to? :-)

„v tom včerajšom vlákne to bolo napr. #in ul li ul li - čo musí uznať každý je nezmysel“
Tak právě tohle mi jako nesmysl nepřijde. V té včerejší stránce by to možná šlo upravit, ale proč si označovat další elementy id nebo třídou, když se k nim takto dostanu?

Taurus:
„A co pohyb po webu klávesnicí?“
Tak pokud je odkaz aktivní, asi bude vypadat trochu jinak, než když je na něm kurzor. Pokud má focus, tak by mohl mít zase tečkované orámování.

DoubleThink:
To samozřejmě má pomoct, ale pokud používáš celkem obecné názvy tříd, nemůžeš vědět, jestli se stejná třída nepoužívá i někde jinde.

Str4wberry:
„Tak proč ale nevyužít již existující předpis pro :hover…“
Jak, když by se dva zápisy lišily, tak je to přece zbytečné.

panther:
:active by měla být jen u používání myši, to že to některé prohlížeče nezvládají, je věc jiná :-)
Pokud se pohybuješ po odkazech klávesnicí, odkazy získávají fokus.

Pokud tedy pseudotřídu :active nebudu uvádět vůbec (což nědělám snad nikde), neděje se vůbec nic, protože styly se zdědí od "klasického odkazu".

Navíc využití :active nevidím ani při myši, protože pokud klikneš na odkaz, zase má (resp. měl by mít) fokus. Takže kdy by pak mělo fungovat to :active? ;-) Správě se chová tedy jenom Opera s Firefoxem, ostatní prohlížeče to podle mě dělají špatně.


Z toho vyplývá, že pokud by se něco mělo seskupovat (ve stylech), tak to jsou pseudotřídy :focus a :active, ale samotný odkaz, na který nebylo kliknuto už ne. Pokud to někdo chce mít oddělené. Takže to co uvádí v [#16] Str4wberry je zbytečné, ne? A stačí jen pro a:hover.

Bubák:

Kód:


Opera:
myš: modrý - po kliknutí oranžový a navštívený černý
klávesnice: modrý - po získání focusu (jen pokud má nastaven tabindex) oranžový a navštívený černý
--> nikde se neobjevuje zelená barva

Firefox
stejné jako Opera

Webkit (Chrome, Safari, ...)
stejné jako Opera

IE > 7
stejné jako Opera

IE <= 7
po fokusu/kliknutí na odkaz zezelená


Jen jsem tím chtěl říct, že není ani třeba nastavovat odlišné barvy při :active nebo :focus u odkazů. Třeba Opera, pokud nemá u odkazu tabindex, tak se na něm ani nezastavuje při tabulátoru (to se ale myslím dá někde zvolit).