5 způsobů, jak stylizovat reakci pomocí CSS [2023]

autor:
Tweet
Share
Share
Pin

Věděli jste, že více než 97 % webů používá pro stylování CSS?

Kaskádové styly, neboli CSS, umožňují vývojářům vytvářet dobře vypadající, skenovatelné a prezentovatelné webové stránky.

Jazyk CSS určuje, jak jsou dokumenty prezentovány uživateli. Dokument je v tomto případě soubor napsaný ve značkovacím jazyce, jako je XML nebo HTML.

Co je styling v Reactu?

Jednoduchost vytváření, spouštění a údržby aplikace React je hlavním důvodem její popularity. React je knihovna JavaScript spíše než rámec, který nabízí více než jen předem napsané funkce a úryvky kódu.

Dostupnost opakovaně použitelných komponent, jejich flexibilita, stabilita kódu, rychlost a výkon jsou některé z důvodů, proč je React na předním místě mezi frameworky a knihovnami JavaScriptu.

Styling v Reactu je proces, díky kterému jsou různé komponenty v aplikaci React vizuálně přitažlivé pomocí CSS. Je však třeba poznamenat, že React používá jako značkovací jazyk JSX (JavaScript a XML) místo HTML. Jedním z hlavních rozdílů je, že HTML používá .class k označení tříd, zatímco JSX používá .ClassName k označení stejných.

Proč byste měli React stylizovat pomocí CSS?

  • Udělejte svou aplikaci responzivní. Moderní webové aplikace by měly být dostupné na malých i velkých obrazovkách. CSS vám umožňuje aplikovat mediální dotazy na vaši aplikaci React a zajistit, aby reagovala na různé velikosti obrazovky.
  • Urychlete proces vývoje. Stejné pravidlo CSS můžete použít v několika komponentách vaší aplikace React.
  • Umožněte udržovat aplikaci React. Provádění změn vzhledu konkrétních komponent/částí vaší aplikace je snadné pomocí CSS.
  • Vylepšená uživatelská zkušenost. CSS umožňuje uživatelsky přívětivé formátování. A React s textem a tlačítky na logických místech se snadno naviguje a používá.

Existuje několik přístupů, které mohou vývojáři použít ke stylování svých aplikací React. Následují některé z nejběžnějších;

Napište vložené styly

Vložené styly jsou nejjednodušším přístupem ke stylování aplikace React, protože uživatelé nemusí vytvářet externí šablonu stylů. Styl CSS se aplikuje přímo na kód React.

Stojí za zmínku, že inline styly mají vysokou přednost před ostatními styly. Pokud byste tedy měli externí šablonu stylů s určitým formátováním, byla by přepsána vloženým stylem.

Toto je ukázka inline stylingu v aplikaci 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 />);

Zobrazený prvek zobrazí h1 se světle modrým pozadím.

Výhody inline stylingu

  • Rychlý. Je to nejjednodušší přístup, protože přidáte styl přímo ke značce, kterou chcete upravit.
  • Má velkou přednost. Vložené styly přepíší externí šablony stylů. Můžete jej tedy použít k zaměření na konkrétní funkci, aniž byste změnili celou aplikaci.
  • Skvělé pro prototypování. Vložené styly můžete použít k otestování funkčnosti před začleněním formátování do externí šablony stylů.

Nevýhody inline stylingu

  • Může to být zdlouhavé. Přímý styl každého tagu je časově náročný.
  • Omezený. S vloženými styly nelze používat funkce CSS, jako jsou selektory a animace.
  • Díky mnoha inline stylům je kód JSX nečitelný.

Import externích šablon stylů

CSS můžete napsat do externího souboru a importovat jej do aplikace React. Tento přístup je srovnatelný s importem souboru CSS do tagu dokumentu HTML.

Abyste toho dosáhli, musíte vytvořit soubor CSS v adresáři vaší aplikace, importovat jej do cílové komponenty a napsat pravidla stylu pro vaši aplikaci.

Chcete-li předvést, jak fungují externí šablony stylů CSS, můžete vytvořit soubor CSS a pojmenovat jej App.css. Poté jej můžete exportovat následovně. 

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Výše uvedený fragment kódu importuje externí šablonu stylů do komponenty App.js. Soubor App.css je umístěn ve složce Components.

Výhody externích stylů CSS

  • Znovu použitelný. Stejná pravidla CSS můžete použít v různých komponentách v aplikaci React.
  • Dělá kód prezentovatelnějším. Porozumění kódu je snadné při použití externích šablon stylů.
  • Poskytuje přístup k pokročilým funkcím CSS. Při používání externích šablon stylů můžete použít pseudotřídy a pokročilé selektory.

Nevýhoda externích šablon stylů CSS

  • Vyžaduje spolehlivou konvenci pojmenování, aby se zajistilo, že styly nebudou přepsány.

Použijte moduly CSS

Aplikace React mohou být opravdu velké. Názvy animací CSS a názvy tříd mají ve výchozím nastavení globální rozsah. Toto nastavení může být problematické při práci s velkými šablonami stylů, protože jeden styl může přepsat jiný.

Moduly CSS řeší tento problém místním určením rozsahu animací a názvů tříd. Tento přístup zajišťuje, že názvy tříd jsou dostupné pouze v rámci souboru/komponenty, kde jsou potřeba. Každý název třídy dostane jedinečný programový název, čímž se zabrání konfliktům.

Chcete-li implementovat moduly CSS, vytvořte soubor s .module.css. Pokud chcete šablonu stylů pojmenovat jako styl, název souboru bude style.module.css.

Importujte vytvořený soubor do vaší komponenty React a budete připraveni začít.

Váš soubor CSS může vypadat nějak takto;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Modul CSS můžete do App.js importovat následovně;

import { React } from "react";

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

function App() {

  return (

    <h1 className={styles.heading}>Hello etechblog.cz reader</h1>

  );

}

export default App;

Výhody použití CSS modulů

  • Snadno se integruje s SCSS a CSS
  • Zabraňuje konfliktům názvů tříd

Nevýhody použití CSS modulů

  • Odkazování na názvy tříd pomocí modulů CSS může být pro začátečníky matoucí.

Použijte Styled-Components

Stylizované komponenty umožňují vývojářům vytvářet komponenty pomocí CSS v kódu JavaScript. Stylizovaná komponenta funguje jako komponenta React, která je dodávána se styly. Stylované komponenty nabízejí dynamický styl a jedinečné názvy tříd.

Chcete-li začít používat Styled Components, můžete nainstalovat balíček do kořenové složky pomocí tohoto příkazu;

npm install styled-components

Dalším krokem je import stylizovaných komponent do vaší aplikace React

Následuje fragment kódu App.js, který používá stylizované komponenty;

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;

Vykreslená aplikace bude mít výše uvedené styly importované ze stylových komponent.

Výhody stylových komponent

  • Dá se to předvídat. Styly v tomto stylingovém přístupu jsou vnořeny do jednotlivých komponent.
  • Není třeba se soustředit na konvence pojmenování vašich tříd. Stačí napsat své styly a balíček se postará o zbytek.
  • Komponenty se stylem můžete exportovat jako rekvizity. Stylované komponenty převádějí normální CSS na komponenty React. Můžete tak znovu použít tento kód, rozšířit styly pomocí rekvizit a exportovat.

Con of Styled Components

  • Chcete-li začít, musíte nainstalovat knihovnu třetí strany.

Syntakticky úžasné styly (SASS/SCSS)

SASS přichází s výkonnějšími nástroji a funkcemi, které v běžném CSS chybí. Styly můžete psát ve dvou různých stylech podle těchto rozšíření; .scss a .sass.

Syntaxe SASS je podobná syntaxi obvyklého CSS. Při psaní pravidel stylu v SASS však nepotřebujete otevírací a uzavírací závorky.

Jednoduchý úryvek SASS se objeví následovně;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Chcete-li začít používat SASS ve své aplikaci React, musíte nejprve zkompilovat SASS do prostého CSS. Po nastavení aplikace pomocí příkazu Create React App můžete nainstalovat node-sass, který se postará o kompilaci. 

npm install node-sass

Poté můžete vytvořit své soubory a přidělit jim přípony .scss nebo .sass. Soubory pak můžete importovat běžným způsobem. Například;

import "./Components/App.sass";

Výhody SASS/SCSS

  • Dodává se s mnoha dynamickými funkcemi, jako jsou mixiny, vnořování a rozšiřování.
  • Když používáte SASS/SCSS, nemusíte psát CSS kódy

Nevýhody SASS/SCSS

  • Styly jsou globální, a proto můžete narazit na zásadní problémy.

Jaký je nejlepší stylingový přístup?

Protože jsme diskutovali o pěti přístupech, chcete vědět, který je nejlepší. Je těžké v této diskusi vyzdvihnout absolutního vítěze. Tyto úvahy vám však pomohou učinit informované rozhodnutí:

  • Metriky výkonu
  • Ať už potřebujete designový systém
  • Snadná optimalizace kódu

Inline styl je vhodný, když máte jednoduchou aplikaci s několika řádky kódu. Nicméně všichni ostatní; externí, SASS, Styled Components a CSS moduly, jsou vhodné pro velké aplikace.

Jaké jsou osvědčené postupy pro údržbu CSS ve velké aplikaci React?

  • Vyhněte se inline stylingu. Psaní inline stylů CSS pro každý tag ve velké aplikaci React může být únavné. Místo toho použijte externí šablonu stylů, která vyhovuje vašim potřebám.
  • Lint svůj kód. Linters, jako je Stylelint, zvýrazní chyby stylu ve vašem kódu, abyste je mohli včas opravit.
  • Provádějte pravidelné kontroly kódu. Psaní CSS se zdá zábavné, ale pravidelné kontroly kódu usnadňují včasnou identifikaci chyb.
  • Automatizujte testy vašich CSS souborů. Enzyme a Jest jsou úžasné nástroje, které můžete použít k automatizaci testů vašeho kódu CSS.
  • Udržujte svůj kód SUCHÝ. při práci s běžně používanými styly, jako jsou barvy a okraje, používejte proměnné a třídy užitných vlastností, jak to jde s principem Don’t Repeat Yourself (DRY).
  • Použijte konvence pojmenování, jako je modifikátor blokového prvku. Takový přístup usnadňuje psaní tříd CSS, které jsou snadno pochopitelné a opakovaně použitelné.

Závěr

Výše jsou některé ze způsobů, které můžete použít ke stylizaci Reactu. Výběr stylingového přístupu bude záviset na vašich potřebách, dovednostech a vkusu. Ve své aplikaci React můžete dokonce kombinovat několik stylů, jako jsou vložené a externí šablony stylů.

Můžete také prozkoumat některé nejlepší frameworky a knihovny CSS pro front-end vývojáře.