Γνωρίζατε ότι πάνω από το 97% των ιστότοπων χρησιμοποιούν CSS για στυλ;
Τα Cascading Style Sheets, ή CSS, επιτρέπουν στους προγραμματιστές να δημιουργούν ιστοσελίδες με όμορφη εμφάνιση, δυνατότητα σάρωσης και παρουσίασης.
Η γλώσσα CSS καθορίζει τον τρόπο με τον οποίο παρουσιάζονται τα έγγραφα στον χρήστη. Ένα έγγραφο, σε αυτήν την περίπτωση, είναι ένα αρχείο γραμμένο σε μια γλώσσα σήμανσης όπως XML ή HTML.
Πίνακας περιεχομένων
Τι είναι το στυλ στο React;
Η απλότητα της δημιουργίας, εκτέλεσης και συντήρησης μιας εφαρμογής React είναι ο κύριος λόγος πίσω από τη δημοτικότητά της. Το React είναι μια βιβλιοθήκη JavaScript και όχι ένα πλαίσιο, που προσφέρει περισσότερα από προκαθορισμένες λειτουργίες και αποσπάσματα κώδικα.
Η διαθεσιμότητα επαναχρησιμοποιήσιμων στοιχείων, η ευελιξία τους, η σταθερότητα του κώδικα, η ταχύτητα και η απόδοση είναι μερικοί από τους λόγους για τους οποίους το React κατατάσσεται ψηλά μεταξύ των πλαισίων και των βιβλιοθηκών JavaScript.
Το στυλ στο React είναι η διαδικασία που κάνει διάφορα στοιχεία σε μια εφαρμογή React οπτικά ελκυστικά χρησιμοποιώντας CSS. Ωστόσο, αξίζει να σημειωθεί ότι το React χρησιμοποιεί JSX (JavaScript και XML) αντί για HTML ως γλώσσα σήμανσης. Μία από τις κύριες διαφορές είναι ότι η HTML χρησιμοποιεί .class για να επισημάνει τις κλάσεις ενώ το JSX χρησιμοποιεί το .ClassName για να υποδηλώσει το ίδιο.
Γιατί πρέπει να κάνετε στυλ React χρησιμοποιώντας CSS;
- Κάντε την εφαρμογή σας να αποκρίνεται. Οι σύγχρονες εφαρμογές Ιστού θα πρέπει να είναι προσβάσιμες τόσο σε μικρές όσο και σε μεγάλες οθόνες. Το CSS σάς επιτρέπει να εφαρμόζετε ερωτήματα πολυμέσων στην εφαρμογή React και να την κάνετε να αποκρίνεται σε διάφορα μεγέθη οθόνης.
- Επιταχύνετε τη διαδικασία ανάπτυξης. Μπορείτε να χρησιμοποιήσετε τον ίδιο κανόνα CSS σε πολλά στοιχεία της εφαρμογής React.
- Κάντε την εφαρμογή React διατηρήσιμη. Η πραγματοποίηση αλλαγών εμφάνισης σε συγκεκριμένα στοιχεία/τμήματα της εφαρμογής σας είναι εύκολη χρησιμοποιώντας το CSS.
- Βελτιωμένη εμπειρία χρήστη. Το CSS επιτρέπει τη φιλική προς το χρήστη μορφοποίηση. Ένα React με κείμενο και κουμπιά σε λογικά σημεία είναι εύκολο στην πλοήγηση και τη χρήση.
Υπάρχουν πολλές προσεγγίσεις που μπορούν να χρησιμοποιήσουν οι προγραμματιστές για το στυλ των εφαρμογών τους React. Τα παρακάτω είναι μερικά από τα πιο κοινά.
Γράψτε ενσωματωμένα στυλ
Τα ενσωματωμένα στυλ είναι η πιο εύκολη προσέγγιση για το στυλ μιας εφαρμογής React, καθώς οι χρήστες δεν χρειάζεται να δημιουργήσουν ένα εξωτερικό φύλλο στυλ. Το στυλ CSS εφαρμόζεται απευθείας στον κώδικα React.
Αξίζει να σημειωθεί ότι τα inline στυλ έχουν υψηλή προτεραιότητα έναντι άλλων στυλ. Έτσι, εάν είχατε ένα εξωτερικό φύλλο στυλ με κάποια μορφοποίηση, θα παρακαμφθεί από το ενσωματωμένο στυλ.
Αυτή είναι μια επίδειξη του ενσωματωμένου στυλ σε μια εφαρμογή 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 με γαλάζιο φόντο.
Πλεονεκτήματα του inline styling
- Γρήγορα. Είναι η απλούστερη προσέγγιση, καθώς προσθέτετε στυλ απευθείας στην ετικέτα που θέλετε να διαμορφώσετε.
- Έχει μεγάλη προτίμηση. Τα ενσωματωμένα στυλ αντικαθιστούν τα εξωτερικά φύλλα στυλ. Έτσι, μπορείτε να το χρησιμοποιήσετε για να εστιάσετε σε μια συγκεκριμένη λειτουργικότητα χωρίς να αλλάξετε ολόκληρη την εφαρμογή.
- Καταπληκτικό για πρωτότυπα. Μπορείτε να χρησιμοποιήσετε ενσωματωμένα στυλ για να δοκιμάσετε τη λειτουργικότητα πριν ενσωματώσετε τη μορφοποίηση σε ένα εξωτερικό φύλλο στυλ.
Μειονεκτήματα του inline styling
- Μπορεί να είναι κουραστικό. Το να διαμορφώσετε απευθείας κάθε ετικέτα είναι χρονοβόρο.
- Περιορισμένος. Δεν μπορείτε να χρησιμοποιήσετε λειτουργίες CSS όπως επιλογείς και κινούμενα σχέδια με ενσωματωμένα στυλ.
- Πολλά ενσωματωμένα στυλ καθιστούν τον κώδικα JSX μη αναγνώσιμο.
Εισαγωγή εξωτερικών φύλλων στυλ
Μπορείτε να γράψετε CSS σε ένα εξωτερικό αρχείο και να το εισαγάγετε στην εφαρμογή React. Αυτή η προσέγγιση είναι συγκρίσιμη με την εισαγωγή ενός αρχείου CSS στην ετικέτα
ενός εγγράφου 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
- Απαιτεί αξιόπιστη σύμβαση ονομασίας για να διασφαλιστεί ότι τα στυλ δεν παρακάμπτονται.
Χρησιμοποιήστε μονάδες CSS
Οι εφαρμογές React μπορούν να γίνουν πολύ μεγάλες. Τα ονόματα των κινούμενων εικόνων CSS και τα ονόματα κλάσεων έχουν, από προεπιλογή, σφαιρικό πεδίο εφαρμογής. Αυτή η ρύθμιση μπορεί να είναι προβληματική όταν αντιμετωπίζετε μεγάλα φύλλα στυλ, καθώς ένα στυλ μπορεί να παρακάμψει ένα άλλο.
Οι ενότητες CSS επιλύουν αυτήν την πρόκληση προσδιορίζοντας τοπικά τα κινούμενα σχέδια και τα ονόματα των κλάσεων. Αυτή η προσέγγιση διασφαλίζει ότι τα ονόματα κλάσεων είναι διαθέσιμα μόνο εντός του αρχείου/του στοιχείου όπου χρειάζονται. Κάθε όνομα κλάσης λαμβάνει ένα μοναδικό όνομα προγραμματισμού, αποφεύγοντας τις διενέξεις.
Για να εφαρμόσετε μονάδες CSS, δημιουργήστε ένα αρχείο με .module.css. Εάν θέλετε να ονομάσετε το φύλλο στυλ σας ως στυλ, το όνομα του αρχείου θα είναι 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 grtechpc.org reader</h1>
);
}
export default App;
Πλεονεκτήματα της χρήσης μονάδων CSS
- Ενσωματώνεται εύκολα με SCSS και CSS
- Αποφεύγει τις συγκρούσεις ονομάτων τάξης
Μειονεκτήματα της χρήσης μονάδων CSS
- Η αναφορά ονομάτων κλάσεων με χρήση μονάδων CSS μπορεί να προκαλέσει σύγχυση στους αρχάριους.
Χρησιμοποιήστε Styled-Components
Τα στοιχεία με στυλ επιτρέπουν στους προγραμματιστές να δημιουργούν στοιχεία χρησιμοποιώντας CSS σε κώδικα JavaScript. Ένα στοιχείο με στυλ λειτουργεί ως στοιχείο React που συνοδεύεται από στυλ. Τα Styled Components προσφέρουν δυναμικό στυλ και μοναδικά ονόματα κλάσεων.
Για να ξεκινήσετε να χρησιμοποιείτε τα Styled Components, μπορείτε να εγκαταστήσετε το πακέτο στον ριζικό φάκελο χρησιμοποιώντας αυτήν την εντολή.
npm install styled-components
Το επόμενο βήμα είναι η εισαγωγή Styled Components στην εφαρμογή React
Το παρακάτω είναι ένα απόσπασμα κώδικα του App.js που χρησιμοποιεί 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;
Η εφαρμογή που αποδίδεται θα έχει τα παραπάνω στυλ που θα εισαχθούν από τα Styled Components.
Πλεονεκτήματα των εξαρτημάτων με στυλ
- Είναι προβλέψιμο. Τα στυλ σε αυτήν την προσέγγιση στυλ ενσωματώνονται σε μεμονωμένα στοιχεία.
- Δεν χρειάζεται να εστιάσετε στις συμβάσεις ονομασίας των τάξεων σας. Απλώς γράψτε τα στυλ σας και το πακέτο θα αναλάβει τα υπόλοιπα.
- Μπορείτε να εξάγετε στοιχεία με στυλ ως στηρίγματα. Τα Styled Components μετατρέπουν το κανονικό CSS σε στοιχεία React. Μπορείτε επομένως να επαναχρησιμοποιήσετε αυτόν τον κώδικα, να επεκτείνετε τα στυλ μέσω των στηρίξεων και να κάνετε εξαγωγή.
Con of Styled Components
- Πρέπει να εγκαταστήσετε μια βιβλιοθήκη τρίτου μέρους για να ξεκινήσετε.
Συντακτικά φοβερά φύλλα στυλ (SASS/SCSS)
Το SASS συνοδεύεται από πιο ισχυρά εργαλεία και δυνατότητες που λείπουν στο κανονικό CSS. Μπορείτε να γράψετε στυλ σε δύο διαφορετικά στυλ με γνώμονα αυτές τις επεκτάσεις. .scss και .sass.
Η σύνταξη για το SASS είναι παρόμοια με αυτή του συνηθισμένου CSS. Ωστόσο, δεν χρειάζεστε τις αγκύλες ανοίγματος και κλεισίματος όταν γράφετε κανόνες στυλ στο SASS.
Ένα απλό απόσπασμα του 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
- Έρχεται με πολλά δυναμικά χαρακτηριστικά, όπως mixins, ένθεση και επέκταση.
- Δεν χρειάζεται πολύ να γράψετε κώδικα CSS όταν χρησιμοποιείτε SASS/SCSS
Μειονεκτήματα SASS/SCSS
- Τα στυλ είναι παγκόσμια και, ως εκ τούτου, μπορεί να συναντήσετε επιτακτικά ζητήματα.
Ποια είναι η καλύτερη στυλιστική προσέγγιση;
Δεδομένου ότι έχουμε συζητήσει πέντε προσεγγίσεις, θέλετε να μάθετε ποια είναι η καλύτερη. Είναι δύσκολο να επισημάνουμε τον απόλυτο νικητή σε αυτή τη συζήτηση. Ωστόσο, αυτές οι σκέψεις θα σας βοηθήσουν να πάρετε μια τεκμηριωμένη απόφαση:
- Οι μετρήσεις απόδοσης
- Είτε χρειάζεστε ένα σύστημα σχεδιασμού
- Η ευκολία βελτιστοποίησης του κώδικά σας
Το ενσωματωμένο στυλ είναι κατάλληλο όταν έχετε απλή εφαρμογή με λίγες γραμμές κώδικα. Ωστόσο, όλα τα άλλα? εξωτερικά, SASS, Styled Components και CSS Modules, είναι κατάλληλα για μεγάλες εφαρμογές.
Ποιες είναι οι βέλτιστες πρακτικές για τη διατήρηση του CSS σε μια μεγάλη εφαρμογή React;
- Αποφύγετε το inline styling. Η σύνταξη ενσωματωμένων στυλ CSS για κάθε ετικέτα σε μια μεγάλη εφαρμογή React μπορεί να είναι κουραστική. Αντίθετα, χρησιμοποιήστε ένα εξωτερικό φύλλο στυλ που ταιριάζει στις ανάγκες σας.
- Γράψτε τον κωδικό σας. Linters όπως το Stylelint θα τονίσουν τα σφάλματα στυλ στον κώδικά σας, ώστε να μπορείτε να τα διορθώσετε νωρίς.
- Κάντε τακτικές αναθεωρήσεις κώδικα. Η σύνταξη CSS φαίνεται διασκεδαστική, αλλά οι τακτικές αναθεωρήσεις κώδικα καθιστούν εύκολο τον εντοπισμό σφαλμάτων έγκαιρα.
- Αυτοματοποιήστε τις δοκιμές στα αρχεία CSS σας. Το Enzyme και το Jest είναι φοβερά εργαλεία που μπορείτε να χρησιμοποιήσετε για να αυτοματοποιήσετε τις δοκιμές στον κώδικα CSS σας.
- Διατηρήστε τον κωδικό σας DRY. όταν ασχολείστε με στυλ που χρησιμοποιούνται συνήθως, όπως τα χρώματα και τα περιθώρια, χρησιμοποιήστε μεταβλητές και κλάσεις βοηθητικού προγράμματος όπως συμβαίνει με την αρχή Don’t Repeat Yourself (DRY).
- Χρησιμοποιήστε συμβάσεις ονομασίας όπως το Block Element Modifier. Μια τέτοια προσέγγιση διευκολύνει τη σύνταξη κλάσεων CSS που είναι εύκολο να κατανοηθούν και να επαναχρησιμοποιηθούν.
συμπέρασμα
Παρακάτω είναι μερικοί από τους τρόπους που μπορείτε να χρησιμοποιήσετε για να διαμορφώσετε το στυλ του React. Η επιλογή της στυλιστικής προσέγγισης θα εξαρτηθεί από τις ανάγκες, τις δεξιότητες και το γούστο σας. Μπορείτε ακόμη να συνδυάσετε διάφορες προσεγγίσεις στυλ, όπως ενσωματωμένα και εξωτερικά φύλλα στυλ, στην εφαρμογή React.
Μπορείτε επίσης να εξερευνήσετε μερικά καλύτερα πλαίσια και βιβλιοθήκες CSS για προγραμματιστές front-end.