Direkt till innehållet

Så här skriver vi vår kod

Namngivningen skall vara tätt kopplad till dess funktion. Hellre t.ex. ”getNewsResults()” än ”getResults()”

HTML

  • Vi vailderar med vår a11y linter.
  • Vi följer WCAG 2.1. AA-nivå.
  • Vi skriver så platt struktur som möjligt för att inte få onödigt stor DOM.
  • Kontrollerar alltid om det finns ett färdigt mönster för komponenten definierat i WAI-ARIA authoring practices.
  • Vi associerar som regel listor med en rubrik med hjälp av aria-labelledby eller anger en aria-label som anger kontexten.
  • Dekorativa bilder har attributet alt=”” som döljer dem för skärmläsare.
  • Vi är noga med att följa korrekt semantisk nästling av rubriknivåer, men kan ange rubriknivåer som klasser för att ändra dem visuellt.

CSS

  • Vi använder SCSS.
  • Vi använder BEM för namngivningen så långt som möjligt. (Med bindestreck på blocket)
  • Vi anger endast en modifier per klass

    • Rh-component—primary och rh-component—rounded snarare än rh-component__primary—rounded eller liknande

  • Vi pushar namngivna komponenter snarare än använder utilityklasser.

    • vi kan fortfarande lägga utilityklasser i implementationer av en komponent.

  • Vi använder oss av @screen inuti klasserna för att styra responsivitet.
  • Vi skriver ”mobile first”.
  • Vi använder ’&’ så mycket som möjligt.

JS (React)

  • Vi använder React som ramverk
  • Vi skriver Typescript, inklusive interface
  • Vi nyttjar endast Functional components med hooks, inga klasskomponenter
  • Vi följer våra linters rekommendationer
  • Interpolerar inte CSS-klasser
  • Vi säkerställer att det för grundfunktionalitet finns en fallback utan JS
  • Vi använder arrow functions
  • Ordningen på en Reactkomponent är som följer:

    • Variabler
    • Hooks
    • Funktioner
    • Effects
    • Render-funktioner
    • Komponentens return statemnet

MDX

  • Logiken för controls lägger vi i separata filer som döps med src/KomponentensNamn.Story.ts
  • Storyn sparas i MDX

 

Senast ändrad: