Bruk kommandolinje-verktøyet vårt til å håndtere CSS import i løsningen din. Da blir cascading + mye mer håndtert for deg!

Aksel tilbyr nå mer fleksibilitet når du skal importere komponent-styling til løsningen din. For de fleste vil det enkle ofte være det beste og all stylingen du trenger for å bruke Aksel kan hentes slik.

Spesifisitet

Hvis man overskriver en del styling fra Aksel, ender man ofte opp med problemer med spesifisitet. Den nye CSS-løsningen layers løser dette. All styling importert fra Aksel vil her få lavest spesifisitet.

Minified og prefikset

CSS fra @navikt/ds-css er ikke minified eller prefikset rett ut av boksen, men fra v2.9.0 vil all CSS ha en ekstra *.min.css-versjon som håndterer dette.

De fleste moderne bundlere og frameworks håndterer dette automatisk. Dette vil defor være mest nyttig hvis man laster CSS fra CDN eller andre løsninger som ikke kjører post-processing med f.eks. postcss, eks inlinet CSS.

Globale stiler

Man kan velge å manuelt trekke inn bare deler av det globale stilsettet. Hvis man fortsatt ønsker all komponent relatert styling finner man den i components.css.

Opt-in komponentstyling

Det er ikke alltid man ønsker eller trenger å trekke inn all stylingen fra Aksel når man bruker komponentene. Dette vil være nyttig for web-components, løsninger som dekoratøren der hver eneste kB spart er viktig eller man bare ønsker å minske CSS-bundle med noen kB.

CSS Cascading er viktig her, slik at typography.css alltid må være først i komponent-listen. Kommandolinje-verktøyet vårt håndterer dette for deg!

CDN

All styling finnes versjonert på NAV-CDN.

Hvis man velger å bruke CDN for lasting av CSS, burde man låse @navikt/ds-react (+ alle andre Aksel-løsninger) til samme versjon. CDN støtter ikke semver, så man må manuelt oppdatere versjoner og holde dem i synk.

Hva med @navikt/ds-css-internal?

Fra versjon 4.0.0 er all styling fra denne pakken flyttet inn i @navikt/ds-css. Den vil da også være tilgjengelig på CDN sammen med all annen styling.