Starší komentáře ke článku: Jak psát CSS přehledně a logicky
Zpět na článek | Úvodní stránka Interval.cz
Datum vložení: 5.5.2004 0:45:37
Ja za dvojbodku nedavam medzeru (napr.: padding:10px), da sa tak usetrit zopar bajtikov...
Datum vložení: 5.5.2004 1:07:39
Pěkné. Jen bych oponoval proti tomu vypisování selektorů v plném kontextu. Jednak se u rozsáhlejších webů upíšeš a CSS bude mít několik desítek KB jen to fikne - a jednak to není úplně zdravé: se specifičností selektorů se dá dost čarovat, o což se tímhle připravíš... Já uvádím vždy jen nejnutnější kontext.
Datum vložení: 5.5.2004 10:02:45
Jak je myšlen ten nejnutnější kontext? Já většinou uvádím kontext nejbližšího nadřazeného strukturálního prvku, abych se v tom vyznal ;-)
Datum vložení: 9.5.2004 14:12:46
S tím kontextem se to samozřejmě nesmí moc přehánět, jinak je to spíš méně než více přehledné. Uznávám, že ten příklad nebyl moc vhodný ;-)
Datum vložení: 5.5.2004 1:42:52
<I>"Doporučení CSS jejich použití jinde nepřipouští."</I>
To zni v cestine imho trosku divne. Mam za to ze to je primo narizeni a ne doporuceni ;)
<a href='http://www.w3.org/TR/CSS21/syndata.html#at-rules' target='_blank'>http://www.w3.org/TR/CSS21/syndata.html#at-rules</a>
Jinak pekny clanek :)
Datum vložení: 5.5.2004 4:32:14
To "Doporuceni CSS" byl terminus technikus, nahraďte si to za jednoslovný výraz "CSS" a smysl bude hned jasný: <I>"CSS jejich použití jinde nepřipouští."</I>
Datum vložení: 5.5.2004 10:36:57
Aha, dekuji za osvetleni pojmu :)
Datum vložení: 5.5.2004 18:04:48
"norma" CSS (a HTML, XHTML, ...) ma status doporuceni (recomandation)
Datum vložení: 5.5.2004 8:11:15
Dobrý článok. Ja som sa pred časom tejto problematike začal venovať trochu zo širšieho záberu, pokúšam sa zistiť, či by sa dala zlepšiť opätovná použiteľnosť a prehľadnosť CSS využitím niektorých konceptov objektovo orientovaného programovania. Píšem o tom vo svojom weblogu:
Opätovná použiteľnosť (re-use) CSS riešení I.
<a href='http://www.hmw.sk/weblog/2004-04.html#1082477277' target='_blank'>http://www.hmw.sk/weblog/2004-04.html#1082477277</a>
Opätovná použiteľnosť (re-use) CSS riešení II.
<a href='http://www.hmw.sk/weblog/2004-04.html#1083228621' target='_blank'>http://www.hmw.sk/weblog/2004-04.html#1083228621</a>
Práve pripravujem finálnu časť s konkrétnym príkladom, na ktorej chcem overiť celý koncept.
Datum vložení: 5.5.2004 9:29:37
Těší mně, že je Vám Interval.cz k užitku ;-)
Datum vložení: 5.5.2004 9:51:57
"K užitku" mi je už štyri roky a Vy si na mňa spomeniete až teraz? :-) Dúfam, že som Intervalu trošičku užitočný aj ja (spätný odkaz z weblogu).
Datum vložení: 5.5.2004 10:01:37
Inu, málokdy se stane, že někdo chválí. Spíš se ozývají nespokojenci ;-)
Datum vložení: 5.5.2004 10:11:11
interval je dobry leda tak pro lamky..
Datum vložení: 5.5.2004 10:40:50
To se divim, že jste tedy neco nenapsal sám. Asi tak jednoduché to zase není, že jo? Lama by sem měla podle Vás psát celkem běžně. Už se tedy těším na Váš článek.
Datum vložení: 5.5.2004 11:17:51
Existuje nějaký důvod proč dávat @-pravidla (např. @media print) do css a ne přímo do html? Tedy proč definovat pravidla pro tisk v jednom dlouhém nepřehledném css souboru a raději to nerozdělit do dvou nebo tří a v hlavičce html potom nepoužít:
<style type="text/css" media="screen">@import "obrazovka.css";</style>
<style type="text/css" media="all">@import "vsechno.css";</style>
<style type="text/css" media="print">@import "tisk.css";</style>
Datum vložení: 5.5.2004 23:37:36
Tím důvodem může být minimalizace počtu http spojení. Samozřejmě někdy to důležité je, jindy ne.
Datum vložení: 5.5.2004 12:51:41
Není to špatný článek, ale myslím, že takovéhle zásady a postupy při psaní CSS postupně napadnou každého.
Já osobně ještě navíc ve stylopisu odsazováním "stromově větvím" jednotlivé zápisy které jsou navzájem logicky spojeny.
#HLAVNÍ
#CAST-HLAVNIHO-BOXU
.další
.a-další
Přecijen se na to lépe dívá a orientace je rychlejší.
Datum vložení: 5.5.2004 12:53:32
sakra ... odsazení se jaksi nezobrazilo :-)
(tedy příklad - <a href='http://www.prestige-m.cz/css/layout.css)' target='_blank'>http://www.prestige-m.cz/css/layout.css)</a>
Datum vložení: 5.5.2004 14:01:07
No asi to neni spatny napad, ale me se to moc doBre necte
Datum vložení: 5.5.2004 20:48:41
pekne css.. :)
ale udrzet to vnorovane formatovani mi prijde u slozitejsich konstrukci dost obtizne.
jen tak na okraj. -- ve vlastni strance je hlavni text tak neuveritelne titerny, ze mam pocit, ze delate stranku jen kvuli grafickemu vzhledu a kvuli sve osobni webdesignerske satisfakci (vypada moc pekne), a ne kvuli tomu, aby si na nich nekdo mohl cist .)
Datum vložení: 5.5.2004 22:02:00
Ale ten pes je hustej :-).
Datum vložení: 6.5.2004 8:35:36
S tou velikostí písma s vámi musím bohužel souhlasit. Je to nehorázně malé - ikdyž třeba pěkné, ale nefunkční. Nějak jsem to opominul při prvotním návrhu a nakonec už se z toho nedalo vymanit...
Příště se polepším. Avšak nečekejte ode mě nějáké fotny 20px - na to já prostě nejsem :-)
Datum vložení: 13.6.2004 7:30:22
ctrl+kolecko
Datum vložení: 5.5.2004 23:39:52
Přijde mi to jako užitečná věc. Už jsem to viděl dříve u Choseho a úplně mě to nadchlo.
Datum vložení: 5.5.2004 14:17:44
dalsi clanek k nicemu. kazdy si vytvori pravidla asi spis podle sebe a podle typu projektu. nepredstavuju si, ze se treba toto bude nekdo ucit. jenom pro zajimavost... ja treba pouzivam i kontextove deleni v css, tj. vse co se tyka hlavniho sloupce je v sekci /* - hlavni sloupec - */, vcetne odstavcu, odkazu, etc. at je to trida, nebo selektor. v pripade kratkych definic se treba nevyplati odsazovat radky, protoze kod vypada prehledneji v jednom nezalomenem, radku, atp. ale jak rikam, kazdy podle sveho, za jedinou smysluplnou normu povazuju <I>#. { xxx; }</I>. zbytek je na kazdem.
Datum vložení: 5.5.2004 18:07:45
s tim nezalamovanim souhlasim, taky mi to prijde prehlednejsi u kratkych definic
Datum vložení: 5.5.2004 18:31:15
Já strukturování nepoužívám a jsem v poho. I když ten layout prestige-m.cz byl fakt dobře udělanej. ;-) Ale článek nejní špatnej.
Datum vložení: 5.5.2004 22:05:09
No vidíte, nakonec to končí tak, že když máte správně psané css (rozuměj bez chyb - chybějící středník apod.), tak třeba PSPad vám to naformátuje podle vašeho gusta. Takže při práci strukturovaně, když je hotovo, vytvořit co nejmenší soubor co do objemu... (a když je potřeba něco upravit, stačí zase naformátovat v PSPadu).
Datum vložení: 8.5.2004 14:09:48
jo, PSPad je fajn...
Datum vložení: 8.5.2004 14:41:22
<I>vytvořit co nejmenší soubor co do objemu... </I>
muzu jen NEdoporucit. pouzival jsem kompilator a po chvili zatrhl. zakonite se totiz stane, ze jednou otevrete kod na nejakem jinem pocitaci bez pspadu, treba v notepadu a pak to bude dost zajimave se v tom vyznat.
Datum vložení: 8.5.2004 16:12:25
Vy <I>...jednou otevrete...</I>, zatímco Vaši návštěvníci s trochou štěstí ten soubor stáhnou tisíckrát denně. Odmítnete-li soubor komprimovat, připravíte je tedy o tisíce korun za přenosy a navíc těmito zbytečnými přenosy zatížíte internet, takže poškodíte všechny jeho uživatele. To se mi nezdá zrovna košer ;-)
Datum vložení: 8.5.2004 21:07:43
chcete zrejme rict, ze ten 1 kb rozdilu komprimovaneho a nekomprimovaneho souboru pripravi zakazniky o tisice korun? v dobe adsl? to je opravdu k smichu. a co penize, ktere zaplati zadavatel webu navic nejakemu designerovi, ktery se bude v tom kodu jen dost tezko orientovat... to uz bude trochu realnejsi, ze.
Datum vložení: 9.5.2004 2:37:56
I kdyby to byl 1 kB, jako že není, už při takovém provozu, jaký generuje třeba Interval.cz, se komprimace vyplatí všem - čtenářům, uživatelům internetu obecně, i nám samotným, protože se výrazně šetří naše přenosové linky a servery.
Pokud jde o zadavatele, nezaplatí ani o korunu navíc. Samozřejmě za podmínky, že si najme profesionála, který k práci používá odpovídající nástroje, umožňující automatickou komprimaci a dekomprimaci kódu. Takovou věc umí i PSPad, který je zdarma, a ještě dokonalejší výsledky lze dosáhnout s jinými nástroji. Ostatně, není problém udržovat neoptimalizovanou a nekomprimovanou verzi zdrojového kódu pro práci a na web umisťovat pouze komprimovanou a optimalizovanou verzi - přesně tak, jak se to dělá při vývoji non-web-based aplikací ;-)
Datum vložení: 9.5.2004 4:07:29
vidim, ze tomu asi rozumite vice nez ja. ocekavam, ze si tedy co nejdrive zkomprimujete kod intervalu.czetu a usetrite mou korunu navic. doporucuju nastroj <B>html compress</B>.
Datum vložení: 9.5.2004 10:53:56
Máte pravdu, asi tomu skutečně rozumím víc než Vy. Kdybyste se totiž obtěžoval si otestovat svou komunikaci s naším serverem, zjistil byste, že jsou všechny stránky automaticky komprimovány metodou GZIP. Titulní stránka, která má díky kombinaci XHTML a CSS pouhých 50 kB, se pomocí této metody komprimuje na méně než 10 kB ;-)
Datum vložení: 9.5.2004 20:57:54
Tak ted jste me uplne zmatl. Schvalne jsem otestoval, dokonce firewall vypnul, ale nezda se, ze by moje Mozilla dostavala gzipovane stranky, i kdyz hlavicku pri GETu posila... Kontroloval jsem jednak v Live HTTP headers odezvu serveru, jednak v NetworkActiv PIAFCTM pakety, a v nich je taky stranka v cistem textu. Jak se tedy da overit ze jsou stranky komprimovane?
Datum vložení: 9.5.2004 22:18:03
Zkoušel jsem to a funguje to (Content-Encoding: gzip). Je to sice nightly build (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8a) Gecko/20040507), ale v tomhle by by rozdíl být neměl. Co přesně posílá váš prohlížeč v hlavičce Accept-Encoding?
Datum vložení: 9.5.2004 23:16:39
Accept-Encoding: gzip,deflate
A odpoved serveru:
Content-Type: text/html, prip. text/css
Verze Mozilla 1.6
Leo
Datum vložení: 10.5.2004 8:55:57
Hlavička Content-Type není důležitá, tam bude vždy text/html, případně s nějakými opičkami okolo. Podstatná je hlavička Content-Encoding. Ale jak už jsem napsal, mně to komprimuje. Napadá mne jen, že by mohl server komprimovat soubory až od určité velikosti (já to zkoušel na titulní stránce).
Datum vložení: 10.5.2004 9:08:50
Server transparentně komprimuje všechny soubory, bez ohledu na velikost. Uživatelé Mozilly by neměli mít problémy, ty naopak mohou mít uživatelé MSIE6sp1 - nedávno se zjistilo, že v určitých verzích nedokáže s komprimovanou stránkou správně pracovat, takže například nerozezná jazyk a podobně. Záplata už snad vyšla, jenže kdo záplatuje? ;-)
Datum vložení: 10.5.2004 10:21:36
Tak uz jsme na to prisel - aby se hlavicka Accept-Encoding: gzip,deflate dostala z Mozilly na server, musim vypnout nejenom Norton Firewall, ale i Norton Antivirus. Pak skutecne prijde gzipovana stranka, ale to mi skoro urcite nestoji za to riziko. Nevite nekdo jak se chovaji jine soft firewally? Leo
Datum vložení: 10.5.2004 13:16:36
Používám oba tyto programy a problém jsem nepozoroval. Možná jen chybné nastavení? ;-(
Datum vložení: 10.5.2004 14:32:16
Tezko rict, ale prosel jsem vsechna mozna nastaveni a nic nenasel (i kdyz Norton zrovna prehlednosti GUI nevynika) a na internetu naopak nasel nekolik prispevku v diskuznich forech o tom, ze Norton neumi proverovat gzipovane stranky takze blokuje radsi primo hlavicku pozadavku, aby server poslal stranky nekomprimovane... Zkusim se poptat u tech. podpory. Leo
Datum vložení: 10.5.2004 19:15:04
Aha, zdá se, že na stroji, na němž jsem kontrolu prováděl, byl chybně nainstalovaný NIS, takže vlastně vůbec nic nedělal ;-(
Datum vložení: 10.5.2004 20:12:28
Trochu jsem badal na netu, a treba Kerio pry umi i gzipovane stranky takze to nelikviduje v requestu, ale diskuze na jejich strankach me zrovna nepresvedcila ze je to jinak kvalitni a spolehlivy produkt. Nejake jine tipy, kdyz uz tady rozvijime OT? :-)
Skoda s temi firewally, jinak je komprimace fajn vec.
Leo
Datum vložení: 11.5.2004 8:03:16
Já vcelku ale nechápu, proč nepropouští komprimované stránky, když běžné komprimované soubory tyto nástroje zkontrolovat umí ;-(
Datum vložení: 11.5.2004 14:50:54
Netusim, ale proste to tak (alespon u nekterych fw) je. Zkousel jsem v Norton Antivirus vypnout skenovani komprimovanych souboru, ale nepomohlo. Leo
Datum vložení: 12.5.2004 3:53:11
Pouzivam Kerio Personal Firewall 2.1.5 a Mozillu 1.6 a stranky se posilaji gzipovany.
Datum vložení: 27.7.2004 12:55:13
rel$ mluvil o necem jinem... program, ktery jmenoval, a jemu podobne provadi primo s kodem prapodivne operace spocivajici v mazani "prebytecnych" mezer, novych radek a nahrazovanim napr. definic pro nedelitelne mezery, obycejnymi mezerami. Tim vznika mensi jednoradkovy kod... naprosto nepouzitelny a jiz nerozpakovatelny.
Datum vložení: 6.5.2004 0:01:58
Nechci působit jako kverulant, ale dovolil bych si zpochybnit téměř všechno, o čem tento článek pojednává. S jedinou důležitou výjimkou -- komentáře jsou opravdu moc fajn.
Doporučení udávaná v článku mi přijdou taková moc silná. Kdyby Martin napsal něco ve smyslu "dělám to takhle a je mi fajn", tak to beru. Styl "dělejte to tak a tak", kterým to na mě působí, mi přijde trochu nepatřičný. Ono se to totiž dá dělat i úplně jinak.
Takže pořadí prvků -- úplná s prominutím podružnost. Napadlo vás třeba někoho pravidla nesdružovat podle selektorů, ale sdružovat je podle definovaných vlastností? Třeba na jednom místě mít deklarace všech barev dokumentu, o kus dál všechno pozicování, o kus níže všechny fonty. Dá se to tak vcelku vesele dělat.
Nesouhlasím s tím, že je dobré zalamovat řádek za každou deklarací. Já vím, ono to pak vypadá lépe, ale zase se toho na obrazovku pak vejde mnohem méně. Odsazování a pečlivé zalamování řádků je potřeba dodržovat v Céčku, v HTML, v PHP, v Pythonu nebo v Javascriptu, protože je tam všude kladen důraz na strukturu a zanoření. Napadlo vás ale někdy, že CSS je jazyk s minimální strukturou a téměř bez zanoření elementů? Rezervovat každé deklaraci jeden řádek mi tam přijde zbytečné.
Já třeba provozuji druhý extrém -- dávám dlouhé zápisy celé na jeden řádek. Možná se vám to může jevit jako prasácký přístup, ale zase díky tomu, že stylopis sdružuji podle typu vlastností, tam tolik až tak dlouhých řádků nemám. Výhoda je ta, že vidím na jedné obrazovce mnohem více věcí.
Když si projdu další zmiňovaná témata: Středník patří za každou deklaraci = souhlas. Dodržujte pořadí vlastnosí = úplná blbost. Syntaxe ID selektorů = zpravidla nepodstatné. U selektorů uvádějte předky = pochybné (na přehlednost je mnohem lepší to odsazování, jak to výše uvádí Sqee), místy to může přinášet problémy (pravidla jsou pak příliš silná a hůře se kontextově přebíjejí).
Takže Martinův článek shledávám neobyčejně cenným jako příklad toho, jak jeden zkušený autor detailně pracuje se zápisem stylů. Jako doporučení bych ale článek "nedoporučil".
Datum vložení: 6.5.2004 7:52:43
Téměř se vším cos napsal musím souhlasit, taky dávám definici pro jeden prvek do jednoho řádku, prvky se pak snadněji hledají a najít nějakou hodnotu přímo na konkrétním řádku není až zas takový problém
pořadí vlastností se snažím dodržovat přibližně podobné, ale nijak na tom nelpím, ty věci co se častěji mění dávám na začátek, hacky a věci jen pro konkrétní browser nakonec
středník taky pro jistotu dávám všude
na cačítek dávám nejobecnější definice, html, body Hčka .. pak dělám "sekce" prvků spíš podle jejich umístění v dokumentu/dokumentech, tedy menu, kontakty, aktuality....
Datum vložení: 6.5.2004 10:08:08
<I>"Doporučení udávaná v článku mi přijdou taková moc silná. Kdyby Martin napsal něco ve smyslu "dělám to takhle a je mi fajn", tak to beru."</I>
Já jsem se o napsání toho "dělám to takhle a je mi fajn" pokoušel na začátku článku. Taky zde říkám, že ta pravidla nikomu nevnucuji a záleží na tom, jak se to bude zdát přehledné každému z nás. Nepovažuji tento článek za jedinou správnou cestu. Nechtěl jsem to již v článku zdůrazňovat, aby mi text moc "nenabobtnal".
Vždycky, když jsem se učil nějaký nový jazyk, tak jsem byl rád, když se autor věnoval i tomu, jak ho co nejlépe psát -- např. že v C je dobré odsazovat obsah větví if o dvě mezery dál. Když v určitém jazyku jsem začátečník, obvykle nejsem schopen psát ho kvalitně s ohledem na jeho ostatní aspekty, protože ho celý ještě neznám. U CSS se ale autoři pravidlům pro psaní příliš nevěnují, proto jsem zkusil napsat něco sám.
Uznávám, že CSS nemá tak pevná pravidla jako jiné jazyky. Myslím, že tento článek ale může být přínosný pro začátečníky v CSS nebo pro lidi, kteří se CSS primárně nezabývají. Pokud je někdo zkušený autor CSS, potom má pravděpodobně vytvořena vlastní pravidla pro jeho psaní a tento článek by měl brát spíš jako pár námětů k zamyšlení nebo ho úplně přeskočit ;-)
A jinak díky Dušanovi i ostatním za rozšíření článku v diskusi.
Datum vložení: 6.5.2004 13:50:28
mimochodem - to jsem se nějak nedočetl - jak je to s psaním velkých a malých písmen v css elementech? Je to case sensitive? doporčujete dodržovat nějaký jednotný a rozlišitelný způsob ala všechno velké a hodnoty malé či tak něco?
Datum vložení: 6.5.2004 22:04:04
Doporučuji náhled do doporučení W3C - CSS je case-sensitive, což znamená, že kupříkladu "DIV" není totéž co "div" ;-)
Datum vložení: 6.5.2004 15:45:40
Mno. Kdyz jsem editovat CSS styly, ktere nebyly za kazdou deklaraci zalomeny, tak jsem se obsypal, protoze to bylo tak neprehledne, ze prvni, co jsem udelal, ze tam to zalomenivsude rucne pridal.
Datum vložení: 9.5.2004 12:39:29
A proč ručně? :-). Viz výše.
Datum vložení: 9.5.2004 21:02:48
Polovina prispevku se tady mota kolem zakladniho nedorozumeni - muzete si lokalne CSS tvorit prehledne a odsazovane, ale na server by clovek mel posilat co nejuspornejsi variantu. Podobne jako obrazky mate v originale na disku treba v TIFu nebo PSD, ale na server je ulozite do JPG. Prohlizece budou uspornejsi variante (deklarace na jednm radku, bez odsazeni apod.) rozumet, a ti, co se stouraji v kodu nemusi - nebo si to CSS muzou prohnat nejakym zprehlednovacem. Leo
Datum vložení: 15.7.2004 10:39:02
Ahoj, potřeboval bych lehce poradit: nastavím si vlastnosti stylů textu (velikost, barva, typ fontu), v IE mi to normálně funguje, ale v Opeře nebo v Mozzile se mi texty zobrazují jako bílé a v systémovém písmu. Co s tím?
Díky za radu.
Datum vložení: 15.7.2004 11:44:28
Prosím, nespamujte články nesouvisejícími dotazy, používejte Interfórum - <a href='http://interforum.interval.cz' target='_blank'>http://interforum.interval.cz</a> ;-)
Datum vložení: 24.8.2004 16:51:48
clanek bych pochvalil, ikdyz je pravda ze by na tyto pravidla mel prijit asi kazdy sam... Doplnil bych to, ze nazvy id a trid je vzdy lepsi psat v anglickem jazyce - pokud si vase css bude cist navstevnik z nejake cizi zeme, sice se v krasne estetickem kodu vyzna ale trida HORNIBOXIKNANADPISY mu uz pramalo rekne...
Narazil jsem ale ve clanku na jeden problemek kompatibility. Je sice prehlednejsi psat pred id i html prvek kteremu je selektor prirazen (ul#menu) , ale pokud vim tak v IE toto spatne rozeznava a odmita definici cist...