Autor Zpráva
joe
Profil
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:

body#homepage #content #articles p.perex a.more { color: red; }


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
Profil
Pro mě je lepší napsat vše zvlášť než se potom patlat

.text1{
color: blue;
}

.text2{
color: blue;
}
joe
Profil
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

.highlight { background: yellow; color: black; }


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
Profil
joe:
Já jsem na to zvyklí a tak to budu psát. I kdyby to byl projekt na 1 000 stránek tak to tak budu psát.
Chápej neber mi to co umím.
A já si mezi tím přečtu pravidla.
Plaváček
Profil
joe:

Piš styly jak vyhovuje tobě. Nehledej v tom vědu. Názory se různí, ale tvůj příklad je už přeci jenom příliš extrémní, protože naráží na spoustu věcí, které se mohou časem měnit. Je prostě příliš specifický. A může se ti stát, že narazíš na takzvanou "specifičnost prvků" a zabloudíš v pravidlech. A pak budeš muset nastartovat třeba Excel a spočítat si to. Víc se obecně asi poradit nedá :)
joe
Profil
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
Profil
joe:
Tzn. že výpis na homepage by vypadal jinak, než výpis na jiné stránce.
Já osobně bych v takovém případě styl úvodní stránky nedával do externího souboru.
joe
Profil
jenikkozak:
To bych v tom měl teda docela guláš, že něco mám přímo u HTML, něco v CSS.
jenikkozak
Profil
joe:
To bych v tom měl teda docela guláš, že něco mám přímo u HTML, něco v CSS.
To je věc názoru, podle mne máš takhle zase guláš v externím souboru.
Taurus
Profil
Používám tři styly. Obecný, pro IE a tiskový. Odlišný index komentuju v css a dávám dolů. Pro mě je to stravitelný guláš. A specifikovat třídy tak striktně mi přijde přehnané; v extrémnějších situacích použiju třeba id, třídu a tag v jednom, ale o moc víc už ne. Zanořený sezam bych taky udělal jako li li namísto ul li ul li.
joe
Profil
Taurus:
Proč striktně?

.more
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
Profil
Pardon, ta striktnost patřila k příkladu v prvním příspěvku. Tam si dovolím tvrdit, že pro běžné css stačí např. jen jen p.perex a.more.
joe
Profil
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
Profil
joe:

Pokud se liší úvodní stránka svým stylem od ostatních, pak proč ne - vrzneš ID elementu BODY a máš záchytný bod. Občas to také takhle používám. Ještě k identifikátorům - pokud vím, třeba takový habendorf je nepoužívá prakticky vůbec a jeho kód funguje skvěle :)
joe
Profil
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
Profil
Ano, používat ID pro stylování mi taky přijde lepší nepoužívat. Pokud se ID používají důsledně pouze pro JavaScript a odkazy na kotvy, je to rozhodně plus. Nehrozí vypadnutí části stylu, když budu chtít přejmenovat odkaz (s kotvou) a snadno poznám, že nějaký element používá JS, takže by bylo vhodné ho třeba nemazat. :–)

Když to napíšu příkladem, CSS pravidlo:
No, a teď budeš chtít vytvořit :hover a vznikne ti z toho:
body#homepage #content #articles p.perex a.more:hover, body#homepage #content #articles p.perex a.more:active, body#homepage #content #articles p.perex a.more:focus { color: red; }
… což je docela šílené, nemyslíš? Ale je jasné, že někdy se složitějším selektorům vyhnout nedá.
__construct
Profil
joe:
vytýkání například od zmíněného __constructa mi přijde zbytečné
Zase tu zo mňa nerob nejakého „webového puritána“.

Neefektívne CSS selektory vytýkam iba keď je to fakt postavené na hlavu - v tom včerajšom vlákne to bolo napr. #in ul li ul li - čo musí uznať každý je nezmysel. Tak ako píše Str4wberry je úplne jasné, že niekedy sa im vyhnúť nedá, alebo je to ešte neefektívnejšie.
joe
Profil
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 :-)
joe
Profil
__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
Profil
joe:
Proč tolik? Pokud dělám hover, píšu hover a ne i :active a :focus :-)

A co pohyb po webu klávesnicí? Zrovna tato část je poměrně důležitá, na kterou se dlabe…
joe
Profil
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í.
Str4wberry
Profil
tak by mohl mít zase tečkované orámování

Tak proč ale nevyužít již existující předpis pro :hover
DoubleThink
Profil *
Argument "hned vidím, čeho se předpis týká" je podle mě postavený na hlavu. S tím ti přece má pomoct samotný editor, do kódu takové pomůcky nepatří, stejně jako český evergreen <!-- konec patičky je tady -->
joe
Profil
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é.
Taurus
Profil
joe:
Mohou se v některých vlastnostech pronikat.

Na "české evergreenu" není nic špatného. Kdo si chce komentovat kód (nebo pár hlavních prvků), ať to dělá, já bych ho naopak pochválil. Pspad mi v tomto tolik nepomáhá, komentář je pěkně jasný, zelený...
panther
Profil
joe:
[#19]: „proč si označovat další elementy id nebo třídou, když se k nim takto dostanu?
spíše by to šlo zkrátit na #in li li, ty seznamy jsou tam zbytečné - položka bez seznamu nemá nikde co dělat.

[#21]: „Tak pokud je odkaz aktivní, asi bude vypadat trochu jinak, než když je na něm kurzor.
víš, co dělá pseudotřída :active? Nepleteš si jí s, většinou stejně pojmenovanou, třídou či idéčkem?

Pokud to víš, jaký máš důvod předkládat klávesnicovým brouzdalům jiné odlišení aktivní položky než těm, kteří brouzdají s myší (a schovají se pod hover)?
ra100
Profil *
l564:
alebo -
.text1, .text2 {
color: blue;
}
joe
Profil
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
Profil
joe:
Správě se chová tedy jenom Opera s Firefoxem
Pokud chápu, co máš na mysli, tak Chrome/Safari se chová stejně, jako Opera s Firefoxem a také IE8 ve standardním režimu se chová jako Opera s Firefoxem.
joe
Profil
Bubák:

Kód:
<!DOCTYPE html>
<html>
<head>
<style>
a { color: blue; }
a:active { color: green; }
a:focus { color: orange; }
a:visited { color: black; }
</style>
</head>
<body>
<a href="http://www.example.com" tabindex="1">Example</a>
</body>
</html>


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).

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: