CSS – Co nás roky tvorby webů v ui42 naučily

CSS – Co nás roky tvorby webů v ui42 naučily

CSS je nedílnou a důležitou součástí vývoje webového designu. O tom není pochyb. Každý webový vývojář se s ním setkává pravidelně a více či méně ho tvoří. Důležitým faktorem každého CSS souboru je nejen jeho funkčnost ale i jeho čitelnost. Nečitelný kód je nejen mnohem těžší modifikovatelný ale i chybovější. Navíc většinou se s daným kódem dříve či později setkají i další kolegové a když nebude čitelný pro vás jako tvůrce tak pro ně už určitě ne. Proto se při jeho tvorbě snažme dodržovat určitá pravidla. Uvádím několik nejčastěji doporučovaných v návodech a těch které se nám v ui42 nejvíce osvědčily.

#1. CSS styly „v řádku“ vs. „pod sebou“

Co se týče tohoto pravidla, tak se vývojáři dělí na dva tábory. Těch kterým vyhovuje styl psaní v řádku a těch co píší pod sebou. Technicky jsou oba způsoby správné. Návody a doporučení se však shodují na jednom: používejte ten způsob který nejvíce vyhovuje vám, ale důležité je aby byl jednotný, to znamená, že když začnete v řádku, tak potom celé CSS v řádku a naopak.

V řádku:

#header ul li { color: red; margin: 10px; padding: 10px; }

Pod sebou:

#header ul li {
    color: red;
   font: normal 10px/12px Arial;
   margin: 10px;
   padding: 10px;
}

#2. Používejte “Reset”

Při tvorbě CSS se určitě setkáte s tím že některé věci se vám zobrazují různě na různých prohlížečích. To je jeden z největších problémů při tvorbě HTML/CSS. Do jisté míry se však tento problém dá eliminovat používáním sady CSS pravidel, které vám sjednotí zobrazení elementů mezi různými prohlížeči. Můžete si napsat své nebo použít některé z již existujících, které se běžně používají, jsou volně dostupné, vyzkoušené a odladěné.

Nejznámější jsou:

Mayerův reset:
   http://meyerweb.com/eric/tools/css/reset/index.html

Reset od Yahoo:

   http://yuilibrary.com/yui/docs/cssreset/

#3. Používejte zkratky (ShortHands)

Vaše CSS tím značně odlehčíte. Zkratky můžete používat hlavně pro styly jako font, margin, padding a některé další.

Standardní zápis:

div { 
   font-family: Arial;
   font-weight: bold;
   font–size: 14px;
   line-height:16px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   margin-bottom: 0;
}

Využití zkratky:

div { 
   font: bold 14px/16px Arial;
   margin: 0 auto;
}

#4 Nepoužívejte typové selektory

V případě že to není nutné, vyvarujte se typovým selektorům.

Nesprávně:

ul#nav {...} 
div.wide {...}

Správně:

#nav {…}
.wide {…}

#5 Pište správně (validně)

Vyvarujte se drobným zlozvykům při tvorbě CSS. Nejenže to udělá váš kód správný ale bude i pro ostatní srozumitelnější:

  • V selektorech používejte pomlčku místo podtržítka.
  • Za každou definicí stylu použijte středník.
  • Mezi dvojtečkou a názvem stylu nedávejte mezeru ale až za dvojtečku.
  • Místo uvozovek používejte apostrofy.
  • Nepište apostrofy (ani uvozovky) okolo hodnoty v „url()“.

Tip na závěr

Ať už píšete CSS do řádku nebo pod sebou, řaďte si jednotlivé styly podle abecedy. Ze začátku si na to musíte trochu zvyknout, ale později se vám to zautomatizuje a usnadní vám to orientaci a vyhledávání mezi vašimi styly.

Přečtěte si také

Děkujeme za odběr!
Brzy dostanete náš newsletter.
Ups! Tento email už je registrován
Email už máme v databázi, zkontrolujte si schránku nebo použijte jiný mail
Ups! Tento email je nesprávný
Email nemá správný formát
Ups! Neznámá chyba
Prosím, zkuste to později

Konzultace zdarma

S čím byste potřebovali pomoci?

Vyberte všechny možnosti, které se vás týkají

Potřebujete ještě s něčím pomoci?

Vyberte si další oblast

Zanechajte nám na vás kontakt

Formulář byl úspěšně odeslán.