Pengenalan 5-minit untuk Komponen Bergaya

CSS adalah pelik. Anda boleh mempelajari asasnya dalam masa 15 minit. Tetapi ia boleh mengambil masa beberapa tahun sebelum anda mengetahui cara yang baik untuk mengatur gaya anda.

Sebahagian daripada ini hanya disebabkan oleh sifat bahasa itu sendiri. Di luar kotak, CSS agak terhad, tanpa pembolehubah, gelung, atau fungsi. Pada masa yang sama, ia agak permisif kerana anda boleh gaya elemen, kelas, ID, atau gabungan mana-mana.

Lembaran Gaya Chaotic

Seperti yang mungkin anda alami untuk diri sendiri, ini sering merupakan resipi untuk huru-hara. Dan sementara preprocessors seperti SASS dan LESS menambah banyak ciri berguna, mereka tidak benar-benar berbuat banyak untuk menghentikan anarki CSS.

Tugas organisasi itu diserahkan kepada metodologi seperti BEM, yang - walaupun berguna - adalah sepenuhnya pilihan, dan tidak boleh dikuatkuasakan di peringkat bahasa atau perkakas.

Gelombang Baru CSS

Fast forward beberapa tahun, dan gelombang baru alat berasaskan JavaScript cuba menyelesaikan masalah ini di akarnya, dengan mengubah cara anda menulis CSS.

Komponen Bergaya adalah salah satu daripada perpustakaan-perpustakaan ini, dan ia dengan cepat menarik banyak perhatian kerana campuran inovasi dan kebiasaannya. Oleh itu, jika anda menggunakan React (dan jika tidak, periksa pelan kajian JavaScript saya dan intro saya untuk React), ia pasti bernilai melihat alternatif CSS baru ini.

Saya baru-baru menggunakannya untuk mengubah reka bentuk laman web peribadi saya, dan hari ini saya ingin berkongsi beberapa perkara yang saya pelajari dalam proses itu.

Komponen, Bergaya

Perkara utama yang perlu anda fahami tentang Komponen Bergaya adalah bahawa namanya patut diambil secara literal. Anda tidak lagi menyusun unsur atau komponen HTML berdasarkan unsur kelas atau HTML mereka:

Hello World

h1.title {
  saiz fon: 1.5em;
  warna: ungu;
}

Sebaliknya, anda menentukan komponen gaya yang mempunyai gaya tersendiri mereka sendiri. Kemudian anda menggunakannya secara bebas di seluruh pangkalan data anda:

import gaya daripada 'komponen-gaya';
const Title = styled.h1`
  saiz fon: 1.5em;
  warna: ungu;
`;
 Hello World 

Ini mungkin kelihatan seperti perbezaan kecil, dan sebenarnya kedua-dua sintaks ini sangat serupa. Tetapi perbezaan utama mereka ialah gaya sekarang menjadi sebahagian daripada komponen mereka.

Dengan kata lain, kami menyingkirkan kelas CSS sebagai langkah perantara antara komponen dan gayanya.

Seperti yang dicipta bersama-komponen komponen Max Stoiber berkata:

"Idea asas komponen-komponen gaya adalah untuk menguatkuasakan amalan terbaik dengan membuang pemetaan antara gaya dan komponen."

Memunggah Kerumitan

Ini seolah-olah menjadi kontra-intuitif pada mulanya, kerana keseluruhan titik menggunakan CSS bukan secara langsung menggayakan elemen HTML (ingat tag ?) Adalah untuk menanggalkan gaya dan markup dengan memperkenalkan lapisan kelas perantara ini.

Tetapi decoupling itu juga mewujudkan banyak kerumitan, dan ada hujah yang dibuat yang dibandingkan dengan CSS, bahasa pengaturcaraan "sebenar" seperti JavaScript adalah jauh lebih baik untuk mengendalikan kerumitan itu.

Props Over Classes

Selaras dengan falsafah tanpa kelas ini, komponen-gaya yang digunakan menggunakan prop di atas kelas apabila ia menyesuaikan perilaku komponen. Jadi bukannya:

Hello World // akan menjadi biru

h1.title {
  saiz fon: 1.5em;
  warna: ungu;
  
  & .primary {
    warna: biru;
  }
}

Anda akan menulis:

const Title = styled.h1`
  saiz fon: 1.5em;
  warna: $ {props => props.primary? 'biru': 'ungu'};
`;
 Hello World  // akan berwarna biru

Seperti yang anda lihat, komponen-komponen yang bergaya membolehkan anda membersihkan komponen React anda dengan mengekalkan semua butiran pelaksanaan CSS dan HTML yang berkaitan dengannya.

Yang berkata, CSS komponen gaya masih CSS. Jadi perkara-perkara seperti ini juga benar-benar sah (walaupun agak tidak idiomatik) kod:

const Title = styled.h1`
  saiz fon: 1.5em;
  warna: ungu;
  
  & .primary {
    warna: biru;
  }
`;
 Hello World  // akan berwarna biru

Ini adalah salah satu ciri yang membuat komponen-komponen yang sangat mudah untuk dimasukkan ke dalam: apabila ia ragu, anda boleh kembali kepada apa yang anda tahu!

Kaunter

Ia juga penting untuk menyebutkan bahawa komponen-komponen gaya masih merupakan projek muda, dan beberapa ciri belum disokong sepenuhnya. Sebagai contoh, jika anda ingin gaya komponen kanak-kanak dari ibu bapa, anda perlu bergantung pada menggunakan kelas CSS buat masa ini (sekurang-kurangnya sehingga styles-components v2 keluar).

Juga tidak ada cara "rasmi" untuk pra-menyebabkan CSS anda pada pelayan lagi, walaupun sudah tentu mungkin dengan menyuntikkan gaya secara manual.

Dan hakikat bahawa komponen-komponen yang tersusun menghasilkan nama kelas rawaknya sendiri boleh membuat sukar untuk menggunakan alat dev pelayar anda untuk mencari tahu di mana gaya anda pada awalnya ditakrifkan.

Tetapi apa yang sangat menggalakkan ialah pasukan inti komponen yang berpengalaman menyedari semua isu ini, dan sukar bekerja untuk menetapkannya satu demi satu. Versi 2 akan datang tidak lama lagi, dan saya benar-benar menantikannya!

Ketahui lebih lanjut

Matlamat saya di sini adalah tidak menerangkan dengan terperinci bagaimana gaya-komponen berfungsi, tetapi lebih banyak untuk memberi anda gambaran kecil supaya anda boleh membuat keputusan untuk diri sendiri jika ia layak diperiksa.

Jika saya berjaya membuat anda penasaran, di sini beberapa tempat di mana anda boleh mengetahui lebih lanjut mengenai komponen-komponen yang bergaya:

  • Max Stoiber baru-baru ini menulis artikel mengenai sebab komponen-komponen gaya untuk Majalah Smashing.
  • Repo komponen-komponen itu sendiri mempunyai dokumentasi yang luas.
  • Artikel ini oleh Jamie Dixon menggariskan beberapa faedah beralih kepada komponen-gaya.
  • Jika anda ingin mengetahui lebih lanjut mengenai bagaimana perpustakaan dilaksanakan, lihat artikel ini oleh Max.

Dan jika anda mahu pergi lebih jauh, anda juga boleh menyemak Glamor, mengambil yang berbeza pada CSS gelombang baru!

Masa promosi diri: kami mencari penyumbang sumber terbuka untuk membantu Nova, cara paling mudah untuk membuat aplikasi React & GraphQL lengkap dengan borang, pemuatan data, dan akaun pengguna. Kami tidak menggunakan komponen-komponen gaya lagi, tetapi anda boleh menjadi orang pertama yang melaksanakannya!