Vai zinājāt, ka vairāk nekā 97% vietņu stila veidošanai izmanto CSS?
Cascading Style Sheets jeb CSS ļauj izstrādātājiem izveidot izskatīgas, skenējamas un reprezentatīvas tīmekļa lapas.
CSS valoda norāda, kā dokumenti tiek parādīti lietotājam. Šajā gadījumā dokuments ir fails, kas rakstīts iezīmēšanas valodā, piemēram, XML vai HTML.
Kas ir stils programmā React?
React lietotnes izveides, palaišanas un uzturēšanas vienkāršība ir galvenais tās popularitātes iemesls. React ir JavaScript bibliotēka, nevis sistēma, kas piedāvā vairāk nekā tikai iepriekš uzrakstītas funkcijas un koda fragmentus.
Atkārtoti lietojamu komponentu pieejamība, to elastība, koda stabilitāte, ātrums un veiktspēja ir daži no iemesliem, kāpēc React ir ierindojies augstā vietā starp JavaScript ietvariem un bibliotēkām.
Styling programmā React ir process, kurā dažādi React lietotnes komponenti tiek padarīti vizuāli pievilcīgi, izmantojot CSS. Tomēr ir vērts atzīmēt, ka React kā iezīmēšanas valodu izmanto JSX (JavaScript un XML), nevis HTML. Viena no galvenajām atšķirībām ir tā, ka HTML izmanto .class, lai apzīmētu klases, bet JSX izmanto .ClassName, lai apzīmētu tos pašus.
Kāpēc jums vajadzētu veidot React, izmantojot CSS?
- Padariet savu lietotni adaptīvu. Mūsdienu tīmekļa lietotnēm jābūt pieejamām gan mazos, gan lielos ekrānos. CSS ļauj lietotnei React lietot multivides vaicājumus un pielāgot to dažādiem ekrāna izmēriem.
- Paātriniet izstrādes procesu. Varat izmantot vienu un to pašu CSS kārtulu vairākos React lietotnes komponentos.
- Padariet lietotni React apkopējamu. Izmantojot CSS, ir viegli mainīt konkrētu lietotnes komponentu/daļu izskatu.
- Uzlabota lietotāja pieredze. CSS nodrošina lietotājam draudzīgu formatēšanu. React ar tekstu un pogām loģiskās vietās ir viegli orientējams un lietojams.
Ir vairākas pieejas, ko izstrādātāji var izmantot savu React lietotņu stila veidošanai. Tālāk ir minēti daži no visizplatītākajiem;
Rakstiet iekļautos stilus
Iekļautie stili ir vienkāršākā pieeja React lietotnes stila veidošanai, jo lietotājiem nav jāizveido ārēja stila lapa. CSS stils tiek lietots tieši React kodam.
Ir vērts atzīmēt, ka iekļautajiem stiliem ir augsta prioritāte pār citiem stiliem. Tādējādi, ja jums būtu ārēja stila lapa ar kādu formatējumu, to ignorētu iekļautais stils.
Šī ir iekļautā stila demonstrācija React lietotnē.
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 />);
Parādītajā elementā tiks parādīts h1 ar gaiši zilu fonu.
Iebūvētā stila plusi
- Ātri. Tā ir vienkāršākā pieeja, jo stilu pievienojat tieši tagam, kuru vēlaties veidot.
- Ir liela izvēle. Iekļautie stili ignorē ārējās stilu lapas. Tādējādi varat to izmantot, lai koncentrētos uz noteiktu funkcionalitāti, nemainot visu lietotni.
- Lieliski piemērots prototipu veidošanai. Varat izmantot iekļautos stilus, lai pārbaudītu funkcionalitāti pirms formatējuma iekļaušanas ārējā stila lapā.
Iekļautā stila mīnusi
- Var būt garlaicīgs. Katra atzīmes veidošana tiešā veidā ir laikietilpīga.
- Ierobežots. Ar iekļautajiem stiliem nevar izmantot CSS funkcijas, piemēram, atlasītājus un animācijas.
- Daudzi iekļautie stili padara JSX kodu nelasāmu.
Ārējo stilu lapu importēšana
Varat rakstīt CSS ārējā failā un importēt to lietotnē React. Šī pieeja ir salīdzināma ar CSS faila importēšanu HTML dokumenta tagā
.Lai to panāktu, lietotnes direktorijā ir jāizveido CSS fails, jāimportē tas mērķa komponentā un jāraksta savas lietotnes stila kārtulas.
Lai parādītu, kā darbojas ārējās CSS stila lapas, varat izveidot CSS failu un nosaukt to par App.css. Pēc tam varat to eksportēt šādi.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
Iepriekš minētais koda fragments importē ārēju stila lapu komponentā App.js. Fails App.css atrodas mapē Components.
Ārējo CSS stila lapu plusi
- Atkārtoti lietojams. Varat izmantot vienu un to pašu CSS kārtulu(-as) dažādos React lietotnes komponentos.
- Padara kodu reprezentablāku. Izmantojot ārējās stila lapas, ir viegli saprast kodu.
- Nodrošina piekļuvi uzlabotajām CSS funkcijām. Izmantojot ārējās stila lapas, varat izmantot pseidoklases un papildu atlasītājus.
Ārējo CSS stilu lapu trūkums
- Nepieciešama uzticama nosaukumu piešķiršanas metode, lai nodrošinātu, ka stili netiek ignorēti.
Izmantojiet CSS moduļus
React lietotnes var kļūt ļoti lielas. CSS animāciju nosaukumi un klašu nosaukumi pēc noklusējuma ir globāli. Šis iestatījums var būt problemātisks, strādājot ar lielām stila lapām, jo viens stils var ignorēt citu.
CSS moduļi atrisina šo izaicinājumu, lokāli nosakot animācijas un klašu nosaukumus. Šī pieeja nodrošina, ka klašu nosaukumi failā/komponentā ir pieejami tikai tur, kur tie ir nepieciešami. Katram klases nosaukumam tiek piešķirts unikāls programmatisks nosaukums, izvairoties no konfliktiem.
Lai ieviestu CSS moduļus, izveidojiet failu ar .module.css. Ja vēlaties savu stila lapu nosaukt par stilu, faila nosaukums būs style.module.css.
Importējiet izveidoto failu savā React komponentā, un jūs būsiet gatavs sākt.
Jūsu CSS fails varētu izskatīties šādi;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Varat importēt CSS moduli savā App.js, kā norādīts tālāk.
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello pcdream.lt reader</h1>
);
}
export default App;
CSS moduļu izmantošanas plusi
- Viegli integrējas ar SCSS un CSS
- Izvairās no klases nosaukumu konfliktiem
CSS moduļu izmantošanas trūkumi
- Atsauces uz klašu nosaukumiem, izmantojot CSS moduļus, var būt mulsinoši iesācējiem.
Izmantojiet stila komponentus
Stilizēti komponenti ļauj izstrādātājiem izveidot komponentus, izmantojot CSS JavaScript kodā. Stilizēts komponents darbojas kā React komponents, kas tiek piegādāts kopā ar stiliem. Stilizētie komponenti piedāvā dinamisku stilu un unikālus klašu nosaukumus.
Lai sāktu izmantot Styled Components, varat instalēt pakotni savā saknes mapē, izmantojot šo komandu;
npm install styled-components
Nākamais solis ir stilizētu komponentu importēšana programmā React
Tālāk ir sniegts App.js koda fragments, kurā tiek izmantoti stilizētie komponenti;
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;
Renderētajā lietotnē iepriekš minētie stili tiks importēti no Styled Components.
Stilētu komponentu plusi
- Tas ir paredzams. Šīs veidošanas pieejas stili ir ligzdoti atsevišķos komponentos.
- Nav jākoncentrējas uz savu nodarbību nosaukumu piešķiršanas noteikumiem. Vienkārši uzrakstiet savus stilus, un iepakojums parūpēsies par pārējo.
- Jūs varat eksportēt veidotos komponentus kā rekvizītus. Stilizētie komponenti pārvērš parasto CSS par React komponentiem. Tādējādi varat atkārtoti izmantot šo kodu, paplašināt stilus, izmantojot rekvizītus, un eksportēt.
Stilētu komponentu koncepts
- Lai sāktu, jums ir jāinstalē trešās puses bibliotēka.
Sintaktiski satriecošas stila lapas (SASS/SCSS)
SASS ir aprīkots ar jaudīgākiem rīkiem un funkcijām, kuru trūkst parastajā CSS. Varat rakstīt stilus divos dažādos stilos, vadoties pēc šiem paplašinājumiem; .scss un .sass.
SASS sintakse ir līdzīga parastajai CSS sintakse. Tomēr, rakstot stila noteikumus SASS, jums nav vajadzīgas sākuma un aizvēršanas iekavas.
Vienkāršs SASS fragments parādīsies šādi;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
Lai sāktu izmantot SASS savā React lietotnē, vispirms ir jākompilē SASS vienkāršā CSS formātā. Pēc lietotnes iestatīšanas, izmantojot komandu Create React App, varat instalēt node-sass, lai rūpētos par kompilāciju.
npm install node-sass
Pēc tam varat izveidot savus failus un piešķirt tiem .scss vai .sass paplašinājumus. Pēc tam varat importēt failus parastajā veidā. Piemēram;
import "./Components/App.sass";
SASS/SCSS plusi
- Tam ir daudz dinamisku funkciju, piemēram, sajaukšanas, ligzdošanas un paplašināšanas.
- Lietojot SASS/SCSS, jums nav nepieciešams daudz CSS koda rakstīšanas
SASS/SCSS mīnusi
- Stili ir globāli, un tādējādi jūs varat saskarties ar svarīgākām problēmām.
Kura ir labākā stila pieeja?
Tā kā mēs esam apsprieduši piecas pieejas, jūs vēlaties zināt, kura ir labākā. Šajā diskusijā ir grūti izcelt tiešo uzvarētāju. Tomēr šie apsvērumi palīdzēs jums pieņemt apzinātu lēmumu:
- Veiktspējas rādītāji
- Neatkarīgi no tā, vai jums ir nepieciešama dizaina sistēma
- Vienkārša koda optimizēšana
Iekļauts stils ir piemērots, ja jums ir vienkārša lietotne ar dažām koda rindām. Tomēr visi pārējie; ārējie, SASS, stilizētie komponenti un CSS moduļi ir piemēroti lielām lietotnēm.
Kāda ir paraugprakse CSS uzturēšanai lielā React lietojumprogrammā?
- Izvairieties no iestrādāta stila. Iekļauto CSS stilu rakstīšana katram tagam lielā React lietotnē var būt nogurdinoši. Tā vietā izmantojiet ārējo stila lapu, kas atbilst jūsu vajadzībām.
- Salieciet kodu. Linters, piemēram, Stylelint, iezīmēs stila kļūdas jūsu kodā, lai jūs varētu tās savlaicīgi novērst.
- Regulāri veiciet kodu pārskatīšanu. CSS rakstīšana šķiet jautra, taču regulāras koda pārskatīšanas atvieglo kļūdu agrīnu identificēšanu.
- Automatizējiet CSS failu testus. Enzyme un Jest ir lieliski rīki, kurus varat izmantot, lai automatizētu CSS koda pārbaudes.
- Saglabājiet savu kodu SAUSĀ. strādājot ar bieži lietotiem stiliem, piemēram, krāsām un piemalēm, izmantojiet utilītu mainīgos un klases, kā tas atbilst principam Neatkārtojiet sevi (DRY).
- Izmantojiet nosaukumu piešķiršanas konvencijas, piemēram, Block Element Modifier. Šāda pieeja ļauj viegli rakstīt CSS klases, kuras ir viegli saprast un izmantot atkārtoti.
Secinājums
Iepriekš minēti daži veidi, kā veidot React stilu. Veidošanas pieejas izvēle būs atkarīga no jūsu vajadzībām, prasmēm un gaumes. Varat pat savā React lietotnē apvienot vairākas stila pieejas, piemēram, iekļautās un ārējās stila lapas.
Varat arī izpētīt dažus labākos CSS ietvarus un bibliotēkas priekšgala izstrādātājiem.