5 modi per modellare la reazione usando i CSS [2023]

di

Sapevi che oltre il 97% dei siti Web utilizza i CSS per lo styling?

Cascading Style Sheets, o CSS, consente agli sviluppatori di creare pagine Web di bell’aspetto, scansionabili e presentabili.

Il linguaggio CSS specifica come i documenti vengono presentati all’utente. Un documento, in questo caso, è un file scritto in un linguaggio di markup come XML o HTML.

Cos’è lo stile in React?

La semplicità di creazione, esecuzione e manutenzione di un’app React è la ragione principale della sua popolarità. React è una libreria JavaScript piuttosto che un framework, che offre più di semplici funzioni pre-scritte e frammenti di codice.

La disponibilità di componenti riutilizzabili, la sua flessibilità, stabilità del codice, velocità e prestazioni sono alcuni dei motivi per cui React è classificato in alto tra i framework e le librerie JavaScript.

Lo stile in React è il processo di rendere visivamente accattivanti vari componenti in un’app React utilizzando i CSS. Tuttavia, vale la pena notare che React utilizza JSX (JavaScript e XML) invece di HTML come linguaggio di markup. Una delle principali differenze è che l’HTML usa .class per etichettare le classi mentre JSX usa .ClassName per indicare lo stesso.

Perché dovresti modellare React usando i CSS?

  • Rendi reattiva la tua app. Le moderne app Web dovrebbero essere accessibili su schermi sia piccoli che grandi. CSS ti consente di applicare query multimediali alla tua app React e renderla reattiva alle diverse dimensioni dello schermo.
  • Velocizza il processo di sviluppo. Puoi utilizzare la stessa regola CSS su diversi componenti della tua app React.
  • Rendi manutenibile l’app React. Apportare modifiche all’aspetto a componenti/parti specifiche della tua app è facile utilizzando i CSS.
  • Esperienza utente migliorata. I CSS consentono una formattazione user-friendly. Un React con testo e pulsanti in posizioni logiche è facile da navigare e utilizzare.

Esistono diversi approcci che gli sviluppatori possono utilizzare per modellare le proprie app React. I seguenti sono alcuni dei più comuni;

Scrivi stili in linea

Gli stili incorporati sono l’approccio più semplice per definire lo stile di un’app React, poiché gli utenti non devono creare un foglio di stile esterno. Lo stile CSS viene applicato direttamente al codice React.

Vale la pena notare che gli stili in linea hanno un’elevata precedenza rispetto ad altri stili. Pertanto, se si dispone di un foglio di stile esterno con una certa formattazione, verrebbe sovrascritto dallo stile in linea.

Questa è una dimostrazione dello stile in linea in un’app 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 />);

L’elemento visualizzato mostrerà un h1 con uno sfondo azzurro.

Vantaggi dello stile in linea

  • Presto. È l’approccio più semplice, in quanto aggiungi lo stile direttamente al tag che desideri modellare.
  • Ha una grande preferenza. Gli stili incorporati sostituiscono i fogli di stile esterni. Pertanto, puoi usarlo per concentrarti su una particolare funzionalità senza modificare l’intera app.
  • Fantastico per la prototipazione. È possibile utilizzare gli stili incorporati per testare la funzionalità prima di incorporare la formattazione in un foglio di stile esterno.

Contro dello stile in linea

  • Può essere noioso. Disegnare direttamente ogni tag richiede molto tempo.
  • Limitato. Non puoi utilizzare funzionalità CSS come selettori e animazioni con stili incorporati.
  • Molti stili incorporati rendono illeggibile il codice JSX.

Importazione di fogli di stile esterni

Puoi scrivere CSS in un file esterno e importarlo nell’app React. Questo approccio è paragonabile all’importazione di un file CSS nel tag di un documento HTML.

Per raggiungere questo obiettivo, devi creare un file CSS nella directory della tua app, importarlo nel componente di destinazione e scrivere regole di stile per la tua app.

Per dimostrare come funzionano i fogli di stile CSS esterni, puoi creare un file CSS e denominarlo App.css. È quindi possibile esportarlo come segue. 

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Lo snippet di codice precedente importa un foglio di stile esterno nel componente App.js. Il file App.css si trova nella cartella Componenti.

Vantaggi dei fogli di stile CSS esterni

  • Riutilizzabile. Puoi utilizzare le stesse regole CSS su diversi componenti in un’app React.
  • Rende il codice più presentabile. Comprendere il codice è facile quando si utilizzano fogli di stile esterni.
  • Dà accesso a funzionalità CSS avanzate. È possibile utilizzare pseudo-classi e selettori avanzati quando si utilizzano fogli di stile esterni.

Con di fogli di stile CSS esterni

  • Richiede una convenzione di denominazione affidabile per garantire che gli stili non vengano sovrascritti.

Usa i moduli CSS

Le app React possono diventare davvero grandi. I nomi delle animazioni CSS e i nomi delle classi hanno, per impostazione predefinita, un ambito globale. Questa impostazione può essere problematica quando si ha a che fare con fogli di stile di grandi dimensioni, poiché uno stile può sovrascriverne un altro.

I moduli CSS risolvono questa sfida esaminando l’animazione e i nomi delle classi a livello locale. Questo approccio garantisce che i nomi delle classi siano disponibili solo all’interno del file/componente dove sono necessari. Ogni nome di classe riceve un nome programmatico univoco, evitando conflitti.

Per implementare i moduli CSS, crea un file con .module.css. Se vuoi nominare il tuo foglio di stile come stile, il nome del file sarà style.module.css.

Importa il file creato nel tuo componente React e sarai pronto per iniziare.

Il tuo file CSS potrebbe assomigliare a questo;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Puoi importare il modulo CSS sul tuo App.js come segue;

import { React } from "react";

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

function App() {

  return (

    <h1 className={styles.heading}>Hello winadmin.it reader</h1>

  );

}

export default App;

Vantaggi dell’utilizzo dei moduli CSS

  • Si integra facilmente con SCSS e CSS
  • Evita conflitti di nome di classe

Contro dell’utilizzo dei moduli CSS

  • Fare riferimento ai nomi delle classi utilizzando i moduli CSS può creare confusione per i principianti.

Usa i componenti con stile

I componenti con stile consentono agli sviluppatori di creare componenti utilizzando i CSS nel codice JavaScript. Un componente con stile funge da componente React fornito con gli stili. I componenti con stile offrono uno stile dinamico e nomi di classi univoci.

Per iniziare a utilizzare Styled Components, puoi installare il pacchetto nella tua cartella principale usando questo comando;

npm install styled-components

Il passaggio successivo consiste nell’importare i componenti in stile nella tua app React

Di seguito è riportato uno snippet di codice di App.js che utilizza Styled Components;

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;

L’app renderizzata avrà gli stili di cui sopra importati da Styled Components.

Vantaggi dei componenti in stile

  • È prevedibile. Gli stili in questo approccio stilistico sono nidificati in singoli componenti.
  • Non è necessario concentrarsi sulle convenzioni di denominazione delle classi. Basta scrivere i tuoi stili e il pacchetto si prenderà cura di tutto il resto.
  • Puoi esportare componenti con stile come oggetti di scena. I componenti in stile convertono i normali CSS in componenti React. Puoi quindi riutilizzare questo codice, estendere gli stili tramite oggetti di scena ed esportare.

Con di componenti in stile

  • Devi installare una libreria di terze parti per iniziare.

Fogli di stile sintatticamente fantastici (SASS/ SCSS)

SASS viene fornito con strumenti e funzionalità più potenti che mancano nel normale CSS. Puoi scrivere stili in due stili diversi guidati da queste estensioni; .scss e .sass.

La sintassi per SASS è simile a quella del solito CSS. Tuttavia, non hai bisogno delle parentesi di apertura e chiusura quando scrivi le regole di stile in SASS.

Un semplice frammento di SASS apparirà come segue;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Per iniziare a utilizzare SASS nella tua app React, devi prima compilare SASS in semplice CSS. Dopo aver configurato la tua app tramite il comando Create React App, puoi installare node-sass per occuparti della compilazione. 

npm install node-sass

Puoi quindi creare i tuoi file e assegnare loro estensioni .scss o .sass. È quindi possibile importare i file nel modo normale. Per esempio;

import "./Components/App.sass";

Pro di SASS/SCSS

  • Viene fornito con molte funzionalità dinamiche come mixin, annidamento ed estensione.
  • Non hai molto da fare per scrivere codice CSS quando usi SASS/SCSS

Contro di SASS/SCSS

  • Gli stili sono globali e potresti quindi imbatterti in problemi prioritari.

Qual è il miglior approccio stilistico?

Poiché abbiamo discusso cinque approcci, vuoi sapere qual è il migliore. È difficile evidenziare il vincitore assoluto in questa discussione. Tuttavia, queste considerazioni ti aiuteranno a prendere una decisione informata:

  • Le metriche delle prestazioni
  • Se hai bisogno di un sistema di progettazione
  • La facilità di ottimizzazione del codice

Lo stile in linea è adatto quando si dispone di un’app semplice con poche righe di codice. Tuttavia, tutti gli altri; external, SASS, Styled Components e CSS Modules, sono adatti per grandi app.

Quali sono le migliori pratiche per mantenere i CSS in un’applicazione Large React?

  • Evita lo stile in linea. Scrivere stili CSS in linea per ogni tag in una grande app React può essere stancante. Utilizzare invece un foglio di stile esterno adatto alle proprie esigenze.
  • Lint il tuo codice. Linter come Stylelint evidenzieranno gli errori di stile nel tuo codice in modo che tu possa correggerli in anticipo.
  • Esegui regolari revisioni del codice. Scrivere CSS sembra divertente, ma le regolari revisioni del codice facilitano l’identificazione precoce dei bug.
  • Automatizza i test sui tuoi file CSS. Enzyme e Jest sono strumenti fantastici che puoi utilizzare per automatizzare i test sul tuo codice CSS.
  • Mantieni il tuo codice ASCIUTTO. quando si ha a che fare con stili di uso comune come colori e margini, utilizzare variabili e classi di utilità come previsto dal principio Don’t Repeat Yourself (DRY).
  • Usa convenzioni di denominazione come Block Element Modifier. Un tale approccio semplifica la scrittura di classi CSS facili da comprendere e riutilizzare.

Conclusione

Sopra ci sono alcuni dei modi in cui puoi usare per modellare React. La scelta dell’approccio stilistico dipenderà dalle tue esigenze, abilità e gusto. Puoi persino combinare diversi approcci di stile, come fogli di stile in linea ed esterni, nella tua app React.

Puoi anche esplorare alcuni dei migliori framework e librerie CSS per sviluppatori front-end.