CSS Selamat Masa Depan: Memudahkan Gaya React dengan Komponen Gaya

Menulis CSS yang selamat untuk masa depan adalah satu cabaran. Apabila anda perlu menulis dan mengekalkan beribu -ribu baris kod CSS, nama kelas yang bertentangan, isu kekhususan, dan banyak lagi akan timbul. Untuk menyelesaikan masalah di atas, komponen gaya muncul.

Nota: Komponen gaya direka khusus untuk bertindak balas, jadi anda mesti menggunakan React untuk menggunakan komponen gaya.

Keuntungan utama:

Ketahui asas -asas CSS dalam JS dan bagaimana komponen gaya memudahkan proses dengan membenarkan CSS ditulis secara langsung dalam JavaScript, mengelakkan masalah biasa seperti konflik nama kelas dan isu kekhususan.
Ketahui cara menyediakan menggunakan komponen gaya dalam projek React, termasuk pemasangan yang diperlukan dan langkah konfigurasi awal.
meneroka manfaat komponen gaya, seperti suntikan automatik CSS kritikal, pakej CSS yang lebih kecil, dan tema mudah untuk aplikasi React.
Cari aplikasi praktikal komponen gaya dengan mewujudkan tema dinamik dan menguruskan gaya global dalam aplikasi React.
Ketahui manfaat penyelenggaraan komponen gaya, termasuk pengurusan kod yang lebih mudah dan keupayaan untuk menghapuskan CSS yang tidak digunakan dengan cekap.
Ikuti panduan komprehensif untuk refactoring antara muka unsplash menggunakan komponen gaya, yang mengandungi contoh dan arahan kod terperinci untuk setiap langkah.

Prasyarat:

pautan pemasangan benang .

node 12.6.0
npx 6.4.1
benang 1.17.3

Evolusi CSS:

. !important

Walaupun SASS mungkin dianggap lebih baik daripada CSS, ia boleh menyebabkan lebih banyak kemudaratan daripada faedah tanpa beberapa sistem.

kemudian, bem muncul. BEM adalah kaedah yang membolehkan kita mengurangkan masalah kekhususan dengan menulis nama kelas yang unik. BEM menyelesaikan masalah kekhususan, tetapi ia menjadikan HTML lebih verbose. Nama kelas boleh menjadi tidak lama lagi, dan apabila anda mempunyai aplikasi web yang besar, sukar untuk menghasilkan nama kelas yang unik.

Selepas, modul CSS dilahirkan. Modul CSS menyelesaikan masalah kekhususan dengan menyelesaikan masalah yang tidak dapat diselesaikan oleh SASS atau BEM -masalah nama kelas yang unik -dengan alat dan bukannya bergantung pada nama yang disediakan oleh pemaju. Modul CSS mendapat populariti yang luar biasa dalam ekosistem React, membuka jalan untuk projek seperti glamor.

Satu -satunya masalah dengan semua penyelesaian baru ini ialah pemaju perlu mempelajari sintaks baru. Bagaimana jika kita boleh menulis CSS dengan tepat cara kami menulis CSS dalam fail .css di JS? Jadi komponen gaya dilahirkan.

Komponen gaya menggunakan literals templat, yang merupakan ciri ES6. Templat literal adalah rentetan literal yang membolehkan ekspresi embedding. Mereka membenarkan penggunaan fungsi interpolasi rentetan dan rentetan.

Titik jualan utama komponen gaya adalah bahawa ia membolehkan kita menulis CSS yang tepat di JS.

Komponen gaya mempunyai banyak kelebihan. Berikut adalah beberapa kebaikan dan keburukan komponen gaya.

pro

Menggunakan komponen gaya mempunyai banyak kelebihan.

1. suntikan css kunci ke dom

   Komponen gaya menyuntik hanya CSS kritikal ke dalam halaman. Ini bermakna pengguna hanya memuat turun CSS yang diperlukan untuk halaman tertentu, dan bukan apa -apa lagi. Ini menjadikan laman web memuat lebih cepat.

2. Pakej CSS untuk setiap halaman lebih kecil

   Kerana ia menyuntik hanya gaya yang digunakan dalam komponen pada halaman, saiz pakej lebih kecil. Anda hanya perlu memuat CSS yang diperlukan dan bukannya terlalu banyak stylesheets, program normal, reka bentuk responsif, dan banyak lagi.

3. Prefix Pembekal Automatik

   Komponen gaya membolehkan anda menulis CSS yang secara automatik menambah awalan vendor berdasarkan piawaian terkini.

4. Padam CSS yang tidak digunakan
   Menggunakan komponen gaya, lebih mudah untuk menghapuskan CSS yang tidak digunakan atau kod tidak sah kerana gaya berada di lokasi yang sama dengan komponen. Ini juga memberi kesan kepada mengurangkan saiz pakej.

5. Tema mudah
   Komponen gaya membuat tema untuk aplikasi React sangat mudah. Anda juga boleh mempunyai banyak tema dalam aplikasi anda dan anda masih boleh mengekalkannya dengan mudah.

6. Kurangkan bilangan permintaan HTTP
   Bilangan permintaan HTTP sangat dikurangkan kerana tidak ada fail CSS untuk menetapkan semula, menormalkan, dan reka bentuk responsif.

7. nama kelas yang unik
   Komponen gaya menghasilkan nama kelas yang unik setiap kali langkah membina. Ini mengelakkan penamaan konflik atau isu kekhususan. Konflik global tidak lagi diperlukan dan terpaksa menggunakan tag

   untuk menyelesaikannya. !important

8. Mudah untuk mengekalkan

   Komponen gaya membolehkan anda meletakkan gaya bersama -sama dengan komponen. Ini menjadikan penyelenggaraan mudah. Anda boleh mengetahui dengan tepat gaya mana yang mempengaruhi komponen anda, tidak seperti fail CSS yang besar.

Kekurangan

Sudah tentu, tiada apa yang sempurna. Mari kita lihat beberapa kekurangan yang berkaitan dengan komponen gaya.

1. tidak dapat melihat gaya cache

   Biasanya, apabila pengguna melawat laman web, penyemak imbas web cache fail .css supaya fail .css yang sama tidak perlu dimuat turun lagi apabila anda mengaksesnya. Tetapi untuk komponen gaya, gaya dimuatkan ke dalam DOM menggunakan tag <style></style>. Oleh itu, mereka tidak boleh di -cache dan gaya mesti diminta setiap kali pengguna melawat laman web anda.

2. React Only

   Komponen gaya direka untuk bertindak balas. Oleh itu, ia adalah reaksi khusus. Jika anda menggunakan rangka kerja lain, anda tidak boleh menggunakan komponen gaya.

   Walau bagaimanapun, terdapat alternatif yang sangat mirip dengan komponen gaya, yang dipanggil Emosi, yang bebas kerangka.

Operasi praktikal:

$ npx create-react-app unsplash-styled-components

dan pasangkan pakej berikut yang diperlukan untuk tutorial ini, iaitu gaya-komponen dan react-medium-image-zoom: unsplash-styled-components

$ cd unsplash-styled-components
$ yarn add styled-components react-medium-image-zoom

membolehkan kami menulis CSS sebenar dalam JS, manakala pakej styled-components membolehkan kami mengezum dalam imej dalam gaya sederhana. react-medium-image-zoom

seperti src/, App.css, App.test.js, dan index.css. logo.svg

dari index.js kerana ia tidak lagi diperlukan. import './index.css';

dengan yang berikut: App.js

import React from 'react'

const App = () => <h1>Hello React</h1>

export default App

di terminal. yarn start

seperti yang ditunjukkan di bawah: Hello React

Komponen gaya menggunakan literasi templat tag kepada komponen gaya.

import React from 'react'
import styled from 'styled-components'

const Header = styled.h1`
    background-color: pink;
    color: white;
`

const App = () => <Header>Hello React</Header>
export default App