5 sätt att stilreagera med CSS [2023]

Visste du att över 97 % av webbplatserna använder CSS för styling?

Cascading Style Sheets, eller CSS, låter utvecklare bygga snygga, skanningsbara och presentabla webbsidor.

CSS-språket anger hur dokument presenteras för användaren. Ett dokument, i det här fallet, är en fil skriven i ett märkningsspråk som XML eller HTML.

Vad är styling i React?

Enkelheten att skapa, köra och underhålla en React-app är huvudorsaken bakom dess popularitet. React är ett JavaScript-bibliotek snarare än ett ramverk, som erbjuder mer än bara förskrivna funktioner och kodavsnitt.

Tillgängligheten av återanvändbara komponenter, dess flexibilitet, kodstabilitet, hastighet och prestanda är några av anledningarna till att React rankas högt bland JavaScript-ramverk och bibliotek.

Styling i React är processen att göra olika komponenter i en React-app visuellt tilltalande med hjälp av CSS. Det är dock värt att notera att React använder JSX (JavaScript och XML) istället för HTML som märkningsspråk. En av de stora skillnaderna är att HTML använder .class för att märka klasser medan JSX använder .ClassName för att beteckna detsamma.

Varför ska du styla React med CSS?

Gör din app responsiv. Moderna webbappar ska vara tillgängliga på både små och stora skärmar. CSS låter dig applicera mediefrågor på din React-app och göra den lyhörd för olika skärmstorlekar.
Påskynda utvecklingsprocessen. Du kan använda samma CSS-regel över flera komponenter i din React-app.
Gör React-appen underhållbar. Att göra utseendeändringar på specifika komponenter/delar av din app är enkelt med CSS.
Förbättrad användarupplevelse. CSS tillåter användarvänlig formatering. En React med text och knappar på logiska ställen är lätt att navigera och använda.

Det finns flera metoder som utvecklare kan använda för att styla sina React-appar. Följande är några av de vanligaste;

Skriv inline-stilar

Inline-stilar är det enklaste sättet att styla en React-app, eftersom användare inte behöver skapa en extern stilmall. CSS-stylingen appliceras direkt på React-koden.

Det är värt att notera att inline-stilar har hög företräde framför andra stilar. Således, om du hade en extern stilmall med viss formatering, skulle den åsidosättas av den inline-stilen.

Detta är en demonstration av inline-styling i en React-app.

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    <>

      <h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>

      <h2>Add a little style!</h2>

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Header />);

Det visade elementet kommer att visa en h1 med en ljusblå bakgrund.

Fördelar med inline styling

Snabbt. Det är det enklaste tillvägagångssättet, eftersom du lägger till stil direkt till taggen du vill styla.
Har stor preferens. Inline-stilar åsidosätter externa stilmallar. Således kan du använda den för att fokusera på en viss funktionalitet utan att ändra hela appen.
Fantastiskt för prototyper. Du kan använda inline-stilar för att testa funktionaliteten innan du införlivar formateringen på en extern stilmall.

Nackdelar med inline styling

Kan vara tråkigt. Att styla varje tagg direkt är tidskrävande.
Begränsad. Du kan inte använda CSS-funktioner som väljare och animationer med inline-stilar.
Många inline-stilar gör JSX-kod oläslig.

Importera externa formatmallar

Du kan skriva CSS i en extern fil och importera den till React-appen. Detta tillvägagångssätt är jämförbart med att importera en CSS-fil i ett HTML-dokuments -tagg.

För att uppnå detta måste du skapa en CSS-fil i appens katalog, importera den till din målkomponent och skriva stilregler för din app.

För att visa hur externa CSS-formatmallar fungerar kan du skapa en CSS-fil och namnge den App.css. Du kan sedan exportera den enligt följande.

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Ovanstående kodavsnitt importerar en extern stilmall till App.js-komponenten. Filen App.css finns i mappen Components.

Fördelar med externa CSS-stilmallar

Återanvändbar. Du kan använda samma CSS-regler över olika komponenter i en React-app.
Gör koden mer presentabel. Det är lätt att förstå kod när du använder externa stilmallar.
Ger tillgång till avancerade CSS-funktioner. Du kan använda pseudoklasser och avancerade väljare när du använder externa stilmallar.

Nackdelen med externa CSS-stilmallar

Kräver tillförlitlig namnkonvention för att säkerställa att stilar inte åsidosätts.

Använd CSS-moduler

React-appar kan bli riktigt stora. CSS-animationsnamn och klassnamn är, som standard, globala omfattningar. Den här inställningen kan vara problematisk när man hanterar stora stilmallar, eftersom en stil kan åsidosätta en annan.

CSS-moduler löser denna utmaning genom att avgränsa animationer och klassnamn lokalt. Detta tillvägagångssätt säkerställer att klassnamn endast är tillgängliga i filen/komponenten där de behövs. Varje klassnamn får ett unikt programmatiskt namn, vilket undviker konflikter.

För att implementera CSS-moduler, skapa en fil med .module.css. Om du vill namnge din stilmall som stil, kommer filnamnet att vara style.module.css.

Importera 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 kan importera CSS-modulen till din App.js enligt följande;

import { React } from "react";

import styles from "./styles.module.css";

function App() {

  return (

    <h1 className={styles.heading}>Hello adminvista.com reader</h1>

  );

}

export default App;

Fördelar med att använda CSS-moduler

Integreras enkelt med SCSS och CSS
Undviker klassnamnskonflikter

Nackdelar med att använda CSS-moduler

Att referera till klassnamn med CSS-moduler kan vara förvirrande för nybörjare.

Använd Styled-Components

Utformade komponenter tillåter utvecklare att skapa komponenter med CSS i JavaScript-kod. En formaterad komponent fungerar som en React-komponent som kommer med stilar. Styled Components erbjuder dynamisk styling och unika klassnamn.

För att börja använda Styled Components kan du installera paketet på din rotmapp med det här kommandot;

npm install styled-components

Nästa steg är att importera stilade komponenter till din React-app

Följande är ett kodavsnitt av App.js som använder formaterade komponenter;

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 ovanstående stilar importerade från Styled Components.

Fördelar med stilade komponenter

Det är förutsägbart. Stilar i denna stilmetod är kapslade i individuella komponenter.
Du behöver inte fokusera på dina klassers namnkonventioner. Skriv bara dina stilar så tar paketet hand om resten.
Du kan exportera formaterade komponenter som rekvisita. Stilade komponenter konverterar normal CSS till React-komponenter. Du kan alltså återanvända den här koden, utöka stilar genom rekvisita och exportera.

Nackdelen med stilade komponenter

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

Syntactically Awesome Style Sheets (SASS/SCSS)

SASS kommer med kraftfullare verktyg och funktioner som saknas i normal CSS. Du kan skriva stilar i två olika stilar med hjälp av dessa tillägg; .scss och .sass.

Syntaxen för SASS liknar den för vanlig CSS. Däremot behöver du inte de inledande och avslutande parenteserna när du skriver stilregler i SASS.

Ett enkelt utdrag av SASS kommer att visas enligt följande;

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. Efter att ha ställt in din app med kommandot Create React App kan du installera node-sass för att ta hand om kompileringen.

npm install node-sass

Du kan sedan skapa dina filer och ge dem antingen tilläggen .scss eller .sass. Du kan sedan importera dina filer på vanligt sätt. Till exempel;

import "./Components/App.sass";

Fördelar med SASS/SCSS

Den kommer med många dynamiska funktioner som mixins, kapsling och förlängning.
Du behöver inte mycket för att skriva CSS-kod när du använder SASS/SCSS

Nackdelar med SASS/SCSS

Stilar är globala, och du kan därför stöta på överordnade problem.

Vilken är den bästa stylingmetoden?

Eftersom vi har diskuterat fem tillvägagångssätt vill du veta vilket som är bäst. Det är svårt att lyfta fram den direkta vinnaren i den här diskussionen. Men dessa överväganden hjälper dig att fatta ett välgrundat beslut:

Prestandamåtten
Oavsett om du behöver ett designsystem
Lättheten att optimera din kod

Inline styling är lämplig när du har en enkel app med få rader kod. Dock alla andra; externa, SASS, Styled Components och CSS-moduler, är lämpliga för stora appar.

Vilka är de bästa metoderna för att underhålla CSS i en Large React Application?

Undvik inline-styling. Att skriva inline CSS-stilar för varje tagg i en stor React-app kan vara tröttsamt. Använd istället en extern stilmall som passar dina behov.
Luta din kod. Linters som Stylelint kommer att markera stylingfel i din kod så att du kan fixa dem tidigt.
Gör regelbundna kodgranskningar. Att skriva CSS verkar roligt, men regelbundna kodgranskningar gör det enkelt att identifiera buggar tidigt.
Automatisera tester på dina CSS-filer. Enzyme och Jest är fantastiska verktyg du kan använda för att automatisera tester på din CSS-kod.
Håll din kod DRY. när du har att göra med vanliga stilar som färger och marginaler, använd verktygsvariabler och klasser som det går med principen Don’t Repeat Yourself (DRY).
Använd namnkonventioner som Block Element Modifier. Ett sådant tillvägagångssätt gör det enkelt att skriva CSS-klasser som är lätta att förstå och återanvända.

Slutsats

Ovan är några av sätten du kan använda för att styla React. Valet av stylingsätt beror på dina behov, färdigheter och smak. Du kan till och med kombinera flera stylingmetoder, såsom inline och externa stilmallar, i din React-app.

Du kan också utforska några bästa CSS-ramverk och bibliotek för front-end-utvecklare.