Správná struktura složek a souborů je klíčovým aspektem při vývoji přehledných a udržitelných projektů. Špatné rozčlenění může vést k hodinám času navíc, k většímu stresu a nepohody vývojářů, a to hlavně na větších projektech.

Sass 7-1 Architecture je jedním ze způsobů, jak udržovat vaše CSSka organizované. Tato architektura představuje 7 složek a 1 soubor. Ze zmíněných 7 složek se includují/importují CSS soubory do 1 SASS souboru, který se dále kompiluje do klasického CSS.

Pojďme se spolu podívat na to, jak vypadá struktura souborů.

sass/
   abstracts/
      _variables.scss
      _colors.scss
      _mixins.scss
   vendors/
      _bootstrap.scss
   base/
      _base.scss
      _reset.scss
      _typography.scss
   layout/
      _footer.scss
      _header.scss
      _sidebar.scss
   components/
      _article.scss
      _button.scss
      _modal.scss
      _login.scss
   pages/
      _blog.scss
      _about-us.scss
   themes/
      _dark.scss
      _light.scss
   main.scss

Teď si pojďme rozebrat jednotlivé složky, což přesně kam patří.

Abstracts

Abstracts neobsahují styly, jedná se o složku, kam se ukledají různé „pomocné“ soubory pro ostatní .scss, to znamená barvy, mixiny nebo funkce.

Vendors

Do této složky dáváme CSSka třetích stran, jako například Bootstrap nebo Bulma.

Base

Do složky base patří základní styly pro náš web. To znamená, že to může být například typografie, reset/ normalize, nastavení dokumentu/body nebo nastavení základních HTML elementů (ul, li, section, li).

Layout

Do layoutu patří styly, které pečují o rozložení stránky jako takové. Můžete si sem vytvořit globální helpre pro container, wrappre, grid nebo flex systém.

Components

Složka components by měla obsahovat styly pro jednotlivé komponety, například pro článek. Aby byly styly ke komponentě snadno dohledatelné, doporučuji nazvat css soubor stejně jako máte nazvanou komponentu v HTML.

Pages

Žádná stránka není identická s tou předchozí, máte-li však rozdíly větší na jedné stránce nebo specifické styly pro danou stránku, tak si je můžete uložit do složky pages.

Themes

Themes možná ve svém projektu nevyužijete, ale pokud máte na webu například dark/light mód, tak se vám určitě může pro tyto účely hodit.

Na každý soubor z 7 složek výše pak uděláte @import / @use do main.scss.

@use 'abstracts/_variables';
@use 'abstracts/_colors';
@use 'abstracts/_mixins';

@use 'vendors/_bootstrap';

@use 'base/_base';
@use 'base/_reset';
@use 'base/_typography';

@use 'layout/_footer.scss';
@use 'layout/_header.scss';
@use 'layout/_sidebar.scss';

@use 'components/_article.scss';
@use 'components/_button.scss';
@use 'components/_modal.scss';
@use 'components/_login.scss';

@use 'pages/_blog.scss';
@use 'pages/_about-us.scss';

@use 'themes/_dark.scss';
@use 'themes/_light.scss';

Pokud nerozumíte zápisu @use, tak se jedná o způsob vkládání csska podobně jako je to u importu. Ten je ale dnes již deprecated a neměli byste jej používat. Pro použití @use připravuji nový článek.

Jak to postavit ještě o úroveň výš?

Sass 7-1 architekturou to samozřejmě nekončí. Ideální je, když dále stavíte projekt na BEM technologií, o kterém jsem psal článek minule. Přečíst si jej můžete zde. Díky BEMu a 7-1 architektuře vám vznikne velmi solidní základ pro malé i velké projekty, s nímž určitě chybu neuděláte a přesně tento styl používáme i zde na ForDevs.cz.