Rozdělení kódu do složek

V tomto článku se podíváme jak můžeme náš CSS kód dělit do souborů a složek. Existuje mnoho způsobů jak bychom mohli náš kód organizovat a hodně lidí na to má třeba i svůj vlastní způsob. V tomto článku si povíme o rozdělení css kódu podle vzoru 7-1. Pokud chcete, můžete se podívat třeba také na tento článek na webu vzhůru dolů, který se organizaci CSS kódu také věnuje.

Organizace kódu pomocí vzoru 7-1

Tento vzor pro organizaci css kódu definuje sedm složek a jeden soubor. Náš kód rozdělujeme do souborů, které umisťujeme do těchto složek a ty potom importujeme do souboru, který tyto soubory propojuje dohromady. K organizaci našeho css kódu tedy potřebujeme preprocesor. Pokud žádný procesor nepoužíváte ale chtěli byste začít, tak se můžete naučit třeba LESS o kterém mám webové stránky. Není to nic složitého.

Sedm složek, které při použití toho vzoru můžeme použít jsou následující:

• base
• components
• layout
• pages
• themes
• abstracts
• vendors

Nemusíme používat všechny tyto složky a pokud chceme, můžeme si klidně vytvořit nějaké další. Je to jen takový návrh podle kterého se můžeme řídit.

Složka base

Tato složka obsahuje hlavně kód se základními styly. Mohli bychom tu provést nějaký reset stylů, nastavit box-sizing na border-box a tak podobně. Dále bychom tu mohli stylovat písmo, vytvářet utility třídy a pokud používáme nějaké animace, tak bychom je sem mohli také třeba umístit.

Jaké soubory bychom mohli v této složce například vytvořit:

• base.less: tady bychom mohli provést třeba nějaký reset stylů, nastavit box-sizing na border-box, určit kolik pixelů se bude rovnat jedné rem jednotce atd.
• typography.less: tady bychom mohli stylovat písmo
• animations.less: tady bychom mohli vytvářet keyframes pro animace
• utilities.less: tady bychom mohli vytvářet utility třídy

Složka components

Do této složky budeme dávat naše komponenty - věci, které můžeme použít na různých místech našich stránek. Mohli bychom tu třeba mít styly pro různá tlačítka, karty, boxy a tak podobně.

Jaké soubory bychom mohli v této složce například vytvořit:

• buttons.less: tady bychom mohli stylovat tlačítka
• card.less: tady bychom mohli stylovat nějakou kartu
• info-box.less: tady bychom mohli stylovat nějaký box

Složka layout

Tato složka obsahuje styly týkající se layoutu. Mohli bychom tu mít např. styly pro naši hlavičku, patičku, nějaký grid systém a tak dále.

Jaké soubory bychom mohli v této složce například vytvořit:

• grid.less: tady bychom mohli vytvářet nějaký grid systém
• header.less: tady bychom mohli mít styly týkající se naší hlavičky
• footer.less: tady bychom mohli mít styly týkající se naší patičky

Složka pages

Tato složka obsahuje styly týkající se specifických stránek našich webových stránek. Mohli bychom si tu například vytvořit soubor pro naši úvodní stránku a psát do něj styly, které se týkají jen jí.

Jaké soubory bychom mohli v této složce například vytvořit:

• home.less: tady bychom mohli mít styly týkající se jen uvodní stránky
• product.less: tady bychom mohli mít styly týkající se jen stránky o produktu
• login.less: tady bychom mohli mít styly týkající se jen stránky pro přihlášení

Složka themes

Pokud bychom chtěli pro naše stránky vytvářet více stylů, tak to můžeme dělat v této složce. Mohli bychom pro naše stránky například vytvořit světlý a tmavý styl.

Jaké soubory bychom mohli v této složce například vytvořit:

• dark-theme.less: tmavý styl našich webových stránek
• light-theme.less: světlý styl našich webových stránek

Složka abstracts

Tato složka slouží k uchovávání všeho, co se přes preprocesor nezkompiluje do CSS kódu. Takže bychom tu mohli vytvářet různé proměnné, mixiny a tak dále.

Jaké soubory bychom mohli v této složce například vytvořit:

• variables.less: tady bychom mohli vytvářet proměnné
• mixins.less: tady bychom mohli vytvářet mixiny

Složka vendors

Pokud bychom používali nějaké css knihovny třetích stran, tak je můžeme vložit do této složky.

Hlavní soubor

Hlavní soubor, do kterého importujeme všechny naše ostatní soubory ze složek se většinou jmenuje main.less. Tento soubor potom kompilujeme pomocí preprocesoru. Může vypadat nějak takto:

Soubory bychom měli importovat v tomto pořadí:

1. abstracts
2. vendors
3. base
4. layout
5. components
6. pages
7. themes

Závěr

V tomto článku jste se dozvěděli jak můžete organizovat svůj css kód pomocí vzoru 7-1. Myslím že je dobré něco takového mít, než si svůj kód organizovat podle sebe. Pokud budete tento vzor používat a nebudete si přesně pamatovat jména jednotlivých složek, tak se můžete podívat na tuto stránku a připomenout si je.