Jak na kvalitní Sass se stylelint

Původně jsem psal všechny styly v CSS. Pak jsem přešel na less, ale skončil jsem u Sass (soubory s koncovkou .scss). Důvodem pro použití byla možnost psát proměnné (variables) pro barvy, ale to dnes CSS umí také (custom properties), i když ne tak elegantně. A hlavní důvod pro Sass je možnost rozdělovat styly do menších souborů podle použití a přes @import je spojovat.

Adresářová struktura scss (Sass)

Používám Webpack Encore a tak mám všechny assets soubory ve složce /assets/scss/.

/modules – např. barvy _colors.scss, _mixins.scss, _variables.scss
/partials – rozdělení podle použití např. _buttons.scss, _aside.scss, _main.scss
/responsive – rozdělení podle obrazovky _xs.scss, _sm.scss, _md.scss, _lg.scss, _xl.scss
/vendor – sem přidávám „cizí“ styly, které jsem nepsal já

Prefix „_“ (podtržítko) používám pro „privátní“ soubory, které pouze někde importuji, ale nepoužívám samostatně. V importech se mohou přidávat bez prefixu. např. @import „./scss/partials/main“;

Použití relativní cesty k obrázkům

Jak např. řeším styl ikonky „koupání“

background: url(../../images/fa/moje-koupani-zelena-16.png);

Webpack Encore přepíše url „../../images/“ na „/build/images/“ + kopíruje soubor „moje-koupani-zelena-16.png“ do /public/build/images/, takže vše funguje jak má.

Sass proměnné

Proměnné jsou základ pro znovupoužití hodnot bez kopírování znovu a znovu dokola.

Příklad proměnné v SASS:

$main-bg-color: brown

element {
    background-color: $main-bg-color;
}

Příklad proměnné v CSS:

--main-bg-color: brown

element {
    background-color: var(--main-bg-color);
}

Sass @import

S pomocí Sass lze styly rozdělovat do přehledných malých souborů podle jejich účelu a ty se pak s pomocí @import spojí při kompilaci do konečné podoby CSS.

Pozor, CSS zná také příkaz @import, ale ten funguje tak, že se soubor importuje až při vykreslování stránky v dalším HTTP requestu ! A CSS v importech neumí oddělovač čárku, každý soubor musí mít svůj vlastní @import.

// style.scss
@import 'foundation/code', 'foundation/lists';

Jak psát styly čistě, přehledně a bez chyb ?

Na odhalování chyb, zpřehlednění stylů a správného pořadí pravidel používám stylelint.

npm i -D stylelint

Pro snadné spouštění mám v package.json skript:

"stylelint": "stylelint \"**/*.scss\""

Nástroj stylelint např. háže chybu, pokud mám styl přiřazen ID místo class např.

#show-modal {
  display: inline-block;
  position: relative;
  float: right;
}

stylelint vyhodí chybu: Expected "#show-modal" to have no more than 0 ID selectors

Použití ID elementu pro selector je v pořádku, ale pokud komponentu začnu používat na jiném místě, tak nastane problém s duplicitou. Nebo pokud původní návrh stránky byl špatný a muselo se to přeskupovat. Proto se doporučuje používat selector přes „class“.

Přečtěte si článek How to lint SCSS with stylelint.

Pokyny pro stylelint se dají nastavit např. použitím sady https://github.com/bjankord/stylelint-config-sass-guidelines. Tato sada vychází z pokynů https://sass-guidelin.es/.

Instalace stylelint-config-sass-guidelines

npm i -D stylelint-config-sass-guidelines

Vytvořím soubor .stylelintrc.json v root projektu a přidám do něj:

{
  "extends": "stylelint-config-sass-guidelines"
}

Psaní bez prefixů s autoprefixerem

Nemuset řešit rozdíly v prohlížečích při psaní stylů urychlí práci. Nástroj autoprefixer bere nejpopulárnější prohlížeče a na základě nalezených stylů vytvoří prefixy např. pro webkit, moz, ie. Používat prefixy doporučuje Google, používá ho např. Twitter.

Autoprefixer se dá používat jako plugin pro PostCSS.

Např. pro barvu placeholderu

::placeholder {
  color: gray;
}

vytvoří autoprefixer toto:

::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

Instalace autoprefixer jako plugin Postcss

npm i autoprefixer -D

Vytvořím si soubor postcss.config.js v root složce projektu a přidám do něj:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

Ve Webpack Encore si přidám .enablePostCssLoader().