Styl React-apper: 5 effektive CSS-metoder

by
Tweet
Share
Share
Pin
0 Shares

CSS-styling i React: En omfattende veiledning

Visste du at over 97% av alle nettsider benytter CSS for å style innholdet sitt? Dette kraftfulle verktøyet lar utviklere skape visuelt tiltalende, lettleselige og profesjonelle nettsider. CSS, eller Cascading Style Sheets, definerer hvordan dokumenter presenteres for brukeren. Disse dokumentene er typisk skrevet i markeringsspråk som HTML eller XML.

Hva innebærer styling i React?

Reacts popularitet stammer i stor grad fra hvor enkelt det er å utvikle, kjøre og vedlikeholde applikasjoner. React er ikke et rammeverk, men et JavaScript-bibliotek, noe som gir det en unik fleksibilitet. Det tilbyr mer enn bare ferdigskrevet kode og funksjoner.

Gjenbrukbare komponenter, fleksibilitet, kodestabilitet, hastighet og ytelse er blant grunnene til at React ofte rangeres høyt blant JavaScript-rammeverk og -biblioteker. Styling i React handler om å bruke CSS til å gjøre de ulike komponentene i en applikasjon visuelt attraktive. Det er viktig å huske at React benytter JSX (JavaScript og XML) istedenfor HTML som markeringsspråk. En vesentlig forskjell er bruken av «.ClassName» i JSX for å betegne klasser, i motsetning til HTMLs bruk av «.class».

Hvorfor bruke CSS for styling i React?

  • Responsiv design: CSS tillater bruk av media queries, som gjør at React-applikasjonen din kan tilpasses ulike skjermstørrelser, fra mobiltelefoner til større skjermer.
  • Effektiv utvikling: Du kan gjenbruke CSS-regler på tvers av ulike komponenter, noe som sparer tid i utviklingsprosessen.
  • Enkelt vedlikehold: Med CSS er det enkelt å foreta endringer i utseendet til spesifikke komponenter eller deler av appen.
  • Forbedret brukeropplevelse: CSS gir muligheten til å formatere innholdet på en brukervennlig måte, noe som bidrar til god navigasjon og brukeropplevelse.

Det finnes flere metoder for å style React-applikasjoner. Her er noen av de mest utbredte:

Bruk av inline-stiler

Den mest direkte tilnærmingen er inline-stiler, som gjør det unødvendig å opprette separate stilark. CSS-stilen legges da direkte inn i React-koden.

Det er viktig å merke seg at inline-stiler har høy prioritet og overstyrer andre stiler. Så hvis du har et eksternt stilark med en definert formatering, vil den bli overstyrt av den inline-stilen.

Her er et eksempel på inline-styling i en React-app:

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Hei Verden!!!!!</h1>
      <h2>Legg til litt stil!</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Dette eksemplet vil vise en <h1> tag med lyseblå bakgrunn.

Fordeler med inline-stiler

  • Raskt: En enkel tilnærming, siden stilen legges direkte til den ønskede taggen.
  • Høy prioritet: Inline-stiler overstyrer eksterne stilark, noe som er nyttig for å fokusere på spesifikk funksjonalitet uten å endre hele applikasjonen.
  • Godt for prototyping: Du kan teste ut ulike stiler før du implementerer dem i et eksternt stilark.

Ulemper med inline-stiler

  • Tidkrevende: Det kan bli omstendelig å style hver tag individuelt.
  • Begrenset: Du kan ikke benytte CSS-funksjoner som selektorer og animasjoner.
  • Uoversiktlig: Mange inline-stiler kan gjøre JSX-koden vanskelig å lese.

Importering av eksterne stilark

Du kan skrive CSS i en egen fil og importere den i React-applikasjonen din. Denne metoden kan sammenlignes med å importere en CSS-fil i <head>-taggen i et HTML-dokument.

For å benytte denne metoden må du lage en CSS-fil i appens katalog, importere den til den aktuelle komponenten og skrive stilregler for applikasjonen.

For å illustrere, kan du opprette en CSS-fil med navnet «App.css» og eksportere den som følger:

import { React } from "react";
import "./Components/App.css";

function App() {
  return (
    <div className="main">
    </div>
  );
}

export default App;

Kodesnutten ovenfor importerer et eksternt stilark til «App.js»-komponenten. «App.css»-filen befinner seg i «Components»-mappen.

Fordeler med eksterne CSS-stilark

  • Gjenbrukbare: CSS-regler kan gjenbrukes på tvers av ulike komponenter i applikasjonen.
  • Oversiktlig kode: Koden blir mer lesbar og enkel å forstå.
  • Tilgang til avanserte CSS-funksjoner: Du kan bruke pseudo-klasser og avanserte selektorer.

Ulemper med eksterne CSS-stilark

  • Krever nøye navnekonvensjoner for å unngå overskriving av stiler.

Bruk av CSS-moduler

React-applikasjoner kan fort bli store og komplekse. Standardinnstillingen er at CSS-animasjonsnavn og klassenavn er globale, noe som kan skape utfordringer med overskriving av stiler ved bruk av store stilark.

CSS-moduler løser dette problemet ved å gjøre animasjons- og klassenavn lokale, slik at de kun er tilgjengelige i den filen eller komponenten de er ment for. Hvert klassenavn får et unikt, programmatisk navn for å unngå konflikter.

For å benytte CSS-moduler, opprett en fil med endelsen «.module.css». Hvis du for eksempel vil kalle stilarket for «style», skal filnavnet være «style.module.css».

Importer den opprettede filen til React-komponenten din, og du er klar til å begynne.

En CSS-fil kan se ut som følger:

/* styles.module.css */
.font {
  color: #f00;
  font-size: 30px;
}

Du kan importere CSS-modulen til «App.js» som følger:

import { React } from "react";
import styles from "./styles.module.css";

function App() {
  return (
    <h1 className={styles.heading}>Hei leser av tipsbilk.net</h1>
  );
}

export default App;

Fordeler med å bruke CSS-moduler

  • Lett å integrere med SCSS og CSS
  • Unngår klassenavnkonflikter

Ulemper med å bruke CSS-moduler

  • Å referere til klassenavn ved hjelp av CSS-moduler kan være forvirrende for nybegynnere.

Bruk av Styled-Components

Styled-Components lar utviklere lage komponenter med CSS direkte i JavaScript-koden. En stylet komponent fungerer som en React-komponent med integrerte stiler. Dette gir dynamisk styling og unike klassenavn.

For å starte bruken av Styled-Components, installer pakken i rotmappen ved hjelp av følgende kommando:

npm install styled-components

Neste steg er å importere styled-components i React-applikasjonen.

Her er et kodeeksempel fra «App.js» som bruker Styled-Components:

import { React } from "react";
import styled from "styled-components";

function App() {
  const Wrapper = styled.div`
    width: 80%;
    height: 120px;
    background-color: lightblue;
    display: block;
  `;

  return <Wrapper />;
}

export default App;

Den gjengitte appen vil ha de definerte stilene fra de stylede komponentene.

Fordeler med Styled-Components

  • Forutsigbart: Stiler er knyttet til individuelle komponenter.
  • Ingen navnekonflikter: Du trenger ikke bekymre deg for klassenavnkonvensjoner.
  • Gjenbrukbare komponenter: Stylede komponenter kan eksporteres som props, og utvides med nye stiler.

Ulemper med Styled-Components

  • Krever installasjon av et tredjepartsbibliotek.

Syntaktisk fantastiske stilark (SASS/SCSS)

SASS tilbyr kraftigere verktøy og funksjoner enn vanlig CSS. Du kan skrive stiler i to varianter, med filendelsene «.scss» eller «.sass».

Syntaksen for SASS er lik den for vanlig CSS, men krever ikke bruk av åpnings- og lukkeparentes når du skriver stilregler.

Her er et eksempel på hvordan SASS-kode kan se ut:

nav
  ul
    margin-right: 20px
    padding: 0
    list-style: list
  li
    display: block
  a
    display: block
    padding: 6px 12px
    text-decoration: underline
nav

For å bruke SASS i en React-applikasjon, må du først kompilere SASS til vanlig CSS. Etter å ha satt opp applikasjonen via Create React App-kommandoen, kan du installere «node-sass» for kompileringen:

npm install node-sass

Deretter kan du opprette filer med enten «.scss» eller «.sass»-endelse og importere dem som vanlig, for eksempel:

import "./Components/App.sass";

Fordeler med SASS/SCSS

  • Tilbyr kraftige funksjoner som mixins, nesting og extension.
  • Krever mindre kode for å skrive CSS.

Ulemper med SASS/SCSS

  • Stiler er globale, noe som kan føre til overordningsproblemer.

Hvilken stylingmetode er den beste?

Ettersom vi nå har diskutert fem ulike tilnærminger, er det naturlig å spørre seg hvilken metode som er best. Det er vanskelig å kåre en klar vinner, men følgende hensyn kan hjelpe deg å ta en velinformert beslutning:

  • Ytelsesmålinger
  • Behovet for et designsystem
  • Enkel optimalisering av koden

Inline-styling er egnet for små og enkle applikasjoner, mens eksterne stilark, SASS, Styled-Components og CSS-moduler er bedre egnet for større applikasjoner.

Beste praksis for å vedlikeholde CSS i en stor React-applikasjon

  • Unngå inline-styling: Skriving av inline-CSS for hver tag i en stor React-applikasjon kan være utmattende. Bruk heller et eksternt stilark som passer dine behov.
  • Bruk en linter: Linters som Stylelint vil fremheve stylingfeil i koden din, slik at du kan korrigere dem tidlig.
  • Gjennomfør regelmessige kodeoverganger: Regelmessige kodeoverganger gjør det enkelt å identifisere feil tidlig i utviklingsprosessen.
  • Automatiser testing av CSS-filene dine: Verktøy som Enzyme og Jest er gode for å automatisere tester på CSS-koden din.
  • Hold koden din DRY: Når du jobber med vanlige stiler som farger og marger, bruk verktøyvariabler og klasser som følger «Don’t Repeat Yourself»-prinsippet.
  • Bruk navnekonvensjoner som Block Element Modifier (BEM): Dette gjør det lettere å skrive CSS-klasser som er lette å forstå og gjenbruke.

Konklusjon

Ovenfor har vi sett på ulike metoder for å style React-applikasjoner. Valget avhenger av dine behov, ferdigheter og preferanser. Du kan også kombinere flere metoder i samme applikasjon, for eksempel inline- og eksterne stilark.

Det finnes også flere gode CSS-rammeverk og -biblioteker som kan være verdt å utforske for front-end-utviklere.