Czy wiedziałeś, że zdecydowana większość, bo aż 97% stron internetowych, opiera się na CSS w kwestii wyglądu?
Kaskadowe arkusze stylów, znane jako CSS, pozwalają twórcom stron internetowych na konstruowanie estetycznych, czytelnych i doskonale prezentujących się witryn.
CSS definiuje, w jaki sposób treści są przedstawiane użytkownikowi. Treść ta to nic innego, jak plik napisany w języku znaczników, takim jak XML lub HTML.
Na czym polega stylizacja w React?
Prostota tworzenia, wdrażania i późniejszego zarządzania aplikacjami React to kluczowy powód jego popularności. React, będąc biblioteką JavaScript, a nie frameworkiem, oferuje o wiele więcej niż tylko gotowe funkcje i fragmenty kodu.
Dostępność komponentów, które można wielokrotnie wykorzystywać, jego adaptacyjność, stabilność kodu, szybkość działania oraz wydajność to tylko kilka aspektów, dzięki którym React zajmuje czołowe miejsce wśród frameworków i bibliotek JavaScript.
Stylizacja w React to proces nadawania atrakcyjnego wyglądu elementom aplikacji React za pomocą CSS. Trzeba pamiętać, że React korzysta z JSX (JavaScript i XML) zamiast HTML jako języka znaczników. Istotna różnica polega na tym, że HTML używa .class do definiowania klas, a JSX stosuje .ClassName w tym samym celu.
Dlaczego warto stosować CSS do stylizacji w React?
- Zapewnij responsywność swojej aplikacji. Współczesne aplikacje internetowe muszą być dostępne na różnych urządzeniach, od małych smartfonów po duże ekrany komputerów. CSS umożliwia stosowanie zapytań o media, dzięki czemu aplikacja React dostosowuje się do różnych rozmiarów ekranu.
- Przyspiesz proces tworzenia. Te same reguły CSS można zastosować w różnych komponentach aplikacji React.
- Uczyń swoją aplikację React łatwą w utrzymaniu. Wprowadzanie zmian w wyglądzie poszczególnych komponentów lub części aplikacji jest proste dzięki CSS.
- Popraw doświadczenia użytkownika. CSS pozwala na tworzenie interfejsu, który jest przyjazny dla użytkownika. Aplikacja React z tekstem i przyciskami umieszczonymi w logicznych miejscach jest łatwa w obsłudze i nawigacji.
Istnieje kilka metod, które programiści mogą wykorzystać do stylizacji aplikacji React. Oto kilka z najczęściej spotykanych:
Stylizacja w linii
Stylizacja w linii to najłatwiejsza metoda stylizacji aplikacji React, ponieważ nie wymaga tworzenia zewnętrznego arkusza stylów. Styl CSS jest aplikowany bezpośrednio w kodzie React.
Warto pamiętać, że style wbudowane mają wyższy priorytet niż inne style. W sytuacji gdyby istniał zewnętrzny arkusz stylów z określonym formatowaniem, zostałby on nadpisany przez styl wbudowany.
Poniżej przykład stylizacji w linii 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 />);
Rezultatem tego kodu będzie element h1 z jasnoniebieskim tłem.
Zalety stylizacji w linii
- Szybkość. To najprostsza metoda, ponieważ styl dodaje się bezpośrednio do tagu, który ma zostać wystylizowany.
- Wysoki priorytet. Style wbudowane nadpisują zewnętrzne arkusze stylów. Dzięki temu można skupić się na konkretnej funkcjonalności bez wpływania na całą aplikację.
- Idealna do prototypowania. Style wbudowane można wykorzystać do przetestowania funkcjonalności przed przeniesieniem formatowania do zewnętrznego arkusza stylów.
Wady stylizacji w linii
- Może być nużąca. Bezpośrednie stylizowanie każdego tagu jest czasochłonne.
- Ograniczona. Nie można używać funkcji CSS, takich jak selektory i animacje, ze stylami wbudowanymi.
- Duża ilość stylów wbudowanych sprawia, że kod JSX staje się nieczytelny.
Importowanie zewnętrznych arkuszy stylów
CSS można pisać w zewnętrznym pliku i importować go do aplikacji React. Podejście to jest analogiczne do importowania pliku CSS w tagu <head> dokumentu HTML.
W tym celu należy utworzyć plik CSS w katalogu aplikacji, zaimportować go do konkretnego komponentu i napisać reguły stylów.
Przykładowo, aby zademonstrować, jak działają zewnętrzne arkusze stylów CSS, można utworzyć plik CSS i nazwać go App.css. Następnie należy wyeksportować go w sposób następujący:
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. Te same reguły CSS można wykorzystać w różnych komponentach w aplikacji React.
- Ułatwia czytanie kodu. Zewnętrzne arkusze stylów sprawiają, że kod jest łatwiejszy do zrozumienia.
- Dostęp do zaawansowanych funkcji CSS. Korzystając z zewnętrznych arkuszy stylów, można używać pseudoklas i zaawansowanych selektorów.
Wady zewnętrznych arkuszy stylów CSS
- Wymaga przemyślanej konwencji nazewnictwa, aby uniknąć nadpisywania stylów.
Wykorzystanie modułów CSS
Aplikacje React mogą osiągać znaczne rozmiary. Domyślnie nazwy animacji CSS i nazwy klas mają zasięg globalny. Takie ustawienie może powodować problemy w przypadku dużych arkuszy stylów, ponieważ jeden styl może nadpisywać inny.
Moduły CSS rozwiązują ten problem poprzez lokalne określanie zakresu nazw animacji i klas. Dzięki temu nazwy klas są dostępne tylko w pliku lub komponencie, w którym są potrzebne. Każda nazwa klasy otrzymuje unikalną nazwę programową, co pozwala uniknąć konfliktów.
Aby wdrożyć moduły CSS, należy utworzyć plik z rozszerzeniem .module.css. Jeżeli chcemy nazwać arkusz stylów „style”, nazwa pliku będzie brzmiała style.module.css.
Zaimportuj utworzony plik do swojego komponentu React i można zaczynać.
Przykładowy plik CSS może wyglądać następująco:
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Moduł CSS można zaimportować 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
- Łatwa integracja z SCSS i CSS.
- Unikanie konfliktów nazw klas.
Wady korzystania z modułów CSS
- Odwoływanie się do nazw klas za pomocą modułów CSS może być kłopotliwe dla początkujących.
Wykorzystanie Styled-Components
Styled-Components umożliwiają programistom tworzenie komponentów przy użyciu CSS w kodzie JavaScript. Styled-Component działa jak komponent React, który jest od razu zaopatrzony w style. Oferują one dynamiczną stylistykę i unikalne nazwy klas.
Aby rozpocząć korzystanie ze Styled-Components, zainstaluj pakiet w folderze głównym za pomocą polecenia:
npm install styled-components
Następnym krokiem jest zaimportowanie Styled-Components do aplikacji React.
Poniżej fragment kodu pliku App.js, który wykorzystuje 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;
Wyświetlana aplikacja będzie miała powyższe style zaimportowane z Styled-Components.
Zalety Styled-Components
- Przewidywalność. Style w tej metodzie stylizacji są zagnieżdżone w konkretnych komponentach.
- Brak konieczności skupiania się na konwencjach nazewnictwa klas. Wystarczy napisać style, a pakiet zajmie się resztą.
- Możliwość eksportowania Styled-Components jako rekwizytów. Styled-Components konwertują zwykły CSS na komponenty React. W ten sposób można ponownie użyć kodu, rozszerzyć style za pomocą rekwizytów i eksportować.
Wady Styled-Components
- Wymaga zainstalowania biblioteki zewnętrznej.
Syntaktycznie niesamowite arkusze stylów (SASS/SCSS)
SASS oferuje rozbudowane narzędzia i funkcje, których brakuje w zwykłym CSS. Style można pisać w dwóch różnych stylach, korzystając z rozszerzeń .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.
Przykładowy fragment kodu SASS:
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ąć korzystać z SASS w aplikacji React, najpierw trzeba skompilować SASS do zwykłego CSS. Po skonfigurowaniu aplikacji za pomocą polecenia Create React App można zainstalować node-sass, aby zająć się kompilacją.
npm install node-sass
Następnie należy utworzyć pliki i nadać im rozszerzenie .scss lub .sass. Potem importuje się pliki w normalny sposób. Na przykład:
import "./Components/App.sass";
Zalety SASS/SCSS
- Dostępność wielu dynamicznych funkcji, takich jak mixiny, zagnieżdżanie i rozszerzanie.
- Brak konieczności pisania dużej ilości szablonowego kodu CSS.
Wady SASS/SCSS
- Style mają zasięg globalny, co może prowadzić do problemów z nadpisywaniem.
Która metoda stylizacji jest najlepsza?
Po omówieniu pięciu metod, naturalne jest pytanie, która z nich jest najlepsza. Trudno wskazać jednoznacznego zwycięzcę. Jednak te aspekty pomogą podjąć świadomą decyzję:
- Wydajność aplikacji.
- Potrzeba systemu projektowania.
- Łatwość optymalizacji kodu.
Stylizacja w linii jest odpowiednia dla prostych aplikacji z niewielką ilością kodu. Wszystkie inne metody, takie jak zewnętrzne arkusze stylów, SASS, Styled-Components 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ć uciążliwe. Zamiast tego użyj zewnętrznego arkusza stylów, który spełnia twoje potrzeby.
- Lintowanie kodu. Narzędzia takie jak Stylelint pomagają w identyfikacji błędów stylistycznych w kodzie, co pozwala na ich wczesne naprawienie.
- Regularna kontrola kodu. Pisanie CSS może być przyjemne, ale regularne kontrole ułatwiają wykrywanie błędów we wczesnej fazie.
- Automatyzacja testów plików CSS. Enzyme i Jest to przydatne narzędzia do automatyzacji testów kodu CSS.
- Kod powinien być DRY. W przypadku często używanych stylów, takich jak kolory i marginesy, należy używać zmiennych i klas zgodnie z zasadą Don’t Repeat Yourself (DRY).
- Użyj konwencji nazewnictwa, takiej jak Modyfikator elementu blokowego. Ułatwia to pisanie klas CSS, które są łatwe do zrozumienia i ponownego wykorzystania.
Podsumowanie
Powyżej przedstawiono kilka metod stylizacji w React. Wybór metody będzie zależał od indywidualnych potrzeb, umiejętności i preferencji. W aplikacji React można nawet łączyć różne podejścia, takie jak style wbudowane i zewnętrzne arkusze stylów.
Warto również zapoznać się z najlepszymi frameworkami i bibliotekami CSS dla programistów front-end.
newsblog.pl
Maciej – redaktor, pasjonat technologii i samozwańczy pogromca błędów w systemie Windows. Zna Linuxa lepiej niż własną lodówkę, a kawa to jego główne źródło zasilania. Pisze, testuje, naprawia – i czasem nawet wyłącza i włącza ponownie. W wolnych chwilach udaje, że odpoczywa, ale i tak kończy z laptopem na kolanach.