Jak udržet jednotnou formu stylopisu?

Jul 15, 2019 • 4 minutes read

Konzistentní zápis stylopisu je základním předpokladem pro vývoj. Funkční zápis je klíčový pro bezproblémový běh kódu webové stránky, potažmo celé aplikace. O neprůstřelnost chování v různých prohlížečích a kompatibilitu mezi nimi se starají rozšíření pre/postprocesorů.

Zde navržené řešení kombinuje nástroj stylelint, specifikace SCSS a rozšiřující nastavení. Integrace Prettier nebo cesta přes ESLint a jeho rozšíření na stylopis neposkytovaly požadovaný výsledek.

Stylelint

Stylelint je nástroj pro automatickou kontrolu CSS ve všech podobách, tj. SCSS a dalších preprocesorech nebo postprocesorech. V rámci kontrol je schopen i provádět dost automatických opravy. Ruční zásahy je nutno provést jen u složitějších problémů, jako je nedodržení kaskády — specificity selektoru.

Analyzuje chyby v kódu, jako překlepy v názvech vlastností (property-no-unknown), prázdné deklarace (block-no-empty) nebo komentáře (comment-no-empty) a mnoho dalších.
Omezuje kreativitu způsobů zápisu, například pojmenované barvy (color-named) viz další v dokumentaci.
V neposlední řadě se zaměřuje i na stylistiku, tj. dodržení jednotného formátu, např. formátu zápisu hexa barev (color-hex-case) atd.

Samozřejmostí je i plugin do VS code a dalších IDE.

Rozšiřující balíčky a pravidla

stylelint-scss — soubor specifických pravidel pro lintování SCSS, se kterými stylelint v základním nastavení nepočítá.
stylelint-config-standard — sada pravodel vycházející z konvencí používaných v Idiomatic CSS Principles, Google CSS Style Guide, Airbnb style guide a @mdo’s Code Guide.
@visionappscz/stylelint-config-visionapps — zpřísňuje pravidla standardní konfigurace.
@visionappscz/stylelint-config-visionapps-order — řadí CSS vlastnosti podle definovaného seznamu.
stylelint-selector-bem-pattern — kontrola validity použití metodiky BEM.
no-low-performance-animation-properties — hlídá použití vlastností transition.

Implementace do dev stacku

Instalace npm balíčků

npm i -D @visionappscz/stylelint-config-visionapps && 
npm i -D @visionappscz/stylelint-config-visionapps-order && 
npm i -D stylelint && 
npm i -D stylelint-find-rules && 
npm i -D stylelint-high-performance-animation && 
npm i -D stylelint-order && 
npm i -D stylelint-scss && 
npm i -D stylelint-selector-bem-pattern

Nastavení zkratek pro spuštění v package.json

"scripts": {
  "css:lint": "stylelint **/*.scss",
  "css:fix": "stylelint --fix **/*.scss",
}

Konfigurační soubor s pravidly .stylelintrc.yml

plugins:
  - stylelint-scss
  - stylelint-high-performance-animation
  - stylelint-selector-bem-pattern

extends:
  - '@visionappscz/stylelint-config-visionapps'
  - '@visionappscz/stylelint-config-visionapps-order'
  - stylelint-config-standard

rules:
  linebreaks: 'unix'
  unit-whitelist: ['px', 'rem', '%', 's', 'deg']

  plugin/no-low-performance-animation-properties: true

  plugin/selector-bem-pattern:
    preset: 'bem'
    implicitComponents: '**/c-*.scss'
    componentName: '(([a-z0-9]+(?!-$)-?)+)'
    componentSelectors:
      initial: "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$"
    implicitUtilities: '**/u-*.scss'
    utilitySelectors: "^\\.u-[a-z]+$"

  # Reset for visionappscz
  at-rule-no-unknown: null
  max-nesting-depth: 3
  selector-nested-pattern: null
  scss/at-rule-no-unknown: true

Spuštění kontroly v CLI (příkazové řádce)

npm run css:lint

Spuštění oprav

npm run css:fix

Integrace s Prettier

V minulém článku jsem Pettier chválil, jak je chytrý a výkonný. Není zde integrovaný, protože ve výše uvedené konfiguraci bych musel jeho duplicitní pravidla přetížit (resetovat) a nebo na místo stylelint-config-standard použít resetovací stylelint-config-prettier. Přetížení by mělo za následek nutnost vlastní definice pravidel. Jednodušší je do pravidel doplnit, co je v konfiguraci Prettieru navíc, zde jen linebreaks: 'unix'.

Závěr

Jednoznačně doporučuji pro lintování a autofix používat zde popsané nastavení. Je sice krapítek náročnější na kodéra, ale zaručuje vysokou kvalitu kódu a tedy nízkou míru rozbitelnosti. Podružným efektem je vývojový kód (SCSS), nad kterým je radost dělat code review. Pokud v konzoli nebo v IDE zasvítí chyba ve specificitě selektoru, nebo, že se mají některé deklarace prohodit — opravte to, ušetříte si tím v budoucnu problémy s přepisováním deklarací v kaskádě. Pokud vývojáři korektně nezvládají BEM nebo ho používat nechcete, vyhoďte ho :-)