Tudtad, hogy a webhelyek több mint 97%-a CSS-t használ a stílushoz?
A Cascading Style Sheets vagy CSS lehetővé teszi a fejlesztők számára, hogy jó megjelenésű, beolvasható és bemutatható weboldalakat készítsenek.
A CSS nyelv meghatározza, hogy a dokumentumok hogyan jelenjenek meg a felhasználó számára. A dokumentum ebben az esetben egy jelölőnyelven, például XML-ben vagy HTML-ben írt fájl.
Tartalomjegyzék
Mi a stílus a Reactban?
A React alkalmazás létrehozásának, futtatásának és karbantartásának egyszerűsége a fő oka annak népszerűségének. A React egy JavaScript-könyvtár, nem pedig keretrendszer, amely nemcsak előre megírt függvényeket és kódrészleteket kínál.
Az újrafelhasználható összetevők elérhetősége, rugalmassága, kódstabilitása, sebessége és teljesítménye néhány ok, amiért a React előkelő helyen szerepel a JavaScript-keretrendszerek és -könyvtárak között.
A React stílusosítása a React alkalmazás különböző összetevőinek látványossá tétele a CSS segítségével. Érdemes azonban megjegyezni, hogy a React a JSX-et (JavaScript és XML) használja HTML helyett jelölőnyelvként. Az egyik fő különbség az, hogy a HTML a .class karaktert használja az osztályok címkézésére, míg a JSX a .ClassName karaktert használja ugyanezek jelölésére.
Miért érdemes a React stílusát CSS használatával?
- Tedd alkalmazkodóvá az alkalmazást. A modern webalkalmazásoknak kis és nagy képernyőkön is elérhetőnek kell lenniük. A CSS lehetővé teszi, hogy médialekérdezéseket alkalmazzon a React alkalmazásban, és reagáljon a különböző képernyőméretekre.
- Gyorsítsa fel a fejlesztési folyamatot. Ugyanazt a CSS-szabályt használhatja a React alkalmazás több összetevőjére is.
- Tegye karbantarthatóvá a React alkalmazást. A CSS használatával egyszerű az alkalmazás bizonyos összetevőinek/részeinek megjelenésének módosítása.
- Továbbfejlesztett felhasználói élmény. A CSS felhasználóbarát formázást tesz lehetővé. A React szöveggel és logikus helyeken található gombokkal könnyen navigálható és használható.
A fejlesztők számos megközelítést használhatnak React-alkalmazásaik stílusának kialakítására. Az alábbiakban néhány a leggyakoribb;
Írjon beágyazott stílusokat
A beágyazott stílusok a React alkalmazás stílusának legegyszerűbb módja, mivel a felhasználóknak nem kell külső stíluslapot létrehozniuk. A CSS-stílus közvetlenül a React kódra kerül alkalmazásra.
Érdemes megjegyezni, hogy a beépített stílusok elsőbbséget élveznek más stílusokkal szemben. Így, ha van egy külső stíluslapja némi formázással, azt felülírná a belső stílus.
Ez a beépített stílus bemutatója a React alkalmazásban.
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 />);
A megjelenített elem egy h1-et fog megjeleníteni világoskék háttérrel.
A beépített stílus előnyei
- Gyors. Ez a legegyszerűbb megközelítés, mivel közvetlenül a stílust kívánt címkéhez ad hozzá stílust.
- Nagy előnye van. A beágyazott stílusok felülírják a külső stíluslapokat. Így egy adott funkcióra összpontosíthat anélkül, hogy a teljes alkalmazást megváltoztatná.
- Remek a prototípus elkészítéséhez. A belső stílusok segítségével tesztelheti a funkcionalitást, mielőtt a formázást beépítené egy külső stíluslapba.
A beépített stílus hátrányai
- Unalmas lehet. Minden címke közvetlen formázása időigényes.
- Korlátozott. Nem használhat CSS-funkciókat, például választókat és animációkat soron belüli stílusokkal.
- Sok soron belüli stílus olvashatatlanná teszi a JSX kódot.
Külső stíluslapok importálása
Írhat CSS-t egy külső fájlba, és importálhatja azt a React alkalmazásba. Ez a megközelítés egy CSS-fájl importálásához hasonlítható egy HTML-dokumentum
címkéjébe.Ennek eléréséhez létre kell hoznia egy CSS-fájlt az alkalmazás könyvtárában, importálnia kell a célösszetevőbe, és stílusszabályokat kell írnia az alkalmazáshoz.
A külső CSS-stíluslapok működésének bemutatásához létrehozhat egy CSS-fájlt, és elnevezheti App.css-nek. Ezután az alábbiak szerint exportálhatja.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
A fenti kódrészlet egy külső stíluslapot importál az App.js összetevőbe. Az App.css fájl az Összetevők mappában található.
A külső CSS stíluslapok előnyei
- Újrafelhasználható. Ugyanazt a CSS-szabályt/szabályokat használhatja a React alkalmazás különböző összetevőinél.
- Láthatóbbá teszi a kódot. A kód megértése egyszerű külső stíluslapok használatakor.
- Hozzáférést biztosít a fejlett CSS-funkciókhoz. Külső stíluslapok használatakor pszeudoosztályokat és speciális választókat használhat.
Külső CSS-stíluslapok konzolja
- Megbízható elnevezési konvenciót igényel, hogy a stílusok ne írják felül.
Használjon CSS modulokat
A React alkalmazások nagyon nagyok lehetnek. A CSS-animációnevek és osztálynevek alapértelmezés szerint globálisan hatókörűek. Ez a beállítás problémás lehet nagy stíluslapok kezelésekor, mivel az egyik stílus felülírhatja a másikat.
A CSS-modulok megoldják ezt a kihívást az animáció és az osztálynevek helyi hatókörével. Ez a megközelítés biztosítja, hogy az osztálynevek csak ott legyenek elérhetők a fájlban/összetevőben, ahol szükség van rájuk. Minden osztálynév egyedi programozott nevet kap, elkerülve az ütközéseket.
A CSS-modulok megvalósításához hozzon létre egy .module.css fájlt. Ha stílusként szeretné elnevezni a stíluslapot, akkor a fájl neve style.module.css lesz.
Importálja a létrehozott fájlt a React összetevőbe, és készen áll a kezdésre.
A CSS-fájlja valahogy így nézhet ki;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
A CSS-modult az alábbiak szerint importálhatja az App.js-ba;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello etoppc.com reader</h1>
);
}
export default App;
A CSS-modulok használatának előnyei
- Könnyen integrálható SCSS-sel és CSS-sel
- Elkerüli az osztálynév-ütközést
A CSS-modulok használatának hátrányai
- Az osztálynevekre való hivatkozás CSS-modulokkal zavaró lehet a kezdők számára.
Használjon stílusos összetevőket
A stílusos összetevők lehetővé teszik a fejlesztők számára, hogy CSS-t használva hozzon létre összetevőket JavaScript-kódban. A stílusos összetevő a stílusokhoz tartozó React összetevőként működik. A Styled Components dinamikus stílust és egyedi osztályneveket kínál.
A Stílusos összetevők használatának megkezdéséhez telepítheti a csomagot a gyökérmappába ezzel a paranccsal;
npm install styled-components
A következő lépés a stílusos összetevők importálása a React alkalmazásba
A következő az App.js kódrészlete, amely stílusos összetevőket használ;
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;
A megjelenített alkalmazás a fenti stílusokat a Stílusos összetevőkből importálja.
A stílusos alkatrészek előnyei
- Megjósolható. Ebben a stílusmegközelítésben a stílusok egyedi összetevőkbe vannak beágyazva.
- Nem kell az osztályok elnevezési konvencióira összpontosítania. Csak írja meg stílusait, és a csomag gondoskodik a többiről.
- A Stílusos komponenseket kellékként exportálhatja. A stílusos komponensek a normál CSS-t React komponensekké alakítják. Így újra felhasználhatja ezt a kódot, kiterjesztheti a stílusokat kellékekkel, és exportálhatja.
Stílusos komponensek Con
- A kezdéshez telepítenie kell egy harmadik féltől származó könyvtárat.
Szintaktikailag félelmetes stíluslapok (SASS/SCSS)
A SASS erősebb eszközökkel és funkciókkal érkezik, amelyek hiányoznak a normál CSS-ből. Két különböző stílusban írhat stílusokat ezeknek a kiterjesztéseknek a segítségével; .scss és .sass.
A SASS szintaxisa hasonló a szokásos CSS szintaxisához. A SASS-ban stílusszabályok írásakor azonban nincs szükség nyitó és záró zárójelekre.
A SASS egyszerű részlete a következőképpen jelenik meg;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
A SASS használatának megkezdéséhez a React alkalmazásban először le kell fordítania a SASS-t egyszerű CSS-re. Miután beállította az alkalmazást a Create React App paranccsal, telepítheti a node-sass programot, hogy gondoskodjon a fordításról.
npm install node-sass
Ezután létrehozhatja a fájlokat, és .scss vagy .sass kiterjesztést adhat nekik. Ezután a szokásos módon importálhatja a fájlokat. Például;
import "./Components/App.sass";
A SASS/SCSS előnyei
- Számos dinamikus funkcióval rendelkezik, mint például keverések, egymásba ágyazás és bővítés.
- A SASS/SCSS használatakor nem kell sokat írnia a CSS-kódnak
A SASS/SCSS hátrányai
- A stílusok globálisak, és ezért mindenek felett álló problémákkal találkozhat.
Melyik a legjobb stílusmódszer?
Mivel öt megközelítést tárgyaltunk, szeretné tudni, melyik a legjobb. Nehéz kiemelni a teljes győztest ebben a vitában. Ezek a megfontolások azonban segítenek megalapozott döntés meghozatalában:
- A teljesítménymutatók
- Akár tervezőrendszerre van szüksége
- A kód optimalizálásának egyszerűsége
A beágyazott stílus akkor megfelelő, ha egyszerű, néhány soros kóddal rendelkező alkalmazással rendelkezik. Azonban az összes többi; külső, SASS, stílusos komponensek és CSS-modulok alkalmasak nagy alkalmazásokhoz.
Melyek a CSS karbantartásának bevált gyakorlatai egy nagy reagálású alkalmazásokban?
- Kerülje a beépített stílust. Fárasztó lehet beágyazott CSS-stílusok írása minden címkéhez egy nagy React alkalmazásban. Ehelyett használjon az igényeinek megfelelő külső stíluslapot.
- Sorolja fel a kódot. Az olyan Linterek, mint a Stylelint, kiemelik a stílushibákat a kódban, így korán kijavíthatja azokat.
- Végezzen rendszeres kódellenőrzést. A CSS írása szórakoztatónak tűnik, de a rendszeres kódellenőrzés megkönnyíti a hibák korai felismerését.
- Automatizálja a CSS-fájlok tesztelését. Az Enzyme és a Jest nagyszerű eszközök, amelyek segítségével automatizálhatja a CSS-kód tesztjeit.
- Tartsa a kódot SZÁRAZON. amikor az általánosan használt stílusokkal, például színekkel és margókkal foglalkozik, használjon segédváltozókat és osztályokat, ahogy az a Ne ismételje meg magát (DRY) elv szerint.
- Használjon elnevezési konvenciókat, mint például a Block Element Modifier. Ez a megközelítés megkönnyíti a könnyen érthető és újrafelhasználható CSS-osztályok írását.
Következtetés
A fentiekben felsorolunk néhány módot, amellyel a React stílusát alakíthatja. A stílusos megközelítés kiválasztása az Ön igényeitől, készségeitől és ízlésétől függ. A React alkalmazásban több stílusmegközelítést is kombinálhat, például belső és külső stíluslapokat.
Felfedezhet néhány legjobb CSS-keretrendszert és -könyvtárat a front-end fejlesztők számára.