Tips
npx @navikt/aksel css-imports
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.
layers er ikke støttet i safari 15.3 eller eldre. Dette vil kunne påvirke brukere av IOS-enheter eldre enn ~2016.
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.
fonts.css og tokens.css kan bare fjernes hvis man manuelt overstyrer dette i egen løsning. Uten disse vil alle komponenter brekke!
De fleste vil nok også trenge å ha med print/reset, men finnes andre alternativ enn Aksel for det.
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?
For nå er planen å flytte ds-css-internal og ds-react-internal til kjernepakkene. Man vil da slippe å trekke inn 2 ekstra NPM-pakker for et par komponenter. For nå kan de tas i bruk på samme måte som tidligere.