Dnes Interval vzpomenul článek Michaela Martina o správném psaní CSS kódu. Za ty léta jsem si vypracoval pár tipu, které mě vyhovují a které by mohli být zajímavým příspěvkem do diskuse o psaní stylů. Myslím, že se nedá říct, co je v tomhle dobře a co špatně. Spíše jen to co vám vyhovuje lépe a co více.
První věc kterou udělám, je vytvoření souboru default.css, kde jsou obecné stylopisy platné pro jakýkoliv web
- resetování
- třída reset
- floatovací a centrovací třídy
- .. atd.
Myslím, že můj současný soubor je kompilát ověřených metod a vypadá nějak takto:
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
.reset
/* Focus Styles */
:focus {outline: 0;}
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* Document settings */
html, body {text-align: center;}
/* Common classes */
.reset {display: block; font-size: 0px; line-height: 0px; height: 0px; overflow: hidden; clear: both;}
.floatLeft {float: left;}
.floatRight {float: right;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
Píšu “inline”
Z toho jste pravděpodobně zjistili jak píšu styly já. Píšu je “inline” tedy na jeden řádek. Proč? Protože je to přehlednější. Přehlednost to ztrácí u složitějších zápisů, to přiznávám. Ale takhle mě to vyhovuje.
#menu a {text-decoration: none; color: #57361e; text-transform: uppercase; font-weight: bold; font-size: 14px;}
Zajímavý je kompromis (který jsme zatím nevyužíval), který spočívá v tom, že se u složitějších stylopisů se na každý řádek vkládají vlastnosti spolu související. Například takto:
#footer {background: url(../images/footer.jpg) no-repeat;
width: 940px; height: 60px; margin-top: 10px;}
Vytvářím sekce
Ano, vytvářím sekce stylů pro přehlednost. Tedy pomocí komentářů si označují sekce jako je například: layout, menu, headings atp. A jak jste si všimli, píšu anglicky, je to totiž srozumitelnější.
/* Layout */
body {font: 1em arial,sans-serif; color: #282828; background-color: #ffffff;}
/* Event */
#main #content .event {width: 510px;}
Strukturování
Začínám experimentovat se strukturováním (odsazením) zápisů pro přehlednost dědičnosti. Vypadá to například takto:
#main {width: 750px; float: left;}
#content {width: 530px; float: left; margin: 3px 0 0 0; padding-left: 20px;}
#sidebar {width: 200px; float: left;}
#footer {background: url(../images/footer.jpg) no-repeat; text-align: center; font-weight: bold; width: 940px; height: 60px; margin-top: 10px;}
#footer h2 {font-size: .9em; text-transform: uppercase; padding-top: 5px;}
#footer p {font-size: .7em;}
A to je myslím ve stručnosti vše. Netřeba článek zbytečně prodlužovat, snad někomu pomůže.
Jsem konzultant online marketingu a specializuji se na SEO a inbound marketing. Od roku 2009 jsem pracoval jako senior SEO konzultant pro největší klienty agentur Ataxo a H1.cz. Úspěšně publikuji, školím a přednáším o online marketingu, který doopravdy miluju. Jsem důsledný, zodpovědný, kritický, se smyslem pro detail.
No, inline psaní stylů (stejně jakékoli jiné psaní kodu na řádek) je imho jedna z těch velkých prasečin, ale když ti to vyhovuje a ten styl pak po tobě nemusí číst nikdo další, proč ne. Ale kdybych ho po tobě musel číst já, tak bych tě za to nenáviděl 🙂
Mě to jako prasečina nepřipadá, nemám alespoň několik stran kódu, ale třeba jen jednu. Prostě mi to přijde přehlednější. Například dát tohle na 4 řádky přijde zase jako prasečina mě:
h1, h2, h3, h4 {
font: 100% Arial, sans-serif;
font-weight: bold;
}
nemyslel jsem
h1,h2 {
neco;
neco;
}
ale h1,h2 {neco;neco;}
Já vím, ale přesto – pro mě osobně – je mnou zmiňovaný zápis v předchozím mém komentáři, mnohem více problematický, než to zapisování stylopisu na jednom řádku.
No, jak se to vezme. Nevím co ti vadí na tom, když je kód dlouhý. Vezmi si třeba běžný dokument. Taky vynecháváš mezery za interpunkcí (.,-) jen proto, aby to bylo kratší? Ne, chceš aby to bylo čitelnější.
Pro mě je mnohem lépe čitelné, když vím kde každý příkaz začíná. Pokud to píšeš do řádku, je to jen strašně dlouhá nudle, která se sice dá trochu vylepšit mezerami za středníky, ale furt je to pro mě dlouhá nečitelná nudle. Navíc ti to po pouhých pár příkazech začne lézt z obrazovky, a pořád srcollovat doleva doprava kvůli stylům, no na to fakt nemám nervy.
když to je takhle pod sebou, jako píšu v mém minulém, hned vidíš kde co začíná. Tedy, já to vidím hned. A že to je o pár řádků delší, koho to zajímá?
Takže jak říkám, ty si to piš jak chceš, ale většina lidí co znám a pohybují se okolo psaní jakýhkoli kódů, by ti tohleto omlátili o hlavu ať to přepíšeš, a pak až že to budou číst. Ani já bych to po tobě nečetl 🙂
Délka prodlužuje dobu nahrání dokumentu. Vzhledem k tomu co vím o Google Caffeine, tak se snažím o ideální poměr přehlednosti a velikosti externího souboru.
Řekl bych, že se prostě neshodneme v tom co je a co není přehledné. Mě třeba nikdy zápis nelze ven z obrazovky – dobrý CSS zápis by neměl být IMHO příliš dlouhý, měl by vhodně užívat dědičnosti.
Mám zkušenosti, že podobným stylem píšou i lidi v profi firmách (http://static.www.cebyt.cz/noRW_layout/cebyt-layout.css?3.12.360) a všimni se, že žádný styl neleze z obrazovky).
Já souhlasím s tím, že druhý zápis je také přehledný, ale nesouhlasím s tím, že můj postup ke “prasárna”.
však já neříkám že celý tvůj postup je prasárna, jen tohle psaní do řádku, a navíc je to jen můj názor. A nepřehledné to prostě pro mě je. Snad jedině kdyby všechny názvy před {} byly stejně dlouhé, pak možná bych byl ochoten trochu ustoupit. Ale to v praxi není, a na simulaci by se použilo zbytečně moc bílých znaků.
Hele s tou dýlkou, zápis:
a {aaa}
se oproti zápisu
a {
aaa
}
liší ve 2 nebo ve 4 znacích (buď konec řádku \n nebo \r\n), což imho takovou velkou dobu nahrávání, v běžně dlouhých css, negeneruje. V JQuery (jacvascript) se to dělá tak, že jsou dvě verze, development a release. Ta development je čitelná, a ta release je napsaná na jednom řádku (odmazané konce řádku). Když už bys tedy chtěl minimalizovat velikost, udělal bys to takhle, nějaké hybridní řešení toho moc rozdílu neudělají.
To že se něco dělá v profi firmách, není ještě zárukou, že to tak jen nejlepší, hlavně v IT. Když už takhle, jak ty říkáš, někdo bude css psát, je už samozřejmost, že to z obrazovky nepoleze.
Taky možná ty lidi o kterých mluvíš v profi firmách, píší jen css, html atd, podobně jako ty, a to pak je jedno, jestli je to tak jak říkám já nebi ty, víceméně. Třeba se nikdy nepotřebovali orientovat ve zdrojáku, kterej má pár desítek tisíc řídků, a tam už se prostě jinsté konvence dodržovat musí, jinak by se v tom nevyznal nikdo. A nesejde na tom, co se zdá přehledné tobě, ale na tom, co se dohodlo že se bude používat. To ti pak přejde do krve.
Takže, říkám ještě jednou, neříkám že takhle psát nemůžeš, nebo že je to špatné. Podle mě to je ale nepřehledné a prasárna, nečetl bych to po tobě, a na stejném se shodmeme s lidmi ze školy.
“Délka prodlužuje dobu nahrání dokumentu.” A co použití nějakého kompresoru nebo GZIPu na pubu? Btw. pokud používáš na všech projektech výše uvedený default.css, tak je to imho oproti způsobu zápisu CSS opravdová “prasárna”. Způsob zápisu je problém čistě subjektivních preferencí.
Pokud použiješ kompresi je to zase na úkor přehlednosti, tedy jak ji chápu já.
Ad prasárna – je to obvyklý postup u profesionálních internetových firem jako je třeba Et netera. Podívej se třeba na linkování stylů zde http://www.spravnykrok.cz/.
Špatně jsi mě pochopil. Komprimovaná nebo gzipovaná je vždy verze, která jde ven k uživatelům, ne ta, kterou edituješ. Co se týče toho resetu, pro mě je to prasárna, pokud resetuješ bezhlavě snad všechny tagy, které HTML má. Resetovat bys měl jen tagy a vlastnosti, u kterých je to potřeba. Přijde mi divné, že na obranu inline zápisu CSS použiješ tvrzení “délka prodlužuje dobu nahrání dokumentu” a přitom zamoříš CSS hromadou naprosto zbytečných znaků. Namátkou – kdy jsi naposledy použil tagy jako applet, ins, kbd, del? Proč nastavovat defaultně tagu BODY bílé pozadí a černý text? Tohle imho do univerzálního CSS nepatří, pokud tedy neděláš jen weby používající tyto barvy pro text a pozadí. Proč u TABLE nastavuješ border-spacing, když předtím definuješ border-collapse: collapse (border-spacing je v tomto případě browserem ignorován)? A dalo by se pokračovat…
Aha, pak souhlasím, to je dobré řešení.
Ohledně toho resetu, to ani nebyl můj nápad, myslím, že jsem to převzal od Nielsena. Ale souhlasím, že to není optimální řešení.
Ahoj.
Jak bys udelal v css okraje bunky tak aby mela margin 0 20px 20px 0?