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

Je všeobecně známo, že přes 97 % webových stránek používá CSS pro definování vizuálního stylu.

Kaskádové styly, známé jako CSS, umožňují tvůrcům webů navrhovat stránky, které jsou nejen esteticky příjemné, ale také snadno prohlížitelné a srozumitelné.

CSS jako jazyk určuje, jakým způsobem se dokumenty zobrazují uživatelům. V tomto kontextu dokumentem rozumíme soubor napsaný v značkovacím jazyce, jako je například XML nebo HTML.

Jak probíhá styling v Reactu?

Popularita Reactu je z velké části dána jeho jednoduchostí při tvorbě, spouštění a správě aplikací. React je v podstatě JavaScriptová knihovna, nikoli framework, což znamená, že nabízí více než jen předdefinované funkce a úryvky kódu.

Dostupnost opakovaně použitelných komponent, flexibilita, stabilita kódu, rychlost a efektivita – to jsou jen některé z důvodů, proč React zaujímá přední pozici mezi JavaScriptovými frameworky a knihovnami.

Styling v Reactu se týká procesu, kterým se pomocí CSS zviditelňují jednotlivé komponenty v aplikaci React. Je však důležité si uvědomit, že React používá pro značkování JSX (kombinace JavaScriptu a XML), nikoli HTML. Hlavní rozdíl spočívá v tom, že HTML využívá `.class` pro označení tříd, zatímco JSX používá `.ClassName` pro stejný účel.

Proč je vhodné používat CSS pro stylování Reactu?

Zajistěte responzivní chování vaší aplikace. Moderní webové aplikace by měly být dostupné na různých zařízeních, ať už jde o malé displeje nebo velké monitory. CSS umožňuje aplikovat mediální dotazy na vaši aplikaci React, což zaručuje její správné zobrazení na jakékoli velikosti obrazovky.
Urychlete proces vývoje. Stejné CSS pravidlo můžete uplatnit na více komponent v rámci vaší React aplikace.
Umožněte snadnou údržbu aplikace React. Pomocí CSS je snadné provádět změny ve vzhledu specifických komponent nebo částí vaší aplikace.
Zlepšete uživatelskou zkušenost. CSS umožňuje vytvářet uživatelsky přívětivé formátování. React s logicky umístěným textem a tlačítky se pak snadno používá a prochází.

Vývojáři mají k dispozici několik přístupů pro stylování svých React aplikací. Následují některé z nejčastěji používaných:

Vkládání stylů přímo do kódu

Inline styly představují nejjednodušší metodu pro stylování React aplikace, jelikož uživatelé nemusí vytvářet externí šablony stylů. CSS styl je aplikován přímo v kódu React.

Je důležité si uvědomit, že inline styly mají vyšší prioritu než ostatní styly. Pokud tedy máte definovaný styl v externí šabloně, bude přepsán stylem vloženým přímo do kódu.

Zde je příklad, jak může vypadat inline styling v aplikaci React:

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
    return (
        <>
            <h1 style={{backgroundColor: "lightblue"}}>Ahoj světe!!!!!</h1>
            <h2>Přidejme trochu stylu!</h2>
        <>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Výsledkem bude zobrazení nadpisu `h1` se světle modrým pozadím.

Výhody inline stylingu

Rychlost. Je to nejjednodušší přístup, protože styl aplikujete přímo na tag, který chcete upravit.
Vysoká priorita. Vložené styly mají přednost před externími šablonami stylů. Můžete je použít k úpravě konkrétní funkce, aniž byste zasahovali do celkové podoby aplikace.
Skvělé pro prototypování. Vložené styly se hodí pro testování funkčnosti před implementací formátování do externí šablony.

Nevýhody inline stylingu

Může být časově náročný. Přímé stylování každého tagu zabere spoustu času.
Omezená funkčnost. S vloženými styly nelze využívat pokročilé CSS funkce, jako jsou selektory a animace.
S velkým počtem inline stylů se kód JSX stává nepřehledným.

Import externích šablon stylů

CSS styly můžete psát do samostatného externího souboru a poté je importovat do své React aplikace. Tento způsob je obdobný importu CSS souboru do sekce <head> HTML dokumentu.

Pro implementaci tohoto postupu je nutné vytvořit CSS soubor v adresáři vaší aplikace, importovat jej do cílové komponenty a definovat stylovací pravidla pro vaši aplikaci.

Pro demonstraci fungování externích CSS šablon si můžete vytvořit soubor CSS a pojmenovat ho například App.css. Následně jej můžete importovat tímto způsobem:

import { React } from "react";
import "./Components/App.css";

function App() {
    return (
        <div className="main">
        </div>
    );
}

export default App;

Výše uvedený kód importuje externí šablonu stylů do komponenty `App.js`. Soubor `App.css` se nachází ve složce `Components`.

Výhody externích CSS stylů

Opakovaně použitelné. Stejná CSS pravidla můžete aplikovat na různé komponenty ve vaší React aplikaci.
Přispívá k čitelnosti kódu. Používání externích šablon stylů usnadňuje porozumění kódu.
Umožňuje využití pokročilých CSS funkcí. Při použití externích šablon stylů můžete využívat pseudotřídy a pokročilé selektory.

Nevýhoda externích CSS šablon

Vyžaduje důslednou konvenci pojmenování, aby se předešlo přepisování stylů.

Použití CSS modulů

React aplikace mohou dosahovat značných rozměrů. Názvy CSS animací a tříd mají ve výchozím nastavení globální rozsah. To může být problematické při práci s rozsáhlými šablonami stylů, kdy jeden styl může přepsat jiný.

CSS moduly tento problém řeší tím, že omezují rozsah animací a názvů tříd na lokální úroveň. Tímto přístupem zajistíte, že názvy tříd jsou dostupné pouze v rámci souboru nebo komponenty, kde jsou potřeba. Každý název třídy získá unikátní programový název, což eliminuje možnost konfliktů.

Pro implementaci CSS modulů vytvořte soubor s příponou `.module.css`. Pokud například chcete pojmenovat šablonu stylů jako `style`, název souboru bude `style.module.css`.

Vytvořený soubor importujte do vaší React komponenty a jste připraveni začít.

Váš CSS soubor může vypadat například takto:

/* styles.module.css */
.font {
    color: #f00;
    font-size: 30px;
}

CSS modul můžete importovat do `App.js` následovně:

import { React } from "react";
import styles from "./styles.module.css";

function App() {
    return (
        <h1 className={styles.heading}>Vítejte čtenáři etechblog.cz</h1>
    );
}

export default App;

Výhody používání CSS modulů

Snadná integrace s SCSS a CSS.
Zabraňuje konfliktům názvů tříd.

Nevýhody používání CSS modulů

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

Použití Styled-Components

Styled-Components umožňují vývojářům vytvářet komponenty s CSS styly přímo v JavaScriptovém kódu. Styled-Component funguje jako komponenta React, která již obsahuje definované styly. Styled-Components nabízí dynamické stylování a unikátní názvy tříd.

Pro začátek s používáním Styled-Components nainstalujte balíček do kořenového adresáře pomocí následujícího příkazu:

npm install styled-components

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

Následuje kód `App.js` s použitím stylizovaných komponent:

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;

Aplikace bude vykreslena s výše uvedenými styly importovanými ze stylizovaných komponent.

Výhody Styled-Components

Předvídatelnost. Styly jsou v tomto přístupu vnořeny přímo do jednotlivých komponent.
Není třeba řešit konvence pojmenování tříd. Jednoduše napíšete své styly a balíček se postará o zbytek.
Komponenty se stylem můžete exportovat jako props. Stylizované komponenty konvertují standardní CSS na React komponenty. Díky tomu můžete kód opakovaně používat, rozšiřovat styly pomocí props a exportovat.

Nevýhody Styled-Components

Je nutné nainstalovat knihovnu třetí strany.

Syntaxe pro skvělé styly (SASS/SCSS)

SASS přichází s mocnějšími nástroji a funkcemi, které v běžném CSS chybí. Styly můžete psát ve dvou variantách podle těchto přípon: .scss a .sass.

Syntaxe SASS je podobná syntaxi běžného CSS. Nicméně, při psaní stylových pravidel v SASS nepotřebujete otevírací a uzavírací složené závorky.

Zjednodušený SASS kód může vypadat 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

Pro začátek s používáním SASS ve vaší React aplikaci je potřeba nejprve zkompilovat SASS do standardního CSS. Po vytvoření aplikace pomocí `Create React App` můžete nainstalovat `node-sass`, který se postará o kompilaci.

npm install node-sass

Následně můžete vytvořit soubory a přiřadit jim příponu `.scss` nebo `.sass`. Tyto soubory pak můžete importovat běžným způsobem. Například:

import "./Components/App.sass";

Výhody SASS/SCSS

Nabízí mnoho dynamických funkcí, jako jsou mixiny, vnořování a rozšiřování.
Při používání SASS/SCSS nemusíte psát CSS kódy.

Nevýhody SASS/SCSS

Styly jsou globální, a proto se můžete setkat se zásadními problémy.

Který přístup ke stylování je nejlepší?

Po prodiskutování pěti různých přístupů se nabízí otázka, který z nich je nejlepší. V této diskusi je obtížné jednoznačně určit vítěze. Nicméně, následující aspekty vám mohou pomoci se informovaně rozhodnout:

Výkonnostní metriky.
Potřeba designového systému.
Snadnost optimalizace kódu.

Inline styling je vhodný pro jednoduché aplikace s malým počtem řádků kódu. Ostatní metody, jako externí CSS, SASS, Styled Components a CSS moduly, jsou vhodnější pro rozsáhlé aplikace.

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

Vyhněte se inline stylingu. Psaní inline CSS pro každý tag v rozsáhlé React aplikaci může být únavné. Místo toho využijte externí šablonu stylů, která vyhovuje vašim potřebám.
Lintování kódu. Nástroje jako Stylelint zvýrazní chyby ve vašem stylu, abyste je mohli včas opravit.
Pravidelné kontroly kódu. Psaní CSS se může zdát zábavné, ale pravidelné kontroly kódu usnadňují včasnou identifikaci chyb.
Automatizujte testování vašich CSS souborů. Enzyme a Jest jsou skvělé nástroje, které můžete použít pro automatizaci testů vašeho CSS kódu.
Udržujte kód DRY. Při práci s často používanými styly, jako jsou barvy a okraje, používejte proměnné a utility třídy, jak to souvisí s principem "Don't Repeat Yourself" (DRY).
Využívejte konvence pojmenování jako Block Element Modifier (BEM). Tento přístup usnadňuje psaní CSS tříd, které jsou snadno srozumitelné a opakovaně použitelné.

Závěr

Výše jsme si představili několik metod pro stylování v Reactu. Výběr konkrétního přístupu závisí na vašich potřebách, schopnostech a preferencích. Ve své React aplikaci můžete dokonce kombinovat více stylů, například inline styly a externí šablony stylů.

Můžete také prozkoumat některé z nejlepších frameworků a knihoven CSS pro vývojáře front-endu.