5 sposobów na stylizację Zareaguj za pomocą CSS [2023]

Czy wiesz, że ponad 97% stron internetowych używa CSS do stylizacji?

Kaskadowe arkusze stylów (CSS) umożliwiają programistom tworzenie dobrze wyglądających, skanowalnych i dobrze prezentujących się stron internetowych.

Język CSS określa, w jaki sposób dokumenty są prezentowane użytkownikowi. W tym przypadku dokument to plik napisany w języku znaczników, takim jak XML lub HTML.

Czym jest stylizacja w React?

Prostota tworzenia, uruchamiania i utrzymywania aplikacji React jest głównym powodem jej popularności. React to biblioteka JavaScript, a nie framework, oferująca więcej niż tylko wstępnie napisane funkcje i fragmenty kodu.

Dostępność komponentów wielokrotnego użytku, jego elastyczność, stabilność kodu, szybkość i wydajność to tylko niektóre z powodów, dla których React zajmuje wysokie miejsce wśród frameworków i bibliotek JavaScript.

Stylizacja w React to proces tworzenia atrakcyjnych wizualnie elementów aplikacji React za pomocą CSS. Warto jednak zauważyć, że React używa JSX (JavaScript i XML) zamiast HTML jako języka znaczników. Jedną z głównych różnic jest to, że HTML używa .class do oznaczania klas, podczas gdy JSX używa .ClassName do oznaczania tego samego.

Dlaczego warto stylizować React za pomocą CSS?

Spraw, by Twoja aplikacja była responsywna. Nowoczesne aplikacje internetowe powinny być dostępne zarówno na małych, jak i dużych ekranach. CSS umożliwia stosowanie zapytań o media w aplikacji React i dostosowywanie jej do różnych rozmiarów ekranu.
Przyspiesz proces rozwoju. Możesz użyć tej samej reguły CSS w kilku komponentach swojej aplikacji React.
Spraw, aby aplikacja React była łatwa w utrzymaniu. Dokonywanie zmian w wyglądzie określonych komponentów/części aplikacji jest łatwe dzięki CSS.
Ulepszone wrażenia użytkownika. CSS umożliwia przyjazne dla użytkownika formatowanie. React z tekstem i przyciskami w logicznych miejscach jest łatwy w nawigacji i obsłudze.

Istnieje kilka podejść, których programiści mogą używać do stylizowania swoich aplikacji React. Oto niektóre z najczęstszych;

Napisz style śródliniowe

Style wbudowane to najłatwiejsze podejście do stylizacji aplikacji React, ponieważ użytkownicy nie muszą tworzyć zewnętrznego arkusza stylów. Styl CSS jest stosowany bezpośrednio do kodu React.

Warto zauważyć, że style wbudowane mają wysoki priorytet nad innymi stylami. Tak więc, gdybyś miał zewnętrzny arkusz stylów z pewnym formatowaniem, zostałby on nadpisany przez styl wbudowany.

To jest demonstracja stylu wbudowanego w aplikacji 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 />);

Wyświetlany element będzie wyświetlał h1 z jasnoniebieskim tłem.

Zalety stylizacji inline

Szybki. Jest to najprostsze podejście, ponieważ styl dodajesz bezpośrednio do tagu, który chcesz stylizować.
Ma duże preferencje. Style wbudowane zastępują zewnętrzne arkusze stylów. W ten sposób możesz go użyć do skupienia się na określonej funkcjonalności bez zmiany całej aplikacji.
Niesamowity do prototypowania. Możesz użyć stylów wbudowanych do przetestowania funkcjonalności przed włączeniem formatowania do zewnętrznego arkusza stylów.

Wady stylu inline

Może być nudne. Bezpośrednie stylizowanie każdego tagu jest czasochłonne.
Ograniczony. Nie możesz używać funkcji CSS, takich jak selektory i animacje, ze stylami wbudowanymi.
Wiele wbudowanych stylów sprawia, że kod JSX jest nieczytelny.

Importowanie zewnętrznych arkuszy stylów

Możesz napisać CSS w zewnętrznym pliku i zaimportować go do aplikacji React. To podejście można porównać do importowania pliku CSS w tagu dokumentu HTML.

Aby to osiągnąć, musisz utworzyć plik CSS w katalogu swojej aplikacji, zaimportować go do docelowego komponentu i napisać reguły stylów dla swojej aplikacji.

Aby zademonstrować, jak działają zewnętrzne arkusze stylów CSS, możesz utworzyć plik CSS i nazwać go App.css. Następnie możesz wyeksportować go w następujący sposób.

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Powyższy fragment kodu importuje zewnętrzny arkusz stylów do komponentu App.js. Plik App.css znajduje się w folderze Składniki.

Zalety zewnętrznych arkuszy stylów CSS

Wielokrotnego użytku. Możesz używać tych samych reguł CSS w różnych komponentach w aplikacji React.
Sprawia, że kod jest bardziej czytelny. Zrozumienie kodu jest łatwe, gdy używasz zewnętrznych arkuszy stylów.
Daje dostęp do zaawansowanych funkcji CSS. Podczas korzystania z zewnętrznych arkuszy stylów można używać pseudoklas i zaawansowanych selektorów.

Con zewnętrznych arkuszy stylów CSS

Wymaga niezawodnej konwencji nazewnictwa, aby zapewnić, że style nie zostaną zastąpione.

Użyj modułów CSS

Aplikacje React mogą stać się naprawdę duże. Nazwy animacji CSS i nazwy klas mają domyślnie zasięg globalny. To ustawienie może być problematyczne w przypadku dużych arkuszy stylów, ponieważ jeden styl może zastąpić inny.

Moduły CSS rozwiązują to wyzwanie, lokalnie określając zakres animacji i nazw klas. Takie podejście zapewnia, że nazwy klas są dostępne tylko w pliku/komponencie, w którym są potrzebne. Każda nazwa klasy otrzymuje unikalną nazwę programową, co pozwala uniknąć konfliktów.

Aby zaimplementować moduły CSS, utwórz plik z rozszerzeniem .module.css. Jeśli chcesz nazwać swój arkusz stylów stylem, nazwą pliku będzie style.module.css.

Zaimportuj utworzony plik do swojego komponentu React i będziesz gotowy do rozpoczęcia.

Twój plik CSS może wyglądać mniej więcej tak;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Możesz zaimportować moduł CSS do pliku App.js w następujący sposób;

import { React } from "react";

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

function App() {

  return (

    <h1 className={styles.heading}>Hello newsblog.pl reader</h1>

  );

}

export default App;

Zalety korzystania z modułów CSS

Łatwo integruje się z SCSS i CSS
Unika konfliktów nazw klas

Wady korzystania z modułów CSS

Odwoływanie się do nazw klas za pomocą modułów CSS może być mylące dla początkujących.

Użyj Styled-Components

Stylizowane komponenty umożliwiają programistom tworzenie komponentów przy użyciu CSS w kodzie JavaScript. Stylizowany komponent działa jak komponent React, który jest dostarczany ze stylami. Stylizowane komponenty oferują dynamiczną stylistykę i unikalne nazwy klas.

Aby rozpocząć korzystanie ze stylizowanych komponentów, możesz zainstalować pakiet w folderze głównym za pomocą tego polecenia;

npm install styled-components

Następnym krokiem jest zaimportowanie stylizowanych komponentów do aplikacji React

Poniżej znajduje się fragment kodu pliku App.js, który używa 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;

Renderowana aplikacja będzie miała powyższe style zaimportowane z Styled Components.

Zalety stylizowanych komponentów

To jest przewidywalne. Style w tym podejściu do stylizacji są zagnieżdżone w poszczególnych komponentach.
Nie musisz skupiać się na konwencjach nazewnictwa swoich klas. Po prostu napisz swoje style, a pakiet zajmie się resztą.
Stylizowane komponenty można eksportować jako rekwizyty. Stylizowane komponenty konwertują zwykły CSS na komponenty React. W ten sposób możesz ponownie użyć tego kodu, rozszerzyć style za pomocą rekwizytów i wyeksportować.

Con stylizowanych komponentów

Aby rozpocząć, musisz zainstalować bibliotekę innej firmy.

Syntaktycznie niesamowite arkusze stylów (SASS/SCSS)

SASS zawiera potężniejsze narzędzia i funkcje, których brakuje w normalnym CSS. Możesz pisać style w dwóch różnych stylach, kierując się tymi rozszerzeniami; .scss i .sass.

Składnia SASS jest podobna do składni zwykłego CSS. Jednak nawiasy otwierające i zamykające nie są potrzebne podczas pisania reguł stylów w SASS.

Prosty fragment SASS pojawi się w następujący sposób;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Aby zacząć używać SASS w swojej aplikacji React, musisz najpierw skompilować SASS do zwykłego CSS. Po skonfigurowaniu aplikacji za pomocą polecenia Create React App możesz zainstalować node-sass, aby zająć się kompilacją.

npm install node-sass

Następnie możesz utworzyć swoje pliki i nadać im rozszerzenie .scss lub .sass. Następnie możesz zaimportować swoje pliki w normalny sposób. Na przykład;

import "./Components/App.sass";

Zalety SASS/SCSS

Zawiera wiele dynamicznych funkcji, takich jak mixiny, zagnieżdżanie i rozszerzanie.
Nie masz dużo szablonów do pisania kodu CSS podczas korzystania z SASS/SCSS

Wady SASS/SCSS

Style są globalne, dlatego możesz napotkać problemy nadrzędne.

Która metoda stylizacji jest najlepsza?

Ponieważ omówiliśmy pięć podejść, chcesz wiedzieć, które jest najlepsze. W tej dyskusji trudno wskazać zdecydowanego zwycięzcę. Jednak te rozważania pomogą Ci podjąć świadomą decyzję:

Metryki wydajności
Niezależnie od tego, czy potrzebujesz systemu projektowania
Łatwość optymalizacji kodu

Stylizacja w tekście jest odpowiednia, gdy masz prostą aplikację z kilkoma wierszami kodu. Jednak wszystkie inne; zewnętrzne, SASS, stylizowane komponenty i moduły CSS są odpowiednie dla dużych aplikacji.

Jakie są najlepsze praktyki dotyczące utrzymywania CSS w dużej aplikacji React?

Unikaj stylizacji w linii. Pisanie wbudowanych stylów CSS dla każdego tagu w dużej aplikacji React może być męczące. Zamiast tego użyj zewnętrznego arkusza stylów, który odpowiada Twoim potrzebom.
Wklej swój kod. Linters, taki jak Stylelint, wyróżni błędy stylistyczne w twoim kodzie, dzięki czemu możesz je naprawić wcześniej.
Regularnie przeglądaj kod. Pisanie CSS wydaje się zabawne, ale regularne przeglądy kodu ułatwiają wczesne wykrywanie błędów.
Zautomatyzuj testy swoich plików CSS. Enzyme i Jest to niesamowite narzędzia, których możesz użyć do automatyzacji testów kodu CSS.
Utrzymuj swój kod SUCHY. w przypadku powszechnie używanych stylów, takich jak kolory i marginesy, używaj zmiennych użytkowych i klas zgodnie z zasadą Don’t Repeat Yourself (DRY).
Użyj konwencji nazewnictwa, takich jak Modyfikator elementu blokowego. Takie podejście ułatwia pisanie klas CSS, które są łatwe do zrozumienia i ponownego wykorzystania.

Wniosek

Powyżej znajduje się kilka sposobów na stylizację React. Wybór podejścia do stylizacji będzie zależał od Twoich potrzeb, umiejętności i gustu. W aplikacji React możesz nawet łączyć kilka podejść do stylizacji, takich jak wbudowane i zewnętrzne arkusze stylów.

Możesz także zapoznać się z najlepszymi frameworkami i bibliotekami CSS dla programistów front-end.