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

by
Tweet
Share
Share
Pin

Да ли сте знали да преко 97% веб локација користи ЦСС за стилизовање?

Цасцадинг Стиле Схеетс, или ЦСС, омогућава програмерима да граде веб странице доброг изгледа, скенирања и презентације.

ЦСС језик одређује како се документи представљају кориснику. Документ, у овом случају, је датотека написана у маркуп језику као што је КСМЛ или ХТМЛ.

Шта је стил у Реацт-у?

Једноставност креирања, покретања и одржавања Реацт апликације је главни разлог њене популарности. Реацт је ЈаваСцрипт библиотека, а не оквир, који нуди више од само унапред написаних функција и исечака кода.

Доступност компоненти за вишекратну употребу, његова флексибилност, стабилност кода, брзина и перформансе су неки од разлога зашто је Реацт високо рангиран међу ЈаваСцрипт оквирима и библиотекама.

Стилирање у Реацт-у је процес прављења различитих компоненти у Реацт апликацији визуелно привлачних користећи ЦСС. Међутим, вреди напоменути да Реацт користи ЈСКС (ЈаваСцрипт и КСМЛ) уместо ХТМЛ као свој језик за означавање. Једна од главних разлика је у томе што ХТМЛ користи .цласс за означавање класа док ЈСКС користи .ЦлассНаме да означи исто.

Зашто бисте стилизовали Реацт користећи ЦСС?

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

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

  10 најбољих разлога да набавите рачунар у облаку за своје удаљене запослене

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

Уграђени стилови су најлакши приступ стилизовању Реацт апликације, пошто корисници не морају да креирају екстерну листу стилова. ЦСС стил се примењује директно на Реацт код.

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

Ово је демонстрација уграђеног стила у Реацт апликацији. 

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 />);

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

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

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

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

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

Увоз екстерних стилова

Можете написати ЦСС у спољну датотеку и увести га у апликацију Реацт. Овај приступ је упоредив са увозом ЦСС датотеке у ознаку <хеад> ХТМЛ документа.

Да бисте то постигли, потребно је да креирате ЦСС датотеку у директоријуму ваше апликације, увезете је у циљну компоненту и напишете правила стила за своју апликацију.

Да бисте демонстрирали како функционишу спољашњи ЦСС стилови, можете креирати ЦСС датотеку и назвати је Апп.цсс. Затим га можете извести на следећи начин. 

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Горенаведени исечак кода увози спољну листу стилова у компоненту Апп.јс. Датотека Апп.цсс се налази у фасцикли Цомпонентс.

Предности екстерних ЦСС стилова

  • За вишекратну употребу. Можете користити исто ЦСС правило/а у различитим компонентама у Реацт апликацији.
  • Чини код презентативнијим. Разумевање кода је лако када користите екстерне таблице стилова.
  • Омогућава приступ напредним ЦСС функцијама. Можете користити псеудо-класе и напредне селекторе када користите екстерне стилове.

Против спољних ЦСС стилова

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

Користите ЦСС модуле

Реацт апликације могу постати заиста велике. Називи ЦСС анимација и називи класа су, подразумевано, глобално обухваћени. Ова поставка може бити проблематична када се ради са великим стилским листовима, јер један стил може заменити други.

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

Да бисте имплементирали ЦСС модуле, направите датотеку са .модуле.цсс. Ако желите да свој лист стилова назовете стилом, име датотеке ће бити стиле.модуле.цсс.

Увезите креирану датотеку у своју Реацт компоненту и бићете спремни за почетак.

Ваша ЦСС датотека може изгледати отприлике овако;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Можете увести ЦСС модул на свој Апп.јс на следећи начин;

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;

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

  • Лако се интегрише са СЦСС и ЦСС
  • Избегава сукобе имена класа

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

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

Користите стилизоване компоненте

Компоненте са стилом омогућавају програмерима да креирају компоненте користећи ЦСС у ЈаваСцрипт коду. Стилизована компонента делује као Реацт компонента која долази са стиловима. Стилизоване компоненте нуде динамички стил и јединствена имена класа.

Да бисте почели да користите стилизоване компоненте, можете да инсталирате пакет у свој основни директоријум помоћу ове команде;

npm install 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;

Рендерована апликација ће имати горе наведене стилове увезене из Стилед Цомпонентс.

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

  • То је предвидљиво. Стилови у овом приступу стилизовању су угнежђени у појединачне компоненте.
  • Нема потребе да се фокусирате на конвенције именовања ваших класа. Само напишите своје стилове, а пакет ће се побринути за остало.
  • Можете експортовати стилизоване компоненте као реквизите. Стилизоване компоненте претварају нормалне ЦСС у Реацт компоненте. Тако можете поново користити овај код, проширити стилове кроз пропс и извести.

Цон оф Стилед Цомпонентс

  • Морате да инсталирате библиотеку треће стране да бисте започели.

Синтаксички сјајни стилови (САСС/ СЦСС)

САСС долази са моћнијим алатима и функцијама које недостају у нормалном ЦСС-у. Можете писати стилове у два различита стила вођени овим екстензијама; .сцсс и .сасс.

  Како извршити задатак када се нова датотека дода у директоријум у Линуку

Синтакса за САСС је слична оној код уобичајеног ЦСС-а. Међутим, нису вам потребне отварајуће и затварајуће заграде када пишете правила стила у САСС.

Једноставан исечак САСС-а ће се појавити на следећи начин;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Да бисте почели да користите САСС у вашој Реацт апликацији, морате прво да компајлирате САСС у обичан ЦСС. Након подешавања апликације помоћу команде Цреате Реацт Апп, можете инсталирати ноде-сасс да бисте се побринули за компилацију. 

npm install node-sass

Затим можете креирати своје датотеке и дати им или .сцсс или .сасс екстензије. Затим можете да увезете своје датотеке на нормалан начин. На пример;

import "./Components/App.sass";

Предности САСС/СЦСС

  • Долази са многим динамичким функцијама као што су миксини, угнежђење и проширење.
  • Не морате много да напишете ЦСС код када користите САСС/СЦСС

Недостаци САСС/СЦСС

  • Стилови су глобални и стога можете наићи на најважније проблеме.

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

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

  • метрика учинка
  • Било да вам је потребан систем дизајна
  • Лакоћа оптимизације вашег кода

Уграђени стил је погодан када имате једноставну апликацију са неколико линија кода. Међутим, сви остали; екстерни, САСС, стилизоване компоненте и ЦСС модули, погодни су за велике апликације.

Које су најбоље праксе за одржавање ЦСС-а у великој Реацт апликацији?

  • Избегавајте уграђени стил. Писање инлине ЦСС стилова за сваку ознаку у великој Реацт апликацији може бити заморно. Уместо тога, користите екстерну листу стилова која одговара вашим потребама.
  • Линт свој код. Линтери као што је Стилелинт ће истаћи грешке у стилу у вашем коду тако да их можете раније поправити.
  • Урадите редовне прегледе кода. Писање ЦСС-а изгледа забавно, али редовни прегледи кода олакшавају рано препознавање грешака.
  • Аутоматизујте тестове на вашим ЦСС датотекама. Ензиме и Јест су сјајни алати које можете користити за аутоматизацију тестова вашег ЦСС кода.
  • Чувајте свој код СУВИ. када се бавите често коришћеним стиловима као што су боје и маргине, користите услужне варијабле и класе како то иде са принципом Не понављајте се (ДРИ).
  • Користите конвенције именовања као што је модификатор блокова елемента. Такав приступ олакшава писање ЦСС класа које је лако разумети и поново користити.

Закључак

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

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