Vidste du, at over 97 % af websteder bruger CSS til styling?
Cascading Style Sheets, eller CSS, giver udviklere mulighed for at bygge flotte, scanbare og præsentable websider.
CSS-sprog angiver, hvordan dokumenter præsenteres for brugeren. Et dokument, i dette tilfælde, er en fil skrevet i et opmærkningssprog såsom XML eller HTML.
Indholdsfortegnelse
Hvad er styling i React?
Enkelheden ved at oprette, køre og vedligeholde en React-app er hovedårsagen til dens popularitet. React er et JavaScript-bibliotek snarere end et framework, der tilbyder mere end blot forudskrevne funktioner og kodestykker.
Tilgængeligheden af genbrugelige komponenter, dens fleksibilitet, kodestabilitet, hastighed og ydeevne er nogle af grundene til, at React er rangeret højt blandt JavaScript-rammer og biblioteker.
Styling i React er processen med at gøre forskellige komponenter i en React-app visuelt tiltalende ved hjælp af CSS. Det er dog værd at bemærke, at React bruger JSX (JavaScript og XML) i stedet for HTML som opmærkningssprog. En af de største forskelle er, at HTML bruger .class til at mærke klasser, mens JSX bruger .ClassName til at angive det samme.
Hvorfor skal du style React ved hjælp af CSS?
- Gør din app responsiv. Moderne webapps skal være tilgængelige på både små og store skærme. CSS giver dig mulighed for at anvende medieforespørgsler på din React-app og gøre den lydhør over for forskellige skærmstørrelser.
- Fremskynd udviklingsprocessen. Du kan bruge den samme CSS-regel på tværs af flere komponenter i din React-app.
- Gør React-appen vedligeholdelsesvenlig. Det er nemt at foretage ændringer i udseendet af specifikke komponenter/dele af din app ved hjælp af CSS.
- Forbedret brugeroplevelse. CSS tillader brugervenlig formatering. A React med tekst og knapper på logiske steder er let at navigere og bruge.
Der er flere tilgange, som udviklere kan bruge til at style deres React-apps. Følgende er nogle af de mest almindelige;
Skriv Inline Styles
Inline-stile er den nemmeste tilgang til styling af en React-app, da brugerne ikke behøver at oprette et eksternt stylesheet. CSS-stylingen påføres direkte på React-koden.
Det er værd at bemærke, at inline-stile har høj forrang frem for andre stilarter. Således, hvis du havde et eksternt typografiark med en vis formatering, ville det blive tilsidesat af den indlejrede typografi.
Dette er en demonstration af 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 viste element vil vise en h1 med en lyseblå baggrund.
Fordele ved inline styling
- Hurtigt. Det er den enkleste tilgang, da du tilføjer stil direkte til det tag, du vil style.
- Har stor præference. Indlejrede typografier tilsidesætter eksterne typografiark. Således kan du bruge den til at fokusere på en bestemt funktionalitet uden at ændre hele appen.
- Fantastisk til prototyping. Du kan bruge indlejrede typografier til at teste funktionaliteten, før du inkorporerer formateringen på et eksternt typografiark.
Ulemper ved inline styling
- Kan være trættende. At style hvert tag direkte er tidskrævende.
- Begrænset. Du kan ikke bruge CSS-funktioner som vælgere og animationer med inline-stile.
- Mange inline-stile gør JSX-kode ulæselig.
Import af eksterne typografiark
Du kan skrive CSS i en ekstern fil og importere den til React-appen. Denne fremgangsmåde kan sammenlignes med at importere en CSS-fil i et HTML-dokuments
-tag.For at opnå dette skal du oprette en CSS-fil i din apps mappe, importere den til din målkomponent og skrive stilregler for din app.
For at demonstrere, hvordan eksterne CSS-stylesheets fungerer, kan du oprette en CSS-fil og navngive den App.css. Du kan derefter eksportere den som følger.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
Ovenstående kodestykke importerer et eksternt typografiark til App.js-komponenten. App.css-filen er placeret i mappen Components.
Fordele ved eksterne CSS-stilark
- Genanvendelig. Du kan bruge de samme CSS-regler på tværs af forskellige komponenter i en React-app.
- Gør koden mere præsentabel. Det er nemt at forstå kode, når du bruger eksterne stylesheets.
- Giver adgang til avancerede CSS-funktioner. Du kan bruge pseudoklasser og avancerede vælgere, når du bruger eksterne typografiark.
Ulemper ved eksterne CSS-stilark
- Kræver pålidelig navnekonvention for at sikre, at stilarter ikke tilsidesætter.
Brug CSS-moduler
React-apps kan blive rigtig store. CSS-animationsnavne og klassenavne er som standard omfattet globalt. Denne indstilling kan være problematisk, når man har at gøre med store typografiark, da én typografi kan tilsidesætte en anden.
CSS-moduler løser denne udfordring ved at afgrænse animation og klassenavne lokalt. Denne tilgang sikrer, at klassenavne kun er tilgængelige i filen/komponenten, hvor de er nødvendige. Hvert klassenavn får et unikt programmatisk navn, så konflikter undgås.
For at implementere CSS-moduler skal du oprette en fil med .module.css. Hvis du vil navngive dit stylesheet som style, vil filnavnet være style.module.css.
Importer den oprettede fil til din React-komponent, og du er klar til at starte.
Din CSS-fil kan se nogenlunde sådan ud;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Du kan importere CSS-modulet på din App.js som følger;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello toadmin.dk reader</h1>
);
}
export default App;
Fordele ved at bruge CSS-moduler
- Integrerer nemt med SCSS og CSS
- Undgår klassenavnekonflikter
Ulemper ved at bruge CSS-moduler
- At henvise til klassenavne ved hjælp af CSS-moduler kan være forvirrende for begyndere.
Brug Styled-Components
Stylede komponenter giver udviklere mulighed for at oprette komponenter ved hjælp af CSS i JavaScript-kode. En stylet komponent fungerer som en React-komponent, der følger med stilarter. Stylede komponenter tilbyder dynamisk styling og unikke klassenavne.
For at begynde at bruge Styled Components, kan du installere pakken på din rodmappe ved hjælp af denne kommando;
npm install styled-components
Det næste trin er at importere stilede komponenter til din React-app
Følgende er et kodestykke af App.js, der bruger stilede 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 gengivne app vil have ovenstående stilarter importeret fra Stylede komponenter.
Fordele ved stilede komponenter
- Det er forudsigeligt. Styles i denne stylingtilgang er indlejret i individuelle komponenter.
- Ingen grund til at fokusere på dine klassers navnekonventioner. Bare skriv dine styles, og pakken tager sig af resten.
- Du kan eksportere stilede komponenter som rekvisitter. Stylede komponenter konverterer normal CSS til React-komponenter. Du kan således genbruge denne kode, udvide stilarter gennem rekvisitter og eksportere.
Ulemper med stilede komponenter
- Du skal installere et tredjepartsbibliotek for at komme i gang.
Syntaktisk fantastiske stilark (SASS/ SCSS)
SASS kommer med mere kraftfulde værktøjer og funktioner, der mangler i normal CSS. Du kan skrive stilarter i to forskellige stilarter styret af disse udvidelser; .scss og .sass.
Syntaksen for SASS ligner den for almindelig CSS. Du behøver dog ikke åbne og lukke parenteser, når du skriver stilregler i SASS.
Et simpelt uddrag af SASS vises som følger;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
For at begynde at bruge SASS i din React-app, skal du først kompilere SASS til almindelig CSS. Efter at have konfigureret din app via kommandoen Create React App, kan du installere node-sass for at tage dig af kompileringen.
npm install node-sass
Du kan derefter oprette dine filer og give dem enten .scss- eller .sass-udvidelser. Du kan derefter importere dine filer på normal vis. For eksempel;
import "./Components/App.sass";
Fordele ved SASS/SCSS
- Den kommer med mange dynamiske funktioner såsom mixins, indlejring og forlængelse.
- Du behøver ikke meget for at skrive CSS-kode, når du bruger SASS/SCSS
Ulemper ved SASS/SCSS
- Styles er globale, og du kan derfor støde på altoverskyggende problemer.
Hvad er den bedste styling tilgang?
Da vi har diskuteret fem tilgange, vil du gerne vide, hvilken der er den bedste. Det er svært at fremhæve den direkte vinder i denne diskussion. Disse overvejelser vil dog hjælpe dig med at træffe en informeret beslutning:
- Præstationsmålingerne
- Uanset om du har brug for et designsystem
- Det er nemt at optimere din kode
Inline styling er velegnet, når du har en simpel app med få linjer kode. Dog alle de andre; eksterne, SASS, Styled Components og CSS-moduler, er velegnede til store apps.
Hvad er den bedste praksis for at vedligeholde CSS i en Large React-applikation?
- Undgå inline styling. At skrive inline CSS-stile til hvert tag i en stor React-app kan være trættende. Brug i stedet et eksternt stilark, der passer til dine behov.
- Fnug din kode. Linters såsom Stylelint vil fremhæve styling fejl i din kode, så du kan rette dem tidligt.
- Lav regelmæssige kodegennemgange. Det virker sjovt at skrive CSS, men regelmæssige kodegennemgange gør det nemt at identificere fejl tidligt.
- Automatiser test på dine CSS-filer. Enzyme og Jest er fantastiske værktøjer, du kan bruge til at automatisere tests på din CSS-kode.
- Hold din kode TØRT. Når du beskæftiger dig med almindeligt anvendte stilarter såsom farver og marginer, skal du bruge hjælpevariabler og klasser, som det går med Don’t Repeat Yourself (DRY) princippet.
- Brug navngivningskonventioner såsom Block Element Modifier. En sådan tilgang gør det nemt at skrive CSS-klasser, der er nemme at forstå og genbruge.
Konklusion
Ovenfor er nogle af de måder, du kan bruge til at style React. Valget af stylingtilgang vil afhænge af dine behov, færdigheder og smag. Du kan endda kombinere flere stylingtilgange, såsom inline og eksterne style sheets, i din React-app.
Du kan også udforske nogle af de bedste CSS-rammer og biblioteker til frontend-udviklere.