Jak udržet jednotnou formu stylopisu?

  •   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

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

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 :-)