Știați că peste 97% dintre site-uri web folosesc CSS pentru stil?
Cascading Style Sheets, sau CSS, permite dezvoltatorilor să creeze pagini web arătoase, scanabile și prezentabile.
Limbajul CSS specifică modul în care documentele sunt prezentate utilizatorului. Un document, în acest caz, este un fișier scris într-un limbaj de marcare precum XML sau HTML.
Cuprins
Ce este stilul în React?
Simplitatea creării, rulării și întreținerii unei aplicații React este principalul motiv din spatele popularității acesteia. React este mai degrabă o bibliotecă JavaScript decât un cadru, oferind mai mult decât funcții pre-scrise și fragmente de cod.
Disponibilitatea componentelor reutilizabile, flexibilitatea, stabilitatea codului, viteza și performanța acestora sunt câteva dintre motivele pentru care React se află pe locul înalt printre cadrele și bibliotecile JavaScript.
Stilizarea în React este procesul de a face diferite componente dintr-o aplicație React atractive vizual folosind CSS. Cu toate acestea, merită remarcat faptul că React folosește JSX (JavaScript și XML) în loc de HTML ca limbaj de marcare. Una dintre diferențele majore este că HTML folosește .class pentru a eticheta clasele, în timp ce JSX folosește .ClassName pentru a indica același lucru.
De ce ar trebui să stilați React folosind CSS?
- Faceți aplicația dvs. receptivă. Aplicațiile web moderne ar trebui să fie accesibile atât pe ecrane mici, cât și pe cele mari. CSS vă permite să aplicați interogări media aplicației dvs. React și să o faceți receptivă la diferite dimensiuni de ecran.
- Accelerează procesul de dezvoltare. Puteți utiliza aceeași regulă CSS în mai multe componente ale aplicației dvs. React.
- Faceți întreținerea aplicației React. Modificarea aspectului anumitor componente/părți ale aplicației este ușor folosind CSS.
- Experiență îmbunătățită a utilizatorului. CSS permite formatare ușor de utilizat. A React cu text și butoane în locuri logice este ușor de navigat și utilizat.
Există mai multe abordări pe care dezvoltatorii le pot folosi pentru a-și stila aplicațiile React. Următoarele sunt unele dintre cele mai comune;
Scrieți stiluri inline
Stilurile în linie sunt cea mai ușoară abordare pentru stilarea unei aplicații React, deoarece utilizatorii nu trebuie să creeze o foaie de stil externă. Stilul CSS este aplicat direct codului React.
Este demn de remarcat faptul că stilurile inline au o prioritate mare față de alte stiluri. Astfel, dacă ați avea o foaie de stil externă cu o anumită formatare, aceasta ar fi înlocuită de stilul inline.
Aceasta este o demonstrație a stilului inline într-o aplicație React.
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 />);
Elementul afișat va afișa un h1 cu un fundal albastru deschis.
Avantajele stilului inline
- Rapid. Este cea mai simplă abordare, deoarece adăugați stil direct etichetei pe care doriți să o stilați.
- Are o mare preferință. Stilurile inline înlocuiesc foile de stil externe. Astfel, îl puteți folosi pentru a vă concentra pe o anumită funcționalitate fără a schimba întreaga aplicație.
- Minunat pentru prototipare. Puteți utiliza stiluri inline pentru a testa funcționalitatea înainte de a încorpora formatarea pe o foaie de stil externă.
Contra stilului inline
- Poate fi plictisitor. Aranjarea directă a fiecărei etichete necesită timp.
- Limitat. Nu puteți utiliza funcții CSS, cum ar fi selectoare și animații cu stiluri inline.
- O mulțime de stiluri inline fac codul JSX imposibil de citit.
Importul foilor de stil externe
Puteți scrie CSS într-un fișier extern și îl puteți importa în aplicația React. Această abordare este comparabilă cu importul unui fișier CSS în eticheta
a unui document HTML.Pentru a realiza acest lucru, trebuie să creați un fișier CSS în directorul aplicației dvs., să îl importați în componenta țintă și să scrieți reguli de stil pentru aplicația dvs.
Pentru a demonstra cum funcționează foile de stil CSS externe, puteți crea un fișier CSS și îl puteți numi App.css. Apoi îl puteți exporta după cum urmează.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
Fragmentul de cod de mai sus importă o foaie de stil externă în componenta App.js. Fișierul App.css se află în folderul Componente.
Avantajele foilor de stil CSS externe
- Reutilizabil. Puteți utiliza aceleași reguli CSS în diferite componente într-o aplicație React.
- Face codul mai prezentabil. Înțelegerea codului este ușoară atunci când utilizați foi de stil externe.
- Oferă acces la funcții CSS avansate. Puteți utiliza pseudoclase și selectoare avansate atunci când utilizați foi de stil externe.
Confruntarea foilor de stil CSS externe
- Necesită convenție de denumire sigură pentru a se asigura că stilurile nu sunt anulate.
Utilizați module CSS
Aplicațiile React pot deveni foarte mari. Numele animațiilor CSS și numele claselor sunt, în mod implicit, acoperite la nivel global. Această setare poate fi problematică atunci când aveți de-a face cu foi de stil mari, deoarece un stil îl poate suprascrie pe altul.
Modulele CSS rezolvă această provocare prin definirea locală a animației și a numelor de clasă. Această abordare asigură că numele claselor sunt disponibile numai în fișierul/componenta acolo unde sunt necesare. Fiecare nume de clasă primește un nume programatic unic, evitând conflictele.
Pentru a implementa module CSS, creați un fișier cu .module.css. Dacă doriți să denumiți foaia de stil ca stil, numele fișierului va fi style.module.css.
Importați fișierul creat în componenta dvs. React și veți fi gata să începeți.
Fișierul dvs. CSS ar putea arăta cam așa;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Puteți importa modulul CSS pe App.js după cum urmează;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello tipstrick.ro reader</h1>
);
}
export default App;
Avantajele utilizării modulelor CSS
- Se integrează ușor cu SCSS și CSS
- Evită conflictele de nume de clasă
Contra folosirii modulelor CSS
- Referirea numelor de clase folosind module CSS poate fi confuză pentru începători.
Utilizați Componente cu stil
Componentele stilate permit dezvoltatorilor să creeze componente folosind CSS în codul JavaScript. O componentă stilată acționează ca o componentă React care vine cu stiluri. Componentele cu stil oferă un stil dinamic și nume de clase unice.
Pentru a începe să utilizați Componente cu stil, puteți instala pachetul în folderul rădăcină folosind această comandă;
npm install styled-components
Următorul pas este importarea componentelor stilate în aplicația dvs. React
Următorul este un fragment de cod al App.js care utilizează Componente cu stil;
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;
Aplicația redată va avea stilurile de mai sus importate din Componente stilate.
Avantajele componentelor cu stil
- Este previzibil. Stilurile din această abordare de stil sunt imbricate în componente individuale.
- Nu este nevoie să vă concentrați pe convențiile de denumire ale cursurilor dvs. Doar scrie-ți stilurile, iar pachetul se va ocupa de restul.
- Puteți exporta Componente cu stil ca elemente de recuzită. Componentele stilate convertesc CSS normale în componente React. Astfel, puteți reutiliza acest cod, puteți extinde stilurile prin elemente de recuzită și puteți exporta.
Con of Components Styled
- Trebuie să instalați o bibliotecă terță parte pentru a începe.
Foi de stil Syntacticly Awesome (SASS/SCSS)
SASS vine cu instrumente și funcții mai puternice care lipsesc în CSS normal. Puteți scrie stiluri în două stiluri diferite ghidate de aceste extensii; .scss și .sass.
Sintaxa pentru SASS este similară cu cea a CSS-ului obișnuit. Cu toate acestea, nu aveți nevoie de parantezele de deschidere și de închidere când scrieți reguli de stil în SASS.
Un simplu fragment de SASS va apărea după cum urmează;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
Pentru a începe să utilizați SASS în aplicația dvs. React, trebuie mai întâi să compilați SASS în CSS simplu. După configurarea aplicației prin comanda Creare aplicație React, puteți instala node-sass pentru a vă ocupa de compilare.
npm install node-sass
Puteți apoi să vă creați fișierele și să le oferiți fie extensii .scss, fie .sass. Puteți importa apoi fișierele în mod normal. De exemplu;
import "./Components/App.sass";
Avantajele SASS/SCSS
- Vine cu multe caracteristici dinamice, cum ar fi mixin, imbricare și extindere.
- Nu aveți prea multă îndoială pentru a scrie cod CSS atunci când utilizați SASS/SCSS
Contra SASS/SCSS
- Stilurile sunt globale și, astfel, puteți întâlni probleme primordiale.
Care este cea mai bună abordare de styling?
Deoarece am discutat despre cinci abordări, doriți să știți care este cea mai bună. Este greu de evidențiat câștigătorul definitiv în această discuție. Cu toate acestea, aceste considerații vă vor ajuta să luați o decizie informată:
- Măsurile de performanță
- Fie că aveți nevoie de un sistem de proiectare
- Ușurința de a vă optimiza codul
Stilul inline este potrivit atunci când aveți o aplicație simplă cu câteva linii de cod. Cu toate acestea, toate celelalte; externe, SASS, Componente stilate și module CSS, sunt potrivite pentru aplicații mari.
Care sunt cele mai bune practici pentru menținerea CSS într-o aplicație Large React?
- Evitați stilul în linie. Scrierea stilurilor CSS inline pentru fiecare etichetă într-o aplicație React mare poate fi obositoare. În schimb, utilizați o foaie de stil externă care se potrivește nevoilor dvs.
- Lasa-ti codul. Linters precum Stylelint vor evidenția erorile de stil în codul dvs., astfel încât să le puteți remedia din timp.
- Faceți recenzii regulate de cod. Scrierea CSS pare distractiv, dar recenziile regulate ale codului facilitează identificarea erorilor din timp.
- Automatizați testele pentru fișierele dvs. CSS. Enzyme și Jest sunt instrumente minunate pe care le puteți folosi pentru a automatiza testele pe codul dvs. CSS.
- Păstrați codul USCAT. atunci când aveți de-a face cu stiluri utilizate în mod obișnuit, cum ar fi culorile și marginile, utilizați variabile utilitare și clase, așa cum se întâmplă cu principiul Don’t Repeat Yourself (DRY).
- Folosiți convenții de denumire, cum ar fi Block Element Modifier. O astfel de abordare face ușor să scrieți clase CSS care sunt ușor de înțeles și reutilizat.
Concluzie
Mai sus sunt câteva dintre modalitățile pe care le puteți folosi pentru a stila React. Alegerea abordării stilului va depinde de nevoile, abilitățile și gusturile dvs. Puteți chiar să combinați mai multe abordări de stil, cum ar fi foile de stil inline și externe, în aplicația dvs. React.
De asemenea, puteți explora unele dintre cele mai bune cadre și biblioteci CSS pentru dezvoltatorii front-end.