5 måter å stilreagere på ved hjelp av CSS [2023]

02/03/2023 admin

0 Shares

Visste du at over 97 % av nettstedene bruker CSS for styling?

Cascading Style Sheets, eller CSS, lar utviklere bygge pene, skannbare og presentable nettsider.

CSS-språket spesifiserer hvordan dokumenter presenteres for brukeren. Et dokument, i dette tilfellet, er en fil skrevet i et markup-språk som XML eller HTML.

Hva er styling i React?

Enkelheten med å lage, kjøre og vedlikeholde en React-app er hovedårsaken til dens popularitet. React er et JavaScript-bibliotek snarere enn et rammeverk, og tilbyr mer enn bare forhåndsskrevne funksjoner og kodebiter.

Tilgjengeligheten av gjenbrukbare komponenter, dens fleksibilitet, kodestabilitet, hastighet og ytelse er noen av grunnene til at React er rangert høyt blant JavaScript-rammeverk og -biblioteker.

Styling i React er prosessen med å gjøre ulike komponenter i en React-app visuelt tiltalende ved hjelp av CSS. Det er imidlertid verdt å merke seg at React bruker JSX (JavaScript og XML) i stedet for HTML som sitt markup-språk. En av de største forskjellene er at HTML bruker .class for å merke klasser mens JSX bruker .ClassName for å betegne det samme.

Hvorfor bør du style React med CSS?

Gjør appen din responsiv. Moderne nettapper skal være tilgjengelig på både små og store skjermer. CSS lar deg bruke medieforespørsler på React-appen din og gjøre den responsiv for varierende skjermstørrelser.
Få fart på utviklingsprosessen. Du kan bruke den samme CSS-regelen på tvers av flere komponenter i React-appen din.
Gjør React-appen vedlikeholdbar. Det er enkelt å gjøre utseendeendringer på bestemte komponenter/deler av appen din ved å bruke CSS.
Forbedret brukeropplevelse. CSS tillater brukervennlig formatering. A React med tekst og knapper på logiske steder er enkel å navigere og bruke.

Det er flere tilnærminger som utviklere kan bruke for å style React-appene sine. Følgende er noen av de vanligste;

Skriv innebygde stiler

Innebygde stiler er den enkleste tilnærmingen til å style en React-app, siden brukere ikke trenger å lage et eksternt stilark. CSS-stylingen brukes direkte på React-koden.

Trenger du Anti-Ransomware-programvare til PC-en din?

Det er verdt å merke seg at inline-stiler har høy forrang fremfor andre stiler. Derfor, hvis du hadde et eksternt stilark med noe formatering, ville det bli overstyrt av den innebygde stilen.

Dette er en demonstrasjon 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 viste elementet vil vise en h1 med en lyseblå bakgrunn.

Fordeler med inline styling

Rask. Det er den enkleste tilnærmingen, siden du legger til stil direkte til taggen du vil style.
Har stor preferanse. Innebygde stiler overstyrer eksterne stilark. Dermed kan du bruke den til å fokusere på en bestemt funksjonalitet uten å endre hele appen.
Fantastisk for prototyping. Du kan bruke innebygde stiler for å teste funksjonaliteten før du inkorporerer formateringen på et eksternt stilark.

Ulemper med inline styling

Kan være kjedelig. Det er tidkrevende å style hver tagg direkte.
Begrenset. Du kan ikke bruke CSS-funksjoner som velgere og animasjoner med innebygde stiler.
Mange innebygde stiler gjør JSX-kode uleselig.

Importere eksterne stilark

Du kan skrive CSS i en ekstern fil og importere den til React-appen. Denne tilnærmingen kan sammenlignes med å importere en CSS-fil i et HTML-dokuments -tag.

For å oppnå dette må du opprette en CSS-fil i appens katalog, importere den til målkomponenten og skrive stilregler for appen din.

For å demonstrere hvordan eksterne CSS-stilark fungerer, kan du opprette en CSS-fil og gi den navnet App.css. Du kan deretter eksportere den som følger.

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Kodebiten ovenfor importerer et eksternt stilark til App.js-komponenten. App.css-filen ligger i Components-mappen.

Fordeler med eksterne CSS-stilark

Gjenbrukbare. Du kan bruke de samme CSS-reglene på tvers av forskjellige komponenter i en React-app.
Gjør koden mer presentabel. Det er enkelt å forstå kode når du bruker eksterne stilark.
Gir tilgang til avanserte CSS-funksjoner. Du kan bruke pseudoklasser og avanserte velgere når du bruker eksterne stilark.

Ulemper med eksterne CSS-stilark

Krever pålitelig navnekonvensjon for å sikre at stiler ikke overstyrer.

Bruk CSS-moduler

React-apper kan bli veldig store. CSS-animasjonsnavn og klassenavn er, som standard, globalt. Denne innstillingen kan være problematisk når du arbeider med store stilark, ettersom en stil kan overstyre en annen.

CSS-moduler løser denne utfordringen ved å avgrense animasjon og klassenavn lokalt. Denne tilnærmingen sikrer at klassenavn bare er tilgjengelig i filen/komponenten der de er nødvendig. Hvert klassenavn får et unikt programmatisk navn, og unngår konflikter.

For å implementere CSS-moduler, lag en fil med .module.css. Hvis du vil navngi stilarket ditt som stil, vil filnavnet være style.module.css.

11 beste online WebM til MP4-konverteringsverktøy

Importer den opprettede filen til React-komponenten din, og du vil være klar til å starte.

CSS-filen din kan se omtrent slik ut;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Du kan importere CSS-modulen til din App.js som følger;

import { React } from "react";

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

function App() {

  return (

    <h1 className={styles.heading}>Hello tipsbilk.net reader</h1>

  );

}

export default App;

Fordeler med å bruke CSS-moduler

Integrerer enkelt med SCSS og CSS
Unngår klassenavnkonflikter

Ulemper med å bruke CSS-moduler

Å referere til klassenavn ved å bruke CSS-moduler kan være forvirrende for nybegynnere.

Bruk Styled-Components

Stylede komponenter lar utviklere lage komponenter ved å bruke CSS i JavaScript-kode. En stylet komponent fungerer som en React-komponent som følger med stiler. Stylede komponenter tilbyr dynamisk styling og unike klassenavn.

For å begynne å bruke stilede komponenter, kan du installere pakken på rotmappen ved å bruke denne kommandoen;

npm install styled-components

Det neste trinnet er å importere stilede komponenter til React-appen din

Følgende er en kodebit av App.js som bruker 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 gjengitte appen vil ha stilene ovenfor importert fra stilede komponenter.

Fordeler med stilede komponenter

Det er forutsigbart. Stiler i denne stiltilnærmingen er nestet inn i individuelle komponenter.
Du trenger ikke å fokusere på klassenes navnekonvensjoner. Bare skriv stilene dine, så tar pakken seg av resten.
Du kan eksportere stilede komponenter som rekvisitter. Stylede komponenter konverterer normal CSS til React-komponenter. Du kan dermed gjenbruke denne koden, utvide stiler gjennom rekvisitter og eksportere.

Ulempen med stilede komponenter

Du må installere et tredjepartsbibliotek for å komme i gang.

Syntaktisk fantastiske stilark (SASS/ SCSS)

SASS kommer med kraftigere verktøy og funksjoner som mangler i vanlig CSS. Du kan skrive stiler i to forskjellige stiler veiledet av disse utvidelsene; .scss og .sass.

Syntaksen for SASS er lik den for vanlig CSS. Du trenger imidlertid ikke åpnings- og lukkeparentesene når du skriver stilregler i SASS.

Et enkelt utdrag av SASS vil 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 å begynne å bruke SASS i React-appen din, må du først kompilere SASS til vanlig CSS. Etter å ha satt opp appen din via Create React App-kommandoen, kan du installere node-sass for å ta deg av kompileringen.

npm install node-sass

Du kan deretter opprette filene dine og gi dem enten .scss- eller .sass-utvidelser. Du kan deretter importere filene dine på vanlig måte. For eksempel;

import "./Components/App.sass";

Fordeler med SASS/SCSS

Den kommer med mange dynamiske funksjoner som mixins, nesting og extension.
Du trenger ikke mye for å skrive CSS-kode når du bruker SASS/SCSS

Skadelig programvare for mobil – Slik beskytter du dine mobile enheter

Ulemper med SASS/SCSS

Stiler er globale, og du kan dermed støte på overordnede problemer.

Hva er den beste stylingtilnærmingen?

Siden vi har diskutert fem tilnærminger, vil du vite hvilken som er best. Det er vanskelig å trekke frem vinneren i denne diskusjonen. Imidlertid vil disse hensynene hjelpe deg med å ta en informert beslutning:

Ytelsesberegningene
Enten du trenger et designsystem
Det er enkelt å optimalisere koden din

Inline styling passer når du har en enkel app med få linjer med kode. Men alle de andre; eksterne, SASS, Styled Components og CSS-moduler, passer for store apper.

Hva er de beste fremgangsmåtene for å vedlikeholde CSS i en Large React-applikasjon?

Unngå inline styling. Å skrive innebygde CSS-stiler for hver tag i en stor React-app kan være slitsomt. Bruk i stedet et eksternt stilark som passer dine behov.
Lint koden din. Linters som Stylelint vil fremheve stylingfeil i koden din slik at du kan fikse dem tidlig.
Gjør regelmessige kodegjennomganger. Å skrive CSS virker morsomt, men regelmessige kodegjennomganger gjør det enkelt å identifisere feil tidlig.
Automatiser tester på CSS-filene dine. Enzyme og Jest er fantastiske verktøy du kan bruke til å automatisere tester på CSS-koden din.
Hold koden din TØRR. når du har å gjøre med vanlige stiler som farger og marginer, bruk verktøyvariabler og klasser som det går med Don’t Repeat Yourself (DRY)-prinsippet.
Bruk navnekonvensjoner som Block Element Modifier. En slik tilnærming gjør det enkelt å skrive CSS-klasser som er enkle å forstå og gjenbruke.

Konklusjon

Ovenfor er noen av måtene du kan bruke for å style React. Valget av stylingtilnærming vil avhenge av dine behov, ferdigheter og smak. Du kan til og med kombinere flere stylingtilnærminger, for eksempel innebygde og eksterne stilark, i React-appen din.

Du kan også utforske noen av de beste CSS-rammeverkene og -bibliotekene for front-end-utviklere.

Din mening ?