"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! Show PembukaanSaat 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: 1 html.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] * {0 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {1 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {3 html.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 CSSSingkatnya, "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: 1 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {7 2 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {9 3 21 4 23 5 25 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 27 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 29 html.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;9 30 25 32 33 34 }
Dengan Modul CSS aturan style ini akan diganti ke dalam: 1 37 2 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {9 3 21 4 23 5 25 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 27 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 29 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {4 }
background-image: none !important;2 43 background-image: none !important;4 45 background-image: none !important;6 background-image: none !important;7 background-image: none !important;8 background-image: none !important;9 30 25 32 33 34 }
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 KomponenMenggunakan 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 KomponenDalam 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: 07 2 opacity: 09 3 4 52 5 54 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 56 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 58 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {4 }
0background-image: none !important;2 background-image: none !important;4 }
3background-image: none !important;6 }
5Dengan 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 }
72 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {7 3 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {9 4 21 5 23 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 25 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 27 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {4 29 background-image: none !important;2 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {13 background-image: none !important;4 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {15 background-image: none !important;6 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {17 background-image: none !important;8 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {19 30 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {21 32 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {23 34 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {25 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {26 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {27 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {28 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {29 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {30 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {31 html.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] * {34 html.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.
Kompilasi Modul Dengan WebpackSaat 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.
kita memasang paket tersebut dengan NPM dan menyimpannya ke file background-image: none !important;34 sebagai dependensi pengembangan kita. Konfigurasi WebpackSama 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: 1 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {37 2 3 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {40 4 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {42 5 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {44 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {46 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {48 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {4 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {50 background-image: none !important;2 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {52 background-image: none !important;4 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {54 background-image: none !important;6 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {56 background-image: none !important;8 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {58 30 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {60 32 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {62 34 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {64 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {26 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {66 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {28 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {68 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {30 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {70 html.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] * {72 html.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] * {74 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {75 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {76 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {77 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {78 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {79 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {80 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {81 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {82 html.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] * {84 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {85 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {86 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {87 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {60 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {89 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {62 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {91 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {92 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {93 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {70 html.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] * {96 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {97 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {76 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {99 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {78 201 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {80 203 204 205 206 207 208 209 }
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. 1 212 2 214 3 216 4 218 5 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 221 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 223 Kemudian jalankan perintah background-image: none !important;43, seperti berikut: 1 225 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. KomposisiPre-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: 1 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {7 2 229 3 231 4 233 5 235 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 25 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {9 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {4 21 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 VueDalam 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. 1 245 2 247 3 249 4 5 252 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {0 254 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {2 256 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {4 }
background-image: none !important;2 260 background-image: none !important;4 background-image: none !important;6 263 background-image: none !important;8 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {7 30 235 32 231 34 233 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {26 235 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {28 25 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {30 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {9 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {32 21 html.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] * {75 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {77 284 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {79 286 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {81 288 html.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] * {85 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {87 293 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {89 295 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {91 background-image: none !important;7 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {93 background-image: none !important;9 html.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] * {97 html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {99 background-image: none !important;3 201 background-image: none !important;5 203 background-image: none !important;7 205 background-image: none !important;9 207 25 209 33 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. PenutupUntuk 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.
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. Berapa metode penggunaan CSS?Ada tiga cara dalam menggunakan CSS pada file HTML.. Inline. Metode ini digunakan dengan cara memasukkan file css ke dalam tag HTML secara langsung.. Internal. Metode ini menggunakan CSS dengan tag <style> pada file html. ... . External. Metode ini digunakan dengan cara memisahkan file html dan juga file css.. Bagaimana cara kerja CSS?Cara kerja CSS
CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs.
Bagaimana cara menggunakan Memanggil CSS dalam HTML?Untuk memasukkan CSS ke dalam file HTML kita akan memakai tag <link rel="stylesheet" href="path_ke_css_file" /> . Jika sedang membuat project web yang besar, sebaiknya menggunakan mode external CSS karena akan jauh lebih mudah untuk maintenance dan juga efisiensi size CSS.
Bagaimana cara menulis CSS?Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal.. Inline – menuliskan perintah CSS langsung pada elemen HTML.. Internal – menuliskan perintah CSS di bagian <head> HTML.. Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal). |
Cara menggunakan css used
Pos Terkait
Copyright © 2024 ketajaman Inc.
