Domů › Metodika

Metodika

Každý CSS kodér by si měl vytovřit svůj vlastní "FrontEnd Style Guide", obsahující koncepci "jak stylovat".

Vhodná metodika zajistí jednotný vzhled a správnou funkčnost (dynamické chování).

Doporučení:

  • stylujte "bloky" (celky, objekty, komponenty) ne elementy – rozdělte projekt na znovupoužitelné části volně vázaných nezáviských prvků
    • bloky jsou nezávislé na umístění a počtu a obsahují elementy (elementy jsou závislé na kontextu tj. mají smysl v rámci bloku do kterého patří) např.
      • článek (produkt)
        • nadpis + obrázek + text + kategorie + přílohy
      • vyhledávání
        • vstupní pole + odesílací tlačítko
      • přihlašovací blok
        • uživatelské jméno + heslo + odesílací tlačítko
      • navigace
        • nadpis + strukturované pložky navigace
      • atd.
  • využívejte nezávislost na umístění a počtu – nevytvářet styly závislé na umístění
    • nepoužívejte ID
      • pro každou komponentu vytvářejte raději jedinečné třídy
      • některé CMS systémy generují chybně více ID na jedné stránce
    • používejte konkrétnější třídy (class) – např. .menu__item(oddělovačem bloku a elementu jsou dvě podtržítka)
    • v selektorech nepoužívejte HTML elementy (
      • vše by mělo být nezávislé na systému např. element <input> se může změnit na <a> nebo <span> atd.)
    • používejte modifikátory – umožňují vytvářet komponenty s podobným vzhledem nebo chováním
      • modifikátor vyjadřuje vlastnost (vzhled, chování) pomocí názvu a hodnoty např. .menu__item--size-xl
      • u jednoho prvku může být používáno i více modifikátorů současně
  • netvořte "dlouhé selektory" tj. snažte se o co nejméně zanoření (kaskád)
    • ideálně ​max. dvě třídy v selektoru (kaskádě)
  • vyhýbejte se kaskádě bloků
  • využívejte komprimace CSS do jednoho souboru
    • snížení počtu požadavku na server (zvýšení rychlosti)
    • (IE umožňuje načíst max. 31 CSS souborů)

Další zdroje informací:

  • ​BEM (Block Element Modifier) – snaží se o co nejméně zanoření (kaskád) => konktrétnější popis tříd
    • např.: .menu__item--size-xl
  • OOCSS – objektově orientované CSS (komponenty)
    • sémantické pojmenování
      • např. .alert--positiv, .alert--error (ne: .alert--green, .alert--mk35)
      • je možné např. využítvat velikostí oblečení (S, M, L, XL, XXL)
    • např.  Twitter Bootstrap Components Library – skvělý příklad modulárního CSS
  • SMACSS (Scalable and Modular Architecture for CSS) – univerzální použití pro malé, tak i pro velké projekty
    • ​prefix X
  • SASS
    • CSS3
    • proměnné
  • bruskodu.cz/epizoda/5/ (obsahuje všechny zmiňované odkazy)
  • vzhurudolu.cz/prirucka/oocss
  • creativebloq.com/css3/create-modular-and-scalable-css-9134351