Så här skriver vi vår kod

Generealla riktlinjer

• 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