Jak psßt CSS p°ehledn∞ a logicky
KaskßdovΘ styly (CSS) jsou na souΦasn²ch webech Φφm dßl tφm vφce vyu₧φvßny, a proto se zv∞tÜuje i rozsah a komplexnost stylov²ch p°edpis∙. Je tedy stßle nutn∞jÜφ psßt CSS tak, abychom se v n∞m vyznali, a to i po delÜφ dob∞ nebo ve v∞tÜφch t²mech. A prßv∞ o tom je tento Φlßnek.
┌vodem bych rßd p°edeslal, ₧e v tomto Φlßnku budu mluvit p°evß₧n∞ o obecn∞ v₧it²ch postupech, jak psßt CSS p°ehledn∞ a logicky. V n∞kter²ch p°φpadech ale budu vychßzet i ze sv²ch zkuÜenostφ a z toho, jak to p°ipadß logickΘ a p°ehlednΘ mn∞ osobn∞. Samoz°ejm∞ tyto postupy nikomu nevnucuji ani netvrdφm, ₧e bez nich bude vaÜe CSS nep°ehlednΘ. Pokud ji₧ mßte za₧ity vlastnφ postupy, klidn∞ u nich z∙sta≥te - d∙le₧itΘ je, aby vßÜ zßpis byl p°ehledn² a logick² pro vßs (a p°φpadn∞ pro n∞koho, kdo bude CSS zßpis po vßs Φφst).
Struktura stylovΘho p°edpisu
Nejprve si °ekneme n∞co o tom, jak stylov² p°edpis uspo°ßdat. Stylov² p°edpis je tvo°en pravidly a takzvan²mi @-pravidly (et-pravidly).
- Na ·plnΘm zaΦßtku by se m∞la nachßzet @-pravidla @charset a @import (v tomto po°adφ). DoporuΦenφ CSS jejich pou₧itφ jinde nep°ipouÜtφ.
- Jako dalÜφ by m∞la nßsledovat pravidla formßtujφcφ prvky obecn∞ (tedy bez identifikßtor∙ a t°φd) - jako prvnφ pravidlo pro <body> a dßle pravidla pro:
- nadpisy,
- seznamy (<ul>, <ol> a <dl>),
- odstavce,
- odkazy,
- v²znamovΘ prvky (<em>, <dfn>, <cite>, <abbr>, <blockquote>...),
- formulß°ovΘ prvky (<form>, <fieldset>, <input>...),
- tabulky...
- Dßle je vhodnΘ uvΘst obecnΘ t°φdy - tedy ty, kterΘ pou₧φvßme u r∙zn²ch prvk∙ a nejsou s ₧ßdn²m spojeny, nap°φklad:
.zvyrazneni {
font-weight: bold;
} - Jako dalÜφ p°ipadajφ pravidla formßtujφcφ t°φdy spojenΘ s urΦit²m prvkem:
p.kod {
font-family: monospace;
} - Jako poslednφ potom uvßdφme pravidla pro konkrΘtnφ prvky urΦenΘ sv²m id:
#navigace {Tyto prvky byste m∞li uvßd∞t v urΦitΘm po°adφ, nap°φklad nejd°φve zformßtovat logo, potom hlavnφ obsah strßnky a nakonec navigaci - m∙₧ete pou₧φt i po°adφ, v jakΘm se prvky nachßzejφ v k≤du strßnky.
border: 1px solid blue;
}
Pokud se ve vaÜem p°edpisu vyskytujφ @-pravidla @media, doporuΦuji je uvΘst na ·plnΘm konci p°edpisu, dφky Φemu₧ budou moci pravidla zde uvedenß bez problΘm∙ p°epsat ostatnφ pravidla v p°edpisu (kterß jsou obvykle urΦena pro vÜechna mΘdia).
Jak psßt pravidla
Pro pravidla se obvykle pou₧φvß tento zßpis:
prvnφ deklarace;
druhß deklarace;
...
}
Tedy nap°φklad:
font-size: 120%;
font-weight: bold;
}
Deklarace jsou odsazeny dv∞ mezery od okraje, co₧ je obvykle pova₧ovßno za "tak akorßt". Pou₧φvat ale samoz°ejm∞ m∙₧ete i menÜφ nebo v∞tÜφ odsazenφ.
D∙le₧itΘ je, ₧e se selektor i deklarace vlastnostφ nachßzejφ na samostatn²ch °ßdcφch. To pravidlo zp°ehled≥uje - na prvnφ pohled vidφte, o kter² prvek se jednß a kterΘ vlastnosti jsou nastavovßny. Je zde takΘ prostor pro komentß°e, kterΘ se mohou nachßzet hned vedle selektoru nebo vedle deklarace, kterΘ se t²kajφ.
St°ednφk pat°φ za ka₧dou deklaraci
DoporuΦenφ CSS °φkß, ₧e st°ednφk slou₧φ jako odd∞lovaΦ jednotliv²ch deklaracφ, za poslednφ deklaracφ v pravidle se tedy uvßd∞t nemusφ. Jß vßm ale doporuΦuji uvßd∞t ho za vÜemi deklaracemi, tedy i za tou poslednφ. Jinak se zßkonit∞ stane, ₧e budete muset Φasem jednu deklaraci p°idat a na st°ednφk u₧ zapomenete:
color: gray;
font-size: 80% /* tato deklarace byla poslednφ */
text-transform: uppercase;
}
A nev∞°ili byste, jak dlouho vßm bude trvat, ne₧ odhalφte, ₧e prßv∞ zapomenut² st°ednφk je p°φΦinou ÜpatnΘho zobrazenφ...
Dodr₧ujte po°adφ vlastnostφ
V pravidle je jedno, kterou vlastnost uvedete d°φve a kterou a₧ pozd∞ji. V zßjmu p°ehlednΘho zßpisu je ale dobrΘ dodr₧ovat alespo≥ n∞jakΘ po°adφ. Jß obvykle uvßdφm pravidla v nßsledujφcφ posloupnosti:
- barva pφsma a vlastnosti pozadφ (color, background-color...),
- vlastnosti pφsma (font-size, text-transform, font-style...),
- pozicovacφ vlastnosti (position, left, z-index, float...),
- vlastnosti boxu (display, border, margin, padding, width, visibility, overflow...).
MΘn∞ pou₧φvanΘ Φi hodn∞ specifickΘ vlastnosti (vertical-align, cursor, list-style, border-collapse a dalÜφ) uvßdφm nakonec nebo tam, kde se mi v konkrΘtnφm pravidle zdajφ logickΘ.
Se sprßvn²m po°adφm vlastnostφ to ale p°φliÜ nep°ehßn∞jte, abyste nestrßvili nad jejich °azenφm vφce Φasu ne₧ nad stylovßnφm webu. Je pouze dobrΘ alespo≥ podv∞dom∞ n∞jak² po°ßdek dodr₧ovat, abyste u rozsßhl²ch pravidel nemuseli prochßzet vÜechny deklarace, kdy₧ t°eba chcete zjistit velikost pφsma.
Syntaxe ID selektor∙
U ID selektor∙ je povolen² jak zßpis jmΘno-prvku#ID-prvku (nap°φklad p#uvod), tak i #ID-prvku (nap°φklad #uvod).
Logicky lepÜφm zßpisem je ten prvnφ, tedy i se jmΘnem prvku - °φkß nßm toti₧, jak² prvek formßtujeme, bez toho, abychom se museli dφvat do k≤du strßnky. V∞tÜinou ale pou₧φvßme ID selektory u prvk∙ <div>, ideßlnφ tedy je pou₧φvat jmΘna u vÜech prvk∙ krom∞ <div> (nap°φklad na prvek <div id="logo"> se tedy budeme ve stylu odkazovat pomocφ #logo, zatφmco na prvek <p id="uvod"> pomocφ p#uvod). Jednak si tφm uÜet°φme psanφ a jednak se nßm bude snadn∞ji hledat ·sek stylu, kter² formßtuje konkrΘtnφ objekt, t°eba navigaci (nebudeme se muset zastavovat u ka₧dΘho selektoru zaΦφnajφcφho na div#). Zßrove≥ ale budeme moci z ka₧dΘho ID selektoru poznat, o jak² se jednß prvek.
U ID selektor∙ uvßd∞jte p°edky prvku
Ka₧d² konkrΘtnφ prvek (dop°edu vφme, o jak² prvek se jednß a kde je ve strßnce pou₧it) by m∞l b²t v selektoru za°azen do struktury strßnky - m∞ly by b²t uvedeny prvky, uvnit° kter²ch se nachßzφ. Dφky tomu se nebudeme muset dφvat do k≤du strßnky, kdy₧ nap°φklad budeme chtφt zjistit, od kter²ch prvk∙ p°ebφrß nßÜ prvek d∞diΦnΘ vlastnosti. TakΘ bude nßÜ stylov² p°edpis logiΦt∞jÜφ a pochopiteln∞jÜφ.
Pokud je t°eba souΦßstφ navigace vyhledßvacφ formulß° a my chceme formßtovat pole pro zadßnφ textu, kterΘ se zde nachßzφ, m∞li bychom pou₧φt nßsledujφcφ pravidlo:
...
}
Pravidla byste takΘ m∞li uvßd∞t v po°adφ podle jejich nejvyÜÜφho p°edka, tak₧e vÜechny prvky, kterΘ jsou uvnit° navigace, by se ve stylovΘm p°edpisu m∞ly nachßzet na jednom mφst∞.
Jak nastavovat rßmeΦky, v²pln∞ a okraje
Pro nastavovßnφ rßmeΦk∙, v²plnφ a okraj∙ se v∞tÜinou pou₧φvajφ takzvanΘ sdru₧enΘ vlastnosti (margin, border-bottom a dalÜφ), kterΘ nastavφ v₧dy vφce vlastnostφ najednou (nap°φklad velikost okraje na vÜech stranßch prvku).
U vlastnostφ rßmeΦk∙ je obvykle vhodnΘ nejprve nastavit vÜechno pomocφ vlastnosti border a potom zahrnout do zßpisu p°φpadnΘ odliÜnosti (pozd∞jÜφ deklarace p°ebijφ ty d°φv∞jÜφ). Pokud nap°φklad chceme na hornφ, levΘ a dolnφ stran∞ prvku pou₧φt Φern² teΦkovan² rßmeΦek a na pravΘ stran∞ Φerven² tvo°en² dv∞ma linkami, pou₧ijeme tento zßpis...
border: dotted black;
border-right: double red;
}
...a ne tento zbyteΦn∞ dlouh² zßpis:
border-top: dotted black;
border-left: dotted black;
border-bottom: dotted black;
border-right: double red;
}
U vlastnostφ pro velikost okraje a v²pln∞ se v∞tÜinou pou₧φvß k nastavenφ odliÜn²ch hodnot pro r∙znΘ strany vlastnost margin respektive padding:
padding: 10px 20px 10px 10px;
margin: 1em 0 2em;
}
Pou₧φvejte komentß°e
Jednφm z nejd∙le₧it∞jÜφch pravidel pro vytvo°enφ logickΘho a p°ehlednΘho CSS je pou₧φvßnφ komentß°∙. Na ty byste nem∞li zapomφnat u ₧ßdn²ch slo₧it∞jÜφch konstrukcφ a hlavn∞ u hack∙ - ty jsou Φasto tak nelogickΘ, ₧e pomalu u₧ po t²dnu nevφte, proΦ jste ten kter² hack pou₧ili.
Pomocφ komentß°∙ byste takΘ m∞li cel² stylov² p°edpis rozd∞lit na Φßsti, nap°φklad na Φßst, kde se formßtujφ odkazy, na Φßst, kde se formßtuje navigace a podobn∞ (jak jsme si ji₧ °ekli na zaΦßtku tohoto Φlßnku).
A to je vÜe k logickΘmu a p°ehlednΘmu CSS, tedy z mojφ strany. Doufßm, ₧e pro vßs bude tato chvφle naopak startovacφm bodem...
