"Modul CSS" tidak ada hubungannya dengan W3C, bukan bagian dari proses pembuatan yang disarankan. Tetapi akan mengkompilasi proyek Anda, mengganti nama selector dan class sehingga menjadi unik, disesuaikan dengan komponen individual. Styles terkunci ke dalam komponen-komponen dan tidak dapat digunakan di tempat lain kecuali jika Anda secara khusus mengatakannya!
Pembukaan
Saat ini kita sudah terbiasa dengan gagasan teknologi web sebagai kekuatan pendorong di samping aplikasi; aplikasi web, mobile, dan desktop. Tapi tidak seperti situs statis sederhana, aplikasinya biasanya lebih dinamis, kompleks, dan seringkali terdiri dari komponen bahkan melebihi apa yang ditawarkan Bootstrap atau ZURB Foundation. Sebagai aplikasi yang tumbuh dalam kompleksitas, pengelolaan CSS dapat menjadi tugas yang menantang.
Seiring waktu, banyak sekali strategi yang telah dikembangkan, seperti OOCSS, ITCSS, BEM, Atomic CSS, dll. untuk menjaga agar CSS tetap teratur, dapat digunakan kembali, dan (yang terpenting) terukur. Strategi ini mengharuskan Anda dan semua orang dalam tim Anda mengikuti konvensi dengan giat.
Namun, cepat atau lambat, kompleksitas akan meningkat kembali dan Anda akan menemukan aturan styles seperti berikut:
1html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2 background-image: none !important; 3 mask-image: none !important; 4 opacity: 0 5} html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 0html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 1html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 3html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 4}
Masalah dengan CSS pada banyak situs web dan aplikasi berskala besar adalah sangat sulit untuk menjaga kekhususannya agar tetap rendah sehingga, pada beberapa titik, menambahkan background-image: none !important; 19 tidak dapat dihindari. Dan refactoring CSS pada basis kode yang besar merupakan hal rumit karena menghilangkan style dapat merusak komponen lainnya.
Dalam tutorial ini, kita akan melihat ke dalam "Modul CSS" dan bagaimana hal itu dapat membantu kita meminimalkan masalah CSS yang terkenal ini.
Catatan: lihat repositori di Github untuk contoh kode pendukung.
Menggunakan Modul CSS
Singkatnya, "Modul CSS" adalah alat yang mengganti nama class dan ID CSS menjadi selector yang unik, memungkinkan untuk mengisolasi aturan style secara lokal ke elemen atau komponen yang ditetapkan. Dengan asumsi kita memiliki sebuah tombol, kita mungkin biasanya menuliskan aturan style seperti berikut ini:
1html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 72html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 9321423525html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 027html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 229html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 4} background-image: none !important; 2 background-image: none !important; 3 background-image: none !important; 4 background-image: none !important; 5 background-image: none !important; 6 background-image: none !important; 7 background-image: none !important; 8 background-image: none !important; 93025323334}
Dengan Modul CSS aturan style ini akan diganti ke dalam:
1372html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 9321423525html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 027html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 229html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 4} background-image: none !important; 243 background-image: none !important; 445 background-image: none !important; 6 background-image: none !important; 7 background-image: none !important; 8 background-image: none !important; 93025323334}
Jika Anda mengintip situs besar seperti Facebook, Instagram, atau Airbnb melalui DevTools browser Anda, Anda akan mendapati bahwa class CSS dan ID diberi nama hanya dengan pola semacam ini. Berikut adalah contoh dari halaman awal Airbnb:
Banyak Komponen
Menggunakan Modul CSS tidak akan masuk akal jika kita hanya memiliki satu komponen, jadi mari kita memperluas contoh kita ke tiga komponen dan melihat bagaimana cara mengkonfigurasi proyek untuk menerapkan Modul CSS.
Membuat Komponen
Dalam contoh kedua ini, kita akan membangun tiga komponen; sebuah tombol dengan tiga styles yang berbeda. kita selanjutnya menyebutnya "primary buton", "outline button" (juga dikenal sebagai "ghost button"), dan "clear button". kita akan meletakkan tombol ini pada direktori terpisah. Setiap direktori akan berisi background-image: none !important; 20 dan background-image: none !important; 21.
Di dalam background-image: none !important; 21, kita membuat elemen dan menetapkan class ke elemen, sebagai berikut:
1 opacity: 0 72 opacity: 0 93452554html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 056html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 258html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 4} 0 background-image: none !important; 2 background-image: none !important; 4} 3 background-image: none !important; 6} 5
Dengan menggunakan background-image: none !important; 23 directive baru di ES6, kita mengimpor stylesheet dan membaca class dan ID sebagai Objek JavaScript. Kemudian kita buat elemen dan tambahkan class yang bernama background-image: none !important; 24 menggunakan Templating JavaScript asli yang juga diperkenalkan di ES6. Terakhir, kita mengekspor elemen sehingga elemen juga dapat diimpor dan digunakan kembali dalam file JavaScript lainnya.
Pada saat tulisan ini dibuat, tidak semua browser menerapkan fitur dan sintaks JavaScript terbaru dari spesifikasi ES6. Oleh karena itu, kita memerlukan Babel untuk mengubah cuplikan tersebut menjadi sintaks JavaScript yang kompatibel di kebanyakan browser.
Stylesheet Kita, background-image: none !important; 20, adalah CSS biasa. Ini berisi sejumlah selector untuk memberi style pada elemen tombol.
1} 72html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 73html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 9421523html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 025html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 227html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 429 background-image: none !important; 2html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 13 background-image: none !important; 4html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 15 background-image: none !important; 6html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 17 background-image: none !important; 8html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 1930html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2132html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2334html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 25html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 26html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 27html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 28html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 29html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 30html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 31html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 32} html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 34html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 35
Salah satu keuntungan menggunakan Modul CSS adalah kita tidak perlu khawatir dengan konvensi penamaan. Anda masih bisa menggunakan metodologi CSS favorit Anda seperti BEM atau OOCSS, tapi tidak ada yang dipaksakan; Anda dapat menulis aturan style dengan cara yang paling praktis untuk komponen karena nama class pada akhirnya akan menjadi namespaced.
Dalam contoh ini, kita memberi nama semua komponen tombol background-image: none !important;
24 dari pada background-image: none !important;
27 atau background-image: none !important;
28.
Bekerja dengan CSS dalam bayangan DOM Saya masih memiliki kebiasaan lama menggunakan notasi BEM meskipun saya tidak *perlu*. Gaya enkapsulasi FTW!
- Razvan Caliman (@razvancaliman) 31 Juli 2017
Kompilasi Modul Dengan Webpack
Saat kita memuat background-image: none !important; 21 pada halaman HTML, tidak akan ada yang muncul di browser. Dalam kasus ini, kita harus mengkompilasi kode agar berfungsi. kita perlu memasang Babel, Babel Preset untuk ES2015 (ES6) dan Webpack bersama dengan apa yang disebut "loaders (pemuat)" unutk mengizinkan Webpack memproses source file kita.
- babel-loader: untuk memuat file background-image: none !important; 30 dan mengubah source-code dengan core Modul Babel.
- css-loader: untuk memuat file-file background-image: none !important; 31
- style-loader: untuk menyuntikkan (inject) style internal yang diambil dari background-image: none !important; 32 ke halaman HTML kita dengan menggunakan background-image: none !important; 33.
kita memasang paket tersebut dengan NPM dan menyimpannya ke file background-image: none !important; 34 sebagai dependensi pengembangan kita.
Konfigurasi Webpack
Sama halnya dengan Grunt dengan background-image: none !important; 35 atau Gulp dengan background-image: none !important; 36, kita sekarang perlu menyiapkan Webpack menggunakan file bernama background-image: none !important; 37. Berikut adalah konfigurasi Webpack lengkap dalam proyek kita:
1html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 3723html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 404html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 425html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 44html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 0html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 46html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 48html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 4html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 50 background-image: none !important; 2html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 52 background-image: none !important; 4html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 54 background-image: none !important; 6html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 56 background-image: none !important; 8html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 5830html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 6032html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 6234html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 64html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 26html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 66html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 28html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 68html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 30html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 70html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 32html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 72html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 34html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 74html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 75html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 76html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 77html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 78html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 79html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 80html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 81html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 82html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 83html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 84html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 85html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 86html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 87html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 60html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 89html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 62html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 91html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 92html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 93html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 70html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 95html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 96html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 97html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 76html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 99html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 78201html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 80203204205206207208209}
Konfigurasi memberitahu Webpack untuk melakukan kompilasi direkotori JavaScript utama, main.js, ke background-image: none !important; 38. kita juga telah mengaktifkan opsi background-image: none !important; 39 di background-image: none !important; 32 serta mengatur pola penamaan class dan ID menjadi background-image: none !important; 41 . Kita menggunakan background-image: none !important; 42 untuk mengkompilasi file JavaScript ES6 kita.
Ketika sudah memiliki dependensi yang terpasang dan konfigurasi sudah diatur, kemudian mengimpor ketiga tombol di file main.js.
12122214321642185html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 0221html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2223
Kemudian jalankan perintah background-image: none !important; 43, seperti berikut:
1225
Ketika kita memuat background-image: none !important; 44 pada browser, kita harus melihat tombol ditambahkan dengan class bernama mengikuti pola yang diatur di dalam background-image: none !important; 32. Kita juga dapat menemukan style ditambahkan ke halaman dengan elemen background-image: none !important; 46.
Komposisi
Pre-processor CSS seperti LESS dan Sass mengizinkan untuk menggunakan kembali style dengan memperpanjang class lain atau ID dari stylesheet lain. Dengan Modul CSS, kita dapat menggunakan petunjuk background-image: none !important; 47 untuk melakukan hal yang sama. Dalam contoh berikut, saya sudah meletakkan aturan style umum yang dibagikan pada tiga tombol dalam file lain dan mengimpor class dari file baru, seperti berikut:
1html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 72229323142335235html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 025html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 9html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 421 background-image: none !important; 2}
Ketika kode dikompilasi kembali dan dimuat di dalam browser, kita dapat menemukan tombol di render dengan dua class. Sekarang ada empat elemen background-image: none !important; 48 disuntik (inject) ke dalam halaman yang memuat class background-image: none !important; 49 yang menahan aturan style umum dari elemen kita.
Menggunakan Modul CSS di Vue
Dalam proyek yang sebenarnya, kita cenderung tidak memanfaatkan Modul CSS menggunakan JavaScript dasar. Kita akan lebih memilih menggunakan framework JavaScript seperti Vue. Untungnya, Modul CSS sudah terintegrasi dengan Vue melalui background-image: none !important; 50; Webpack-loader yang akan mengkompilasi background-image: none !important; 51. Di bawah ini adalah contoh bagaimana kita akan memberi port pada primary button ke dalam komponen background-image: none !important; 51.
12452247324945252html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 0254html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2256html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 4} background-image: none !important; 2260 background-image: none !important; 4 background-image: none !important; 6263 background-image: none !important; 8html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 7302353223134233html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 26235html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 2825html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 30html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 9html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 3221html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 34} html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 75html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 77284html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 79286html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 81288html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 83} html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 85html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 87293html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 89295html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 91 background-image: none !important; 7html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 93 background-image: none !important; 9html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 95} html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 97html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * { 99 background-image: none !important; 3201 background-image: none !important; 5203 background-image: none !important; 7205 background-image: none !important; 92072520933 background-image: none !important; 15} background-image: none !important; 17 background-image: none !important; 18
Di dalam Vue, kita tambahkan atribut background-image: none !important; 53 ke dalam elemen background-image: none !important; 48, seperti pada keterangan di atas, untuk membolehkan Modul CSS. Ketika kita kompilasi kode ini kita akan mendapatkan cukup banyak hasil yang sama.
Penutup
Untuk beberapa dari Anda, ini akan menjadi sesuatu yang benar-benar baru. Sangat mudah dimengerti walaupun konsep Modul CSS sedikit rumit pada awalnya. Jadi mari merekap apa yang kita pelajari tentang Modul CSS di dalam artikel ini.
- "Modul CSS" mengizinkan kita untuk mengenkapsulasi aturan style dengan mengganti namanya atau background-image: none !important; 55 nama class, meminimalisasi bentrok pada spesifisitas pemilih saat basis kode tumbuh.
- Ini juga memungkinkan kita untuk menulis nama class dengan lebih nyaman daripada tetap berpegang pada satu metodologi tertentu.
- Terakhir, karena aturan style digabungkan ke masing-masing komponen, style juga akan dihapus saat kita tidak lagi menggunakan komponennya.
Pada artikel ini, kita hampir tidak menggores permukaan Modul CSS dan alat pengembangan web lainnya seperti Babel, Webpack, dan Vue. Jadi, disini saya telah mengumpulkan beberapa referensi untuk melihat tools itu lebih jauh.