Fitur apa pun di tangan "bengkok" menjadi buruk. Pengimpor tidak terkecuali. Hal yang buruk bukanlah apa yang dia tahu, tetapi cara dia digunakan.
Cara kerjanya! Penting
Dalam CSS, kami menggunakan mekanisme spesifisitas untuk memprioritaskan gaya. Kami menulis kaskade atau penyeleksi kompleks, menambah bobot pemilih, sehingga menunjukkan kepada browser prioritas beberapa gaya di atas yang lain.
Sebagai contoh:
.content .title { color: red; } .title { color: blue; }
Dalam hal ini, terlepas dari kenyataan bahwa warna biru diterapkan pada tajuk setelah merah, sebagai hasilnya kita masih akan mendapatkan tajuk merah. Karena pemilih pertama lebih spesifik (jika tiba-tiba Anda tidak terbiasa dengan ini, jangan membaca lebih lanjut - itu hanya akan semakin buruk, lebih baik di
sini dan pelajari kekhususan).
Jadi, dengan menggunakan contoh yang sama, tetapi dengan! Penting, kami tiba-tiba mengetahui bahwa dia tidak peduli dengan kekhususan Anda.
.content .title { color: red; } .title { color: blue !important; }
Judulnya akan biru! Properti ini melanggar aliran alami aturan yang kami tulis dan memberikan gaya prioritas yang lebih rendah prioritas tertinggi.
Nah, bagaimana cara "meludah" ... Tidak juga, dan meludah. Mari tambahkan importir lain.
.content .title { color: red !important; } .title { color: blue !important; }
Dan tajuk merah lagi. Karena kita memiliki dua! Konflik penting, dan konflik ini diselesaikan dengan membandingkan bobot pemilih.
Seorang importir buruk ketika itu:
.title { color: red; }
“Hmm, aku menulis merah, mengapa tajukanku tidak merah? Dan jika demikian? " .title { color: red !important; }
“Hebat! Merah! ” Tetapi apakah ini benar-benar bagus?
Pendekatan ini buruk, setidaknya karena Anda mendefinisikan ulang gaya tanpa memahami mengapa mereka tidak diterapkan tanpa importir. Kemungkinan besar, bobot pemilih yang Anda gunakan ternyata tidak cukup dan, dengan menulis pemilih yang sedikit lebih akurat dan “berat”, Anda akan menyelesaikan masalah Anda, dan Anda akan dengan keras mendefinisikan kembali gaya, dan ada baiknya jika Anda tahu dan memeriksa semua tempat di mana kelas ini digunakan, tetapi jika tidak, maka Anda menundukkan elemen di satu tempat dan mungkin pecah di tempat lain.
Alat untuk perbaikan terbaru
Sangat sering, ketika saya mengajukan pertanyaan kepada seseorang tentang importir, saya mendengar jawaban dengan gaya:
"Saya menggunakan yang penting ketika saya harus segera memperbaiki masalah dan tidak punya waktu untuk memahami kode yang tidak saya tulis dan yang ditulis dengan sangat buruk .
"Ya, tetapi hanya tugas yang selalu "mendesak", tugas seperti itu, sebagai suatu peraturan, tidak akan ada yang selesai, jadi tinggalkan saja. Anda sendiri belum memperhatikan bagaimana Anda membuat "kode alien buruk" lebih buruk.
Apa artinya puasa? Apakah begitu sulit dan lama untuk menemukan bobot pemilih yang diperlukan untuk redefinisi? Kami sangat aktif menggunakan DevTools dalam pengembangan, dan kami memiliki jawaban di sana untuk menyelesaikan masalah ini.
Kami memeriksa elemen yang ingin kami ubah. Warna saat ini adalah hitam. Kami melihat pemilih apa yang ditugaskan untuk warna ini?
Kami menggunakan pemilih yang sama untuk menetapkan warna baru atau untuk menambah berat, dan intinya ada di topi, tidak peduli betapa sulitnya pemilih ini.
Apakah ini panjang? Sepertinya bagi saya ini sedikit berbeda dengan menulis! Penting, tetapi jauh lebih benar dan lebih aman.
Solusi pihak ketiga dan kode orang lain
Jawaban kedua yang paling populer untuk pertanyaan tentang perlunya menggunakan importir:
"Saya menggunakan! Penting ketika mendefinisikan ulang gaya perpustakaan dan plugin pihak ketiga atau CMS-ok .
"Jawaban ini sedikit lebih dekat dengan kebenaran, tetapi hanya jika dirumuskan sedikit lebih akurat. Dalam formulir inilah yang salah, karena gaya file pihak ketiga dapat ditimpa dengan cara yang sama seperti Anda, hanya menambahkannya setelah menghubungkan gaya orang lain dan meningkatkan bobot pemilih.
Namun, dalam beberapa kasus jawaban ini "masuk" ke pertanyaan. Sebagai contoh, jika Anda menghubungkan slider ke halaman Anda, yang diimplementasikan sehingga ketika Anda mengganti slide, JavaScript menimpa nilai-nilai beberapa properti di CSS.
Dan untuk beberapa alasan Anda perlu mengganti properti ini, mengabaikan perubahan pada plugin itu sendiri.
JS hanya dapat menetapkan kembali nilai properti menggunakan gaya sebaris. Faktanya, setiap properti yang diubah untuk suatu elemen yang menggunakan JavaScript hanya akan ditulis ke atribut style. Dari sudut pandang mekanisme spesifisitas, gaya-gaya ini lebih diprioritaskan, dan tidak peduli bagaimana Anda meningkatkan bobot pemilih, Anda tidak akan dapat menimpanya.
Inilah tepatnya kasus
pertama di mana kita tidak bisa melakukan tanpa yang penting.
Jika kita perlu mendefinisikan ulang gaya sebaris, yang penting hanya akan membantu kita.
Prioritas gaya dengan importir lebih tinggi daripada prioritas gaya sebaris, dan jika karena alasan tertentu Anda perlu menulis ulang gaya sebaris, maka Anda tidak punya pilihan selain menggunakan! Penting.
Penting untuk kebaikan
Mari kita pertimbangkan satu kasus lagi, yang kadang-kadang digunakan dalam kode berbagai pustaka dan plugin.
Jika Anda membuka kode sumber CSS dari perpustakaan Bootstrap, Anda akan melihat bahwa di sana pengembang perpustakaan sangat sering menggunakan penggunaan importir. Mungkin mereka juga hanya perlu memperbaiki dengan cepat, dan mereka melakukannya (sarkasme), tetapi secara umum ada penjelasan yang lebih cocok. Dalam hal ini, kata penting digunakan "untuk kebaikan." Dengan cara ini, pengembang Bootstrap "melindungi" kode mereka.
Faktanya adalah bahwa dengan menghubungkan pustaka ini ke situs Anda, Anda dapat mendefinisikan ulang gaya aslinya. Dengan demikian, pengembang direasuransikan, dan melanggar perilaku kode mereka akan lebih sulit jika Anda tidak tahu bagaimana kekhususan bekerja. Tetapi jika Anda memahami bagaimana mekanisme kekhususan dalam CSS bekerja, Anda dapat mendefinisikan kembali importir mereka dengan menulis gaya Anda dengan importir juga, tetapi dengan pemilih "lebih berat".
Jadi, kita sampai pada kasus
kedua ketika tidak mungkin tanpa importir.
Jika Anda perlu menimpa penting (milik Anda atau dari perpustakaan pihak ketiga), maka hanya! Penting akan membantu Anda.
Itulah sebabnya tidak benar untuk mengatakan: "Saya menggunakan importir ketika saya perlu mendefinisikan ulang gaya perpustakaan pihak ketiga," akan lebih tepat untuk mengatakan: "Saya menggunakan importir ketika saya perlu mendefinisikan kembali gaya inline atau yang lain! Penting". Dan tidak masalah dari mana gaya ini berasal: dari file Anda atau dari pihak ketiga.
Pembantu
Pada paragraf sebelumnya, pada kenyataannya, semua kasus dijelaskan ketika penggunaan importir akan normal dan benar. Ini adalah kasus di mana penggunaan importir tidak terhindarkan. Tetapi masih ada kasus di mana penggunaan importir akan diizinkan, meskipun mungkin sudah tidak sepenuhnya tepat.
Terkadang kita membutuhkan kelas universal bantu yang kita gunakan dalam kode kita dengan tujuan menggunakan kembali kode dan penyederhanaan.
Misalnya, kami membuat beberapa jenis kelas .warning, yang akan kami terapkan ke berbagai elemen pada halaman, dengan demikian menunjukkan pentingnya mereka.
.warning { color: red; }
Dan kami ingin bahwa dengan menerapkan kelas ini ke elemen apa pun, kami pasti akan membuat teks dalam elemen ini merah. Tetapi suatu elemen dapat memiliki gaya dengan prioritas lebih tinggi direkam menggunakan pemilih yang lebih akurat, dan warna kita dari kelas .warning akan menjadi ground. Dalam hal ini, dengan menambahkan penting ke kelas penolong kami, kami membuatnya lebih universal, karena warna yang digunakan dalam kelas ini akan lebih diprioritaskan. Namun, saya tidak bisa mengatakan itu bagus. Bagaimanapun, ini membuat gaya kelas lebih diprioritaskan, tetapi masih tidak menjamin Anda seratus persen berhasil, karena penolong ini mungkin menghadapi hal-hal penting lainnya, dan semua yang sama semuanya akan salah. Dan kemudian, ketika ternyata bahwa bagaimanapun, dalam kasus tertentu, kelas ini harus membuat teks "tidak terlalu merah", maka Anda akan segera "melahirkan" pemilih baru dengan pengulangan importir.
Kapan masih mungkin
Itu benar dan normal untuk digunakan! Penting saat Anda perlu mengganti gaya sebaris atau lainnya! Penting.
Jika Anda mengikuti aturan ini, ternyata dalam tata letak yang biasa, terutama jika Anda memaksakan halaman dari awal, Anda tidak perlu menggunakan importir sampai saat Anda mulai menghubungkan solusi pihak ketiga ke halaman Anda, tetapi bahkan ini adalah bagaimana kami beres di atas, tidak selalu mengarah pada penggunaannya.
Metodologi modern seperti BEM juga mendikte aturan mereka sendiri, di mana penggunaan gaya inline atau importir tidak tepat.
Anda tidak perlu importir, bukan karena dia entah bagaimana misterius dan mengerikan, tetapi hanya karena dalam kebanyakan kasus Anda dapat melakukannya tanpa dia.
Semua perkecualian yang telah saya tentukan untuk diri saya sendiri, sebagai aturan, turun ke kasus yang tidak terlalu khas. Misalnya, Anda mungkin perlu menggunakan ini ketika Anda sedang mengembangkan perpustakaan Anda sendiri, plug-in, atau ekstensi browser dan Anda memerlukan beberapa perilaku prioritas tinggi untuk gaya tertentu. Namun, ini jauh dari penggunaan biasa.