Wist je dat meer dan 97% van de websites CSS gebruiken voor styling?
Met Cascading Style Sheets, of CSS, kunnen ontwikkelaars mooie, scanbare en representatieve webpagina’s bouwen.
CSS-taal specificeert hoe documenten aan de gebruiker worden gepresenteerd. Een document is in dit geval een bestand geschreven in een opmaaktaal zoals XML of HTML.
Wat is styling in React?
De eenvoud van het maken, uitvoeren en onderhouden van een React-app is de belangrijkste reden achter zijn populariteit. React is eerder een JavaScript-bibliotheek dan een raamwerk en biedt meer dan alleen vooraf geschreven functies en codefragmenten.
De beschikbaarheid van herbruikbare componenten, de flexibiliteit, codestabiliteit, snelheid en prestaties zijn enkele van de redenen waarom React hoog scoort onder JavaScript-frameworks en -bibliotheken.
Styling in React is het proces waarbij verschillende componenten in een React-app visueel aantrekkelijk worden gemaakt met behulp van CSS. Het is echter vermeldenswaard dat React JSX (JavaScript en XML) gebruikt in plaats van HTML als opmaaktaal. Een van de belangrijkste verschillen is dat HTML .class gebruikt om klassen te labelen, terwijl JSX .ClassName gebruikt om hetzelfde aan te duiden.
Waarom zou je React stylen met CSS?
- Maak uw app responsief. Moderne webapps moeten toegankelijk zijn op zowel kleine als grote schermen. Met CSS kunt u mediaquery’s toepassen op uw React-app en deze laten reageren op verschillende schermformaten.
- Versnel het ontwikkelingsproces. U kunt dezelfde CSS-regel gebruiken voor verschillende componenten van uw React-app.
- Maak de React-app onderhoudbaar. Het uiterlijk van specifieke componenten/delen van uw app wijzigen is eenvoudig met behulp van CSS.
- Verbeterde gebruikerservaring. CSS maakt gebruiksvriendelijke opmaak mogelijk. Een React met tekst en knoppen op logische plaatsen is gemakkelijk te navigeren en te gebruiken.
Er zijn verschillende benaderingen die ontwikkelaars kunnen gebruiken om hun React-apps te stylen. De volgende zijn enkele van de meest voorkomende;
Schrijf inline-stijlen
Inline-stijlen zijn de gemakkelijkste manier om een React-app te stylen, aangezien gebruikers geen externe stylesheet hoeven te maken. De CSS-styling wordt rechtstreeks toegepast op de React-code.
Het is vermeldenswaard dat inline-stijlen een hoge prioriteit hebben ten opzichte van andere stijlen. Dus als u een externe stijlpagina met enige opmaak had, zou deze worden overschreven door de inline-stijl.
Dit is een demonstratie van inline styling in een 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 />);
Het weergegeven element geeft een h1 weer met een lichtblauwe achtergrond.
Voordelen van inline styling
- Snel. Het is de eenvoudigste aanpak, aangezien u stijl rechtstreeks toevoegt aan de tag die u wilt stylen.
- Heeft grote voorkeur. Inline stijlen overschrijven externe stylesheets. U kunt het dus gebruiken om u te concentreren op een bepaalde functionaliteit zonder de hele app te wijzigen.
- Geweldig voor prototypen. U kunt inline stijlen gebruiken om de functionaliteit te testen voordat u de opmaak in een externe stijlpagina opneemt.
Nadelen van inline styling
- Kan vervelend zijn. Elke tag direct stylen is tijdrovend.
- Beperkt. U kunt geen CSS-functies zoals selectors en animaties gebruiken met inline stijlen.
- Veel inline-stijlen maken JSX-code onleesbaar.
Externe stylesheets importeren
U kunt CSS in een extern bestand schrijven en importeren in de React-app. Deze benadering is vergelijkbaar met het importeren van een CSS-bestand in de
-tag van een HTML-document.Om dit te bereiken, moet u een CSS-bestand maken in de map van uw app, dit importeren in uw doelcomponent en stijlregels schrijven voor uw app.
Om te demonstreren hoe externe CSS-stylesheets werken, kunt u een CSS-bestand maken en dit App.css noemen. Je kunt het dan als volgt exporteren.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
Het bovenstaande codefragment importeert een externe stylesheet naar de App.js-component. Het bestand App.css bevindt zich in de map Components.
Voordelen van externe CSS-stijlbladen
- Herbruikbaar. U kunt dezelfde CSS-regel(s) gebruiken voor verschillende componenten in een React-app.
- Maakt code presentabeler. Het begrijpen van code is eenvoudig bij het gebruik van externe stylesheets.
- Geeft toegang tot geavanceerde CSS-functies. U kunt pseudo-klassen en geavanceerde selectors gebruiken bij het gebruik van externe stijlbladen.
Tegenslag van externe CSS-stylesheets
- Vereist betrouwbare naamgevingsconventie om ervoor te zorgen dat stijlen niet overschrijven.
Gebruik CSS-modules
React-apps kunnen erg groot worden. CSS-animatienamen en klassennamen worden standaard wereldwijd bestreken. Deze instelling kan problematisch zijn bij het omgaan met grote stijlbladen, omdat de ene stijl de andere kan overschrijven.
CSS-modules lossen deze uitdaging op door animatie- en klassennamen lokaal te bekijken. Deze aanpak zorgt ervoor dat klassennamen alleen beschikbaar zijn in het bestand/de component waar ze nodig zijn. Elke klassenaam krijgt een unieke programmatische naam, waardoor conflicten worden vermeden.
Om CSS-modules te implementeren, maakt u een bestand met .module.css. Als u uw stylesheet Style wilt noemen, is de bestandsnaam style.module.css.
Importeer het gemaakte bestand in uw React-component en u bent klaar om te beginnen.
Uw CSS-bestand kan er ongeveer zo uitzien;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
U kunt de CSS-module als volgt op uw App.js importeren;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello epcdream.nl reader</h1>
);
}
export default App;
Voordelen van het gebruik van CSS-modules
- Integreert eenvoudig met SCSS en CSS
- Vermijdt klassennaamconflicten
Nadelen van het gebruik van CSS-modules
- Verwijzen naar klassennamen met behulp van CSS-modules kan verwarrend zijn voor beginners.
Gebruik gestileerde componenten
Met gestileerde componenten kunnen ontwikkelaars componenten maken met behulp van CSS in JavaScript-code. Een gestileerde component fungeert als een React-component die wordt geleverd met stijlen. Gestileerde componenten bieden dynamische styling en unieke klassenamen.
Om Styled Components te gaan gebruiken, kunt u het pakket met deze opdracht in uw hoofdmap installeren;
npm install styled-components
De volgende stap is het importeren van Styled Components in uw React-app
Het volgende is een codefragment van App.js dat Styled Components gebruikt;
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;
De gerenderde app heeft de bovenstaande stijlen geïmporteerd uit Styled Components.
Voordelen van gestileerde componenten
- Het is voorspelbaar. Stijlen in deze stijlbenadering zijn genest in individuele componenten.
- U hoeft zich niet te concentreren op de naamgevingsconventies van uw klassen. Schrijf gewoon uw stijlen en het pakket zorgt voor de rest.
- U kunt Styled Components exporteren als rekwisieten. Gestileerde componenten converteren normale CSS naar React-componenten. U kunt deze code dus hergebruiken, stijlen uitbreiden via rekwisieten en exporteren.
Con van gestileerde componenten
- U moet een bibliotheek van derden installeren om aan de slag te gaan.
Syntactisch geweldige stijlbladen (SASS/ SCSS)
SASS wordt geleverd met krachtigere tools en functies die ontbreken in normale CSS. U kunt stijlen in twee verschillende stijlen schrijven, geleid door deze extensies; .scss en .sass.
De syntaxis voor SASS is vergelijkbaar met die van gewone CSS. U hebt de openings- en sluitingshaakjes echter niet nodig bij het schrijven van stijlregels in SASS.
Een eenvoudig fragment van SASS zal als volgt verschijnen;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
Om SASS in uw React-app te gaan gebruiken, moet u eerst SASS compileren naar gewone CSS. Nadat je je app hebt ingesteld via de opdracht Create React App, kun je node-sass installeren om voor de compilatie te zorgen.
npm install node-sass
U kunt vervolgens uw bestanden maken en deze de extensie .scss of .sass geven. Vervolgens kunt u uw bestanden op de normale manier importeren. Bijvoorbeeld;
import "./Components/App.sass";
Voordelen van SASS/SCSS
- Het wordt geleverd met veel dynamische functies, zoals mixins, nesten en uitbreiden.
- Je hebt niet veel standaard om CSS-code te schrijven wanneer je SASS/SCSS gebruikt
Nadelen van SASS/SCSS
- Stijlen zijn globaal en u kunt dus op overheersende problemen stuiten.
Wat is de beste stylingaanpak?
Aangezien we vijf benaderingen hebben besproken, wil je weten welke de beste is. Het is moeilijk om in deze discussie de absolute winnaar aan te duiden. Deze overwegingen helpen u echter een weloverwogen beslissing te nemen:
- De prestatiestatistieken
- Of u nu een ontwerpsysteem nodig heeft
- Het gemak van het optimaliseren van uw code
Inline-styling is geschikt als u een eenvoudige app heeft met weinig regels code. Echter, alle anderen; extern, SASS, Styled Components en CSS Modules zijn geschikt voor grote apps.
Wat zijn de best practices voor het onderhouden van CSS in een grote React-applicatie?
- Vermijd inline styling. Het schrijven van inline CSS-stijlen voor elke tag in een grote React-app kan vermoeiend zijn. Gebruik in plaats daarvan een externe stijlpagina die aan uw behoeften voldoet.
- Lint uw code. Linters zoals Stylelint zullen stijlfouten in uw code markeren, zodat u ze vroegtijdig kunt oplossen.
- Voer regelmatig codebeoordelingen uit. Het schrijven van CSS lijkt leuk, maar regelmatige codebeoordelingen maken het gemakkelijk om bugs vroegtijdig te identificeren.
- Automatiseer tests op uw CSS-bestanden. Enzyme en Jest zijn geweldige tools die je kunt gebruiken om tests op je CSS-code te automatiseren.
- Houd je code DROOG. gebruik bij veelgebruikte stijlen zoals kleuren en marges gebruiksvariabelen en klassen zoals dat hoort bij het Don’t Repeat Yourself (DRY) -principe.
- Gebruik naamconventies zoals Block Element Modifier. Een dergelijke aanpak maakt het gemakkelijk om CSS-klassen te schrijven die gemakkelijk te begrijpen en te hergebruiken zijn.
Conclusie
Hierboven staan enkele manieren waarop je React kunt stylen. De keuze van de stylingbenadering hangt af van uw behoeften, vaardigheden en smaak. Je kunt zelfs verschillende stylingbenaderingen combineren, zoals inline en externe stylesheets, in je React-app.
U kunt ook enkele beste CSS-frameworks en -bibliotheken verkennen voor front-end-ontwikkelaars.
