5 начина за стилизовање реакције помоћу ЦСС-а [2023]

by
Tweet
Share
Share
Pin

Да ли сте знали да више од 97% свих веб страница користи CSS за обликовање?

CSS (Cascading Style Sheets) омогућава програмерима да креирају визуелно привлачне, прегледне и добро структуриране веб странице.

CSS језик дефинише како се документи приказују кориснику. У овом контексту, документ је фајл написан у језику за означавање, као што су XML или HTML.

Шта значи стилизовање у React-у?

Једноставност у креирању, покретању и одржавању React апликација је кључни фактор њихове популарности. React је JavaScript библиотека, а не оквир, која пружа више од унапред написаних функција и кодова.

Доступност компоненти за поновну употребу, флексибилност, стабилност кода, брзина и перформансе су неки од разлога зашто је React високо рангиран међу JavaScript оквирима и библиотекама.

Стилизовање у React-у је процес визуелног улепшавања компоненти у React апликацији користећи CSS. Важно је напоменути да React користи JSX (JavaScript и XML) уместо HTML као језик за означавање. Главна разлика је у томе што HTML користи .class за означавање класа, док JSX користи .className за исту сврху.

Зашто користити CSS за стилизовање React-а?

  • Учините апликацију прилагодљивом. Модерне веб апликације треба да буду доступне на различитим екранима, од малих до великих. CSS омогућава примену медијских упита и прилагођавање React апликације различитим величинама екрана.
  • Убрзајте развој. Можете поново користити CSS правила у више компоненти апликације.
  • Олакшајте одржавање апликације. Промене изгледа специфичних делова апликације су једноставне са CSS-ом.
  • Побољшајте корисничко искуство. CSS омогућава прилагођено форматирање, чинећи апликацију лаком за навигацију и коришћење, са текстом и дугмадима постављеним на логичним местима.

Постоји неколико метода које програмери могу користити за стилизовање React апликација. У наставку су неке од најчешћих:

Коришћење уграђених стилова

Уграђени стилови представљају једноставан начин стилизовања React апликације, јер не захтевају креирање спољних датотека стилова. CSS стилови се директно примењују у React коду.

Важно је знати да уграђени стилови имају већи приоритет у односу на друге стилове. Дакле, ако постоји спољни стил са одређеним форматирањем, он ће бити замењен уграђеним стилом.

Ово је пример уграђеног стила у 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 />);

Приказани елемент ће приказати h1 наслов са светло плавом позадином.

Предности уграђених стилова

  • Брзо. Ово је најједноставнији приступ јер се стил директно додаје елементу који желите да стилизујете.
  • Висок приоритет. Уграђени стилови замењују спољне стилове, омогућавајући вам да се фокусирате на одређену функционалност без утицаја на целу апликацију.
  • Одлично за прототипе. Уграђени стилови омогућавају тестирање функционалности пре него што се форматирање пребаци у спољну датотеку стилова.

Недостаци уграђених стилова

  • Може бити мукотрпно. Директно стилизовање сваког елемента узима доста времена.
  • Ограничено. Не могу се користити CSS функције као што су селектори и анимације.
  • Нечитљив код. Велики број уграђених стилова може учинити JSX код нечитљивим.

Увоз спољних датотека стилова

CSS код можете написати у спољној датотеци и увести је у React апликацију. Овај приступ је сличан увозу CSS датотеке у <head> HTML документа.

За ово је потребно креирати CSS датотеку у директоријуму апликације, увести је у циљну компоненту и написати правила стила.

Пример како функционишу спољни CSS стилови: креирајте CSS датотеку (нпр. App.css) и увезите је на следећи начин:

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

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

export default App;

Горе наведени код увози спољну датотеку стилова у компоненту App.js. Датотека App.css се налази у фасцикли Components.

Предности спољних CSS стилова

  • Поновна употреба. Иста CSS правила се могу користити у различитим компонентама React апликације.
  • Чистији код. Код је лакше разумети када се користе спољне датотеке стилова.
  • Напредне функције. Омогућава коришћење псеудо-класа и напредних селектора.

Недостаци спољних CSS стилова

  • Захтева поуздану конвенцију за именовање како би се избегло преклапање стилова.

Коришћење CSS модула

React апликације могу постати веома велике. CSS анимације и имена класа су глобално доступна, што може бити проблематично код великих листа стилова, јер један стил може заменити други.

CSS модули решавају овај проблем тако што обезбеђују локалну видљивост имена класа и анимација. Овај приступ осигурава да су имена класа доступна само у датотеци/компоненти где су потребна. Свако име класе добија јединствено име, избегавајући конфликте.

За имплементацију CSS модула, креирајте датотеку са екстензијом .module.css. На пример, ако се лист стилова зове „style“, назив датотеке би био style.module.css.

Увезите креирану датотеку у React компоненту и спремни сте за почетак.

CSS датотека може изгледати овако:

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

Можете увести CSS модул у App.js на следећи начин:

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

function App() {
  return (
    <h1 className={styles.heading}>Hello techblog.co.rs reader</h1>
  );
}

export default App;

Предности коришћења CSS модула

  • Лака интеграција са SCSS и CSS.
  • Избегавање конфликта имена класа.

Недостаци коришћења CSS модула

  • Упућивање на имена класа може бити збуњујуће за почетнике.

Коришћење стилизованих компоненти

Стилизоване компоненте омогућавају креирање React компоненти са CSS-ом у JavaScript коду. Стилизована компонента се понаша као React компонента са стиловима. Оне нуде динамичко стилизовање и јединствена имена класа.

За почетак, инсталирајте пакет у основни директоријум помоћу следеће команде:

npm install styled-components

Затим увезите стилизоване компоненте у React апликацију.

Пример кода App.js који користи стилизоване компоненте:

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;

Приказана апликација ће имати горе наведене стилове увезене из Styled Components.

Предности стилизованих компоненти

  • Предвидивост. Стилови су смештени у оквиру појединачних компоненти.
  • Без именовања. Нема потребе за конвенцијама именовања класа, јер се пакет брине о томе.
  • Поновна употреба. Стилизоване компоненте се могу извозити као реквизити, претварајући CSS у React компоненте, које се могу поново користити и проширивати.

Недостаци стилизованих компоненти

  • Захтева инсталацију библиотеке треће стране.

Синтаксички сјајни стилови (SASS/SCSS)

SASS нуди моћније алате и функције које недостају у стандардном CSS-у. Стилове можете писати у два различита формата, уз екстензије .scss и .sass.

Синтакса за SASS је слична обичном CSS-у, али вам не требају отварајуће и затварајуће заграде при писању правила стила.

Једноставан SASS код изгледа овако:

nav
  ul
    margin-right: 20px
    padding: 0
    list-style: list
  li
    display: block
  a
    display: block
    padding: 6px 12px
    text-decoration: underline
nav

За почетак коришћења SASS-а у React апликацији, потребно је компилирати SASS у обичан CSS. Након подешавања апликације помоћу команде Create React App, инсталирајте node-sass за компилацију:

npm install node-sass

Затим креирајте фајлове са екстензијама .scss или .sass и увезите их у нормалном формату, на пример:

import "./Components/App.sass";

Предности SASS/SCSS

  • Много динамичких функција попут миксина, угнежђивања и проширивања.
  • Мање писања CSS кода.

Недостаци SASS/SCSS

  • Стилови су глобални, што може довести до проблема са преклапањем.

Који је најбољи приступ стилизовању?

Након разговора о пет приступа, природно је питати се који је најбољи. Тешко је истаћи једног победника. Међутим, следећа разматрања ће помоћи у доношењу информисане одлуке:

  • метрика перформанси
  • потреба за системом дизајна
  • лакоћа оптимизације кода

Уграђени стилови су погодни за једноставне апликације са мало кода. Међутим, остали приступи: спољни стилови, SASS, стилизоване компоненте и CSS модули, погодни су за веће апликације.

Најбоље праксе за одржавање CSS-а у великим React апликацијама

  • Избегавати уграђене стилове. Писање уграђеног CSS-а за сваки елемент у великој апликацији може бити заморно. Уместо тога, користите спољне датотеке стилова које одговарају вашим потребама.
  • Користити линтере. Линтери као што је Stylelint могу открити грешке у стиловима и омогућити њихово брзо исправљање.
  • Редовне прегледе кода. Иако је писање CSS-а забавно, редовне прегледе кода олакшавају рано откривање грешака.
  • Аутоматизоване тестове. Ензиме и Јест су алати за аутоматизацију тестирања CSS кода.
  • Држати код DRY. За често коришћене стилове, као што су боје и маргине, користите услужне променљиве и класе, пратећи принцип „Не понављај се“ (DRY).
  • Користити конвенције именовања као што је БЕМ (Блок, Елемент, Модификатор). Овај приступ олакшава писање CSS класа које су лако разумљиве и поновно употребљиве.

Закључак

Горе наведени су неки од начина на које се може стилизовати React. Избор приступа зависи од ваших потреба, вештина и преференција. Могуће је и комбиновати неколико приступа у једној React апликацији, као што су уграђени и спољни стилови.

Такође можете истражити неке од најбољих CSS оквира и библиотека за програмере фронтенда.