5 sätt att stilreagera med CSS [2023]

Visste du att en överväldigande majoritet, mer än 97%, av alla webbplatser använder CSS för att definiera deras utseende?

CSS, eller Cascading Style Sheets, är ett kraftfullt verktyg som gör det möjligt för utvecklare att skapa visuellt tilltalande, lättnavigerade och professionellt presenterade webbsidor.

CSS-språket beskriver hur ett dokument ska visas för användaren. I det här sammanhanget är ett dokument en fil som är skriven i ett markeringsspråk, till exempel XML eller HTML.

Vad innebär styling i React?

En av de främsta anledningarna till Reacts popularitet är dess enkelhet när det gäller att skapa, köra och underhålla applikationer. React är mer än bara ett ramverk; det är ett JavaScript-bibliotek som erbjuder flexibilitet och fördefinierade funktioner.

React rankas högt bland JavaScript-verktyg på grund av dess återanvändbara komponenter, flexibilitet, kodstabilitet, snabbhet och prestanda.

Styling i React innebär att göra de olika komponenterna i en app visuellt tilltalande med hjälp av CSS. Det är viktigt att notera att React använder JSX (en kombination av JavaScript och XML) i stället för traditionell HTML. En markant skillnad är att HTML använder `.class` för att ange klasser, medan JSX använder `.className`.

Varför är det bra att styla React med CSS?

• Gör din app responsiv. Dagens webbapplikationer måste vara tillgängliga på alla typer av skärmar. Med CSS kan du använda media queries i din React-app, vilket gör den anpassningsbar till olika skärmstorlekar.
• Snabbare utvecklingsprocess. Du kan återanvända CSS-regler i olika delar av din React-app.
• Underhållbar app. Att göra ändringar i utseendet på specifika delar av din app är enkelt med CSS.
• Förbättrad användarupplevelse. CSS möjliggör användarvänlig layout. En React-app med logisk placering av text och knappar är enklare att använda och navigera.

Det finns flera olika sätt att styla React-applikationer. Här följer några av de vanligaste metoderna:

Skriv inline-stilar

Inline-stilar är den enklaste metoden att styla en React-app, eftersom det inte kräver några externa stilmallar. CSS-stylingen appliceras direkt i React-koden.

Det är viktigt att notera att inline-stilar har högre prioritet än andra stilar. Det innebär att om en extern stilmall har vissa inställningar, kommer dessa att åsidosättas av inline-stilen.

Här är ett exempel på hur inline-styling kan se ut i en React-app.

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

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Välkommen till min sida!</h1>
      <h2>Lägg till lite stil!</h2>
    </>
  );
}

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

Detta kodexempel skapar en `h1` med en ljusblå bakgrund.

Fördelar med inline styling

• Snabb metod. Det är ett enkelt sätt att applicera stil direkt på den tagg du vill styla.
• Hög prioritet. Inline-stilar har högre prioritet än externa stilmallar. Du kan använda dem för att fokusera på en specifik funktion utan att behöva ändra hela appens utseende.
• Utmärkt för prototyper. Du kan testa layouten och funktionaliteten med inline-stilar innan du integrerar det i en extern stilmall.

Nackdelar med inline styling

• Kan vara tråkigt. Att styla varje tagg individuellt kan vara tidskrävande.
• Begränsad funktionalitet. Du kan inte använda CSS-funktioner som selektorer och animationer med inline-stilar.
• Många inline-stilar gör JSX-koden svårläst.

Importera externa formatmallar

Du kan skriva CSS i en separat fil och importera den till React-appen. Metoden liknar hur du importerar en CSS-fil i `head`-taggen i ett HTML-dokument.

För att göra detta skapar du en CSS-fil i appens katalog, importerar den till den önskade komponenten och skriver sedan stilreglerna för din app.

För att visa hur externa CSS-mallar fungerar kan du skapa en fil med namnet `App.css`. Du kan sedan importera den på följande sätt.

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

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

Koden ovan importerar en extern stilmall till komponenten `App.js`. Filen `App.css` finns i mappen `Components`.

Fördelar med externa CSS-stilmallar

• Återanvändbar. Du kan använda samma CSS-regler i olika komponenter i din React-app.
• Tydligare kod. Koden är lättare att läsa och förstå när du använder externa stilmallar.
• Tillgång till avancerade funktioner. Du kan använda pseudoklasser och avancerade selektorer med externa stilmallar.

Nackdelar med externa CSS-stilmallar

• Kräver ett tydligt namngivningssystem för att undvika att stilar åsidosätts.

Använd CSS-moduler

React-applikationer kan bli mycket stora. CSS-animationsnamn och klassnamn har som standard en global omfattning. Det kan bli problematiskt när du hanterar stora stilmallar, då en stil lätt kan åsidosätta en annan.

CSS-moduler löser detta genom att ge animationer och klassnamn en lokal omfattning. Det innebär att klassnamnen bara är tillgängliga i den fil eller komponent där de används. Varje klassnamn får ett unikt, genererat namn som förhindrar konflikter.

För att använda CSS-moduler, skapar du en fil som slutar med `.module.css`. Till exempel, om du vill kalla din stilmall `style`, blir filnamnet `style.module.css`.

Importera sedan den skapade filen till din React-komponent, så är du redo att börja.

Din CSS-fil kan se ut ungefär så här:

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

Du importerar CSS-modulen till din `App.js` på följande sätt:

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

function App() {
  return (
    <h1 className={styles.heading}>Hej läsare av adminvista.com</h1>
  );
}

export default App;

Fördelar med att använda CSS-moduler

• Lätt att integrera med SCSS och CSS.
• Undviker klassnamnskonflikter.

Nackdelar med att använda CSS-moduler

• Referenser till klassnamn kan vara förvirrande för nybörjare.

Använd Styled-Components

Styled-Components tillåter utvecklare att skapa komponenter med CSS inbäddat i JavaScript-koden. En formaterad komponent fungerar som en vanlig React-komponent, men med de tillhörande stilarna. Styled-Components erbjuder dynamisk styling och unika klassnamn.

För att börja använda Styled-Components installerar du paketet i rotmappen med detta kommando:

npm install styled-components

Nästa steg är att importera styled-components i din React-app.

Här följer ett kodexempel på `App.js` som använder 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 renderade appen kommer att ha de stilar som importerats från Styled-Components.

Fördelar med styled-components

• Förutsägbart. Stilar är inkapslade i de enskilda komponenterna.
• Du behöver inte bry dig om namngivningen av dina klasser. Skriv bara stilarna så tar paketet hand om resten.
• Du kan exportera formaterade komponenter som rekvisita. Styled-components konverterar vanlig CSS till React-komponenter. Därför kan du återanvända, utöka stilar genom rekvisita och exportera.

Nackdelar med styled-components

• Du måste installera ett tredjepartsbibliotek för att komma igång.

Syntactically Awesome Style Sheets (SASS/SCSS)

SASS erbjuder kraftfullare verktyg och funktioner än vanlig CSS. Du kan skriva stilar i två olika stilar med dessa tillägg: `.scss` och `.sass`.

SASS-syntaxen liknar den för vanlig CSS. Skillnaden är att du inte behöver använda inledande och avslutande parenteser när du skriver stilregler i SASS.

Ett enkelt exempel på SASS kan se ut så här:

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

För att börja använda SASS i din React-app måste du först kompilera SASS till vanlig CSS. När du har skapat din app med kommandot `Create React App`, kan du installera `node-sass` för att hantera kompileringen.

npm install node-sass

Sedan kan du skapa dina filer och ge dem tillägget `.scss` eller `.sass`. Därefter importerar du dina filer på vanligt sätt. Till exempel:

import "./Components/App.sass";

Fördelar med SASS/SCSS

• Erbjuder dynamiska funktioner som mixins, nästlade regler och `extend`.
• Mindre kod krävs för att skriva CSS.

Nackdelar med SASS/SCSS

• Stilar är globala, vilket kan leda till överskridande problem.

Vilken är den bästa metoden för styling?

Efter att ha diskuterat fem olika tillvägagångssätt, vill du kanske veta vilket som är det bästa. Det är svårt att utse en tydlig vinnare. Men dessa punkter kan hjälpa dig att fatta ett bra beslut:

• Prestanda.
• Om du behöver ett designsystem.
• Lättheten att optimera din kod.

Inline-stilar passar bra för enklare appar med lite kod. För större applikationer är de andra metoderna, som externa stilmallar, SASS, Styled-Components och CSS-moduler, mer lämpliga.

Vilka är de bästa metoderna för att underhålla CSS i en stor React-applikation?

• Undvik inline-styling. Att skriva inline-stilar för varje tagg i en stor React-app kan vara tidskrävande. Använd istället en extern stilmall som passar dina behov.
• Använd kodgranskare. Verktyg som Stylelint markerar fel i din kod så att du kan åtgärda dem tidigt.
• Gör regelbundna kodgranskningar. Att skriva CSS kan vara roligt, men regelbundna kodgranskningar gör det lättare att hitta och åtgärda problem tidigt.
• Automatisera tester på dina CSS-filer. Verktyg som Enzyme och Jest är utmärkta för att automatisera tester av din CSS-kod.
• Håll din kod DRY. Använd variabler och klasser för att återanvända stilar som färger och marginaler, med principen ”Don’t Repeat Yourself” (DRY).
• Använd namngivningssystem som Block Element Modifier (BEM). Det underlättar skrivandet av CSS-klasser som är enkla att förstå och återanvända.

Sammanfattning

Här ovan har vi gått igenom några sätt att styla React-applikationer. Valet av metod beror på dina behov, färdigheter och preferenser. Du kan även kombinera flera metoder, som inline- och externa stilmallar, i din React-app.

Du kan även utforska CSS-ramverk och bibliotek för frontend-utvecklare.