Bahagian CSS menyelamatkan anda daripada mimpi ngeri

Konteks yang diperlukan

Baru-baru ini, saya sedang mendengar podcast yang terkenal, dan hos yang hebat bercakap tentang komponen web, menyenaraikan semua bahagian yang baik, buruk dan jelek tentang pelbagai spesifikasi dan ciri komponen web.

Jerit kepada Chris Coyier dan Dave Rupert untuk episod yang benar-benar adil dan perbualan yang hebat. Tonton episod di sini:

Rancangan Bual Bicara Kedai

Sesiapa pun, dalam episod itu, saya terkejut apabila mendapati Bahagian CSS berjaya masuk ke dalam senarai penjahat, walaupun saya dapat melihat beberapa sebab di sebalik orang mungkin menganggap mereka bukan yang terbaik. Saya kebetulan berfikir bahawa bukan sahaja bahagian CSS cukup bagus, ia sebenarnya menyelamatkan kita semua yang menggunakannya daripada senario yang JAUH lebih menjengkelkan dan mengecewakan daripada tidak dapat menggayakan setiap elemen tunggal dalam akar bayangan komponen web sama seperti anda mahu.

Biar saya jelaskan, tetapi konteks LAGI dahulu!

Komponen web direka kebanyakannya untuk kegunaan pihak ketiga

Saya tidak dapat mengesahkan semua yang berikut secara eksplisit sebagai benar, tetapi pendapat peribadi saya—dibuat semasa menulis, menggunakan dan membantu ciri komponen web spesifikasi untuk beberapa tahun lepas dalam tugas harian saya—adalah spesifikasi dan ciri komponen web sedia ada semuanya direka untuk menyelesaikan kes penggunaan "komponen pihak ketiga". Iaitu, komponen web telah direka bentuk untuk menyokong situasi yang sangat khusus: pengarang komponen mencipta alat yang pengguna lain muat turun daripada internet dan gunakan dalam apl mereka.

Saya merasakan bahawa jika anda melihat ciri komponen web melalui lensa kes penggunaan "komponen pihak ketiga", maka banyak pendekatan yang diambil oleh penulis spesifikasi dan pelaksana penyemak imbas membuat TON masuk akal. Ambil contoh keterukan pengkapsulan gaya bayang-bayang. Jika anda mengeluarkan komponen dari internet dan masuk ke dalam apl anda, bukankah bagus jika anda tidak perlu risau bahawa css komponen itu akan memecah salah satu halaman anda? Bukankah menarik jika anda tidak perlu risau dengan struktur dalaman komponen yang anda tidak tulis dan dapat merawat komponen itu seperti kotak hitam dan berinteraksi dengannya melalui permukaan api yang jelas?

Kebanyakan masalah dalam memahami cara komponen web direka bentuk untuk berfungsi ialah industri telah berkembang sejak spesifikasi komponen web dicipta dan hari ini 99% daripada komponen yang kami gunakan dalam apl kami tidak datang daripada sumber luaran . Hari ini, apabila kita memikirkan komponen, selalunya kita memikirkan tentang "komponen pihak pertama" yang kami atau pasukan kami tulis dan bukan seseorang di seluruh internet. Kami tidak menggunakan banyak komponen luaran dalam aplikasi kami, jadi API komponen web yang direka kebanyakannya untuk kes penggunaan itu kelihatan pelik kepada kami, terutamanya apabila kami juga cuba menggunakan komponen web untuk mencipta komponen pihak pertama untuk diri kami sendiri.

Jadi untuk semua perkara lain yang akan saya katakan dalam artikel ini, anggap saya merujuk kepada situasi "komponen pihak ketiga". Bayangkan bahawa komponen yang saya maksudkan ialah pakej npm yang anda muat turun dan terdapat GitHub readme di luar sana dan nota tampalan dan sebagainya, tetapi anda (atau pasukan anda) tidak menulisnya sendiri untuk apl anda sendiri.

Bahagian CSS bukanlah antara muka yang hebat untuk menggayakan komponen yang anda tulis untuk diri sendiri atau pasukan anda dan mempunyai kawalan penuh ke atas.

Bahagian CSS ialah sebahagian daripada API awam komponen web

Komponen yang direka dengan baik mempunyai beberapa cara berbeza untuk berinteraksi dengannya. Komponen web yang hebat mempunyai slot untuk HTML tersuai, sifat tersuai CSS untuk tema tersuai dan Bahagian CSS untuk gaya tersuai. The Shop Talk Show fellas membincangkan Bahagian CSS dengan konteks bahawa mereka kikuk untuk penggayaan bentuk percuma, tetapi saya tidak akan berfikir tentang Bahagian CSS seperti itu. Saya akan menganggapnya sebagai permukaan API awam lain untuk komponen itu, sama seperti atribut atau sifat. Orang ramai biasanya tidak terlalu bimbang tentang tidak dapat mencipta sifat tersuai atau atribut untuk komponen yang mereka tarik daripada internet. Saya rasa Bahagian CSS adalah idea yang sama. Pengarang komponen menetapkan kepingan templat dalaman yang "ok untuk digayakan" dengan cara yang anda mahukan. Jadi, dapat menggayakan setiap elemen dalaman dalam komponen web bayang-bayang itu tidak semestinya suatu jangkaan.

Dan siapa yang lebih baik untuk mengetahui bahagian mana dari beberapa templat kompleks yang ok untuk menggunakan sebarang gaya daripada pengarang komponen? Jika anda menarik masuk komponen daripada internet hanya untuk berpatah balik dan menulis semula semua gaya, mungkin memusnahkan kebolehcapaian dan sebagainya dalam proses, mengapa anda memasang komponen itu pada mulanya? Saya mendapat daya tarikan pemilih "Saya tahu apa yang saya lakukan" untuk akar bayang-bayang yang dianjurkan oleh ramai orang, tetapi dalam bahagian seterusnya ini, saya akan menerangkan sebab saya fikir mempunyai permukaan API penggayaan yang ditetapkan iaitu terputus dari struktur DOM dalaman sebenarnya menakjubkan dan harus diraikan kerana membantu kami semua pengembang tidak menjadi gila.

Isyaratkan suara treler filem sekolah lama

Dalam dunia di mana pemilih "Saya tahu apa yang saya lakukan" wujud dan Bahagian CSS tidak wujud

Mari melompat ke dunia khayalan di mana Bahagian CSS tidak wujud, dan beberapa pemilih "Saya tahu apa yang saya lakukan" (mari kita panggilnya /deep/ demi nostalgia) wujud dan merupakan "cara" yang anda sepatutnya menggayakan templat DOM dalaman beberapa komponen web akar bayang.

Dan anda memerlukan satu komponen sedemikian untuk apl anda, jadi anda pergi dan memuat turun pakej npm

npm i some-awesome-package@1.2.3

dan miliki HTML berikut dalam aplikasi anda:

<some-awesome-component></some-awesome-component>

Komponen Some Awesome Component mempunyai div di dalamnya yang berwarna merah secara lalai dan tidak menggunakan sebarang sifat tersuai CSS. Dan pada mulanya, div merah adalah ok!

Tetapi kemudian anda memutuskan bahawa anda perlu menukar warna div merah kepada rebeccapurple. Jadi anda tulis css ini:

@layer my-overides {
  some-awesome-component /deep/ div.the-red-div {
    background: rebeccapurple;
  }
}

the-red-div ialah nama yang mengerikan untuk kelas, tetapi hei, tiada siapa yang mengambil berat tentang struktur dalaman komponen web shadow dom, bukan? Mereka tidak boleh bercanggah dengan dunia luar, jadi pengarang komponen boleh menulis nama kelas yang mengerikan jika mereka mahu.

Dan kerana kita berada dalam dunia khayalan kita di mana /deep/ wujud, semuanya berfungsi! Div merah kini berwarna ungu dan semuanya coolio.

Anda mengabaikan disonans kognitif kecil dalam otak kita bahawa .the-red-div mempunyai warna yang bukan merah. Itu masalah esok.

Sweet!

Kemudian pengarang komponen menambah ciri dan menerbitkan patch bonggol.

Anda sedang sibuk menghantar dan sepanjang perjalanan, anda memasang semula pakej yang tidak berkaitan dan anda menarik tampalan terbaharu Beberapa Komponen Hebat dan div merah kembali semula!

Apa yang memberi? Anda pergi mencari nota tampalan dan anda dapati:

## 1.2.4
- [a987s83] Added cool button, fixed a11y issues

Nampak baik, kenapa css rosak? Nota Changelog tidak mempunyai sebarang petunjuk. Oleh itu, anda membaca beberapa PR terkini dan tidak melihat apa-apa yang menarik perhatian anda.

Jadi anda putarkan aplikasi anda dan pergi menyemak akar bayang dan div merah ialah sekarang! Dan pengarang komponen telah menyedari bahawa nama kelas mereka bagi the-red-div sepatutnya lebih generik dan telah menukarnya kepada berwarna-warni.

Baiklah, jadi anda edit css anda kepada:

@layer my-overides {
  some-awesome-component /deep/ .colorful {
    background: rebeccapurple;
  }
}

Dan ia berfungsi dengan baik sekali lagi!

Kemudian penulis mengeluarkan satu lagi patch bonggol minggu depan.

Lompat potong kembali ke dunia nyata

Akses pemilih CSS terus ke DOM yang anda tidak kawal adalah senapang kaki yang besar

Lihat corak dan oleh itu masalah dengan akses pemilih langsung ke templat dalaman yang anda tidak miliki atau kawal?

Tidak dapat tidak, perubahan akan dibuat pada templat dalaman di luar kawalan anda, pengguna komponen. Dan sudah pasti perubahan itu akan berlaku dalam cara yang hampir tidak dapat dilihat oleh anda tanpa memeriksa secara visual SETIAP SATU KEPING apl anda yang sedang berjalan, sama ada secara manual atau dengan alat ujian regresi visual yang mengelupas. Jika anda menggunakan komponen dari internet, maka terdapat kontrak semacam. Pengarang komponen memiliki shadow dom dan anda pengguna memiliki elemen :host (teg HTML itu sendiri dalam kod anda yang anda tulis). Melintasi sempadan itu tanpa beberapa jenis kontrak adalah jaminan untuk kod rapuh.

Fakta yang menggembirakan, kerapuhan ini juga berlaku apabila melakukan pertanyaan dom bayangan langsungSelectors untuk elemen DOM dalam JS juga. Jika apl anda bergantung pada beberapa elemen untuk sentiasa wujud, ia tidak akan wujud. Jika anda membuat pertanyaan tentang DOM yang anda tidak kawal, suatu hari nanti beberapa elemen tidak akan berada di sana. Sama ada ia akan menjadi elemen yang berbeza atau mempunyai kelas/atribut/id yang berbeza padanya.

Tetapi Bahagian CSS menyokong anda

Oleh kerana Bahagian CSS ialah rentetan ringkas yang bukan elemen DOM sendiri, menggunakannya melindungi aplikasi anda daripada kod rapuh. Pengarang pihak ketiga tidak akan menguji bahawa sesetengah div SENTIASA menjadi div selama-lamanya. Tetapi jika mereka mencipta Bahagian CSS, mereka tahu bahawa mereka sedang mencipta API awam untuk komponen yang tidak boleh dialih keluar atau ditukar tanpa perubahan yang terputus. Dan jika anda menggunakan Bahagian CSS dan bukannya menanyakan secara terus shadow DOM, maka pengarang komponen boleh mengalihkan Bahagian CSS tersebut dalam shadow dom dan kod aplikasi anda tidak akan pecah.

Selain itu, kerana nama Bahagian CSS membayangkan perhubungan, konsep dan ciri, adalah sukar bagi pengarang komponen untuk memfaktorkan semula komponen sedemikian rupa untuk membuat Bahagian CSS mengubah maknanya dengan ketara. Oleh itu, selain mengetahui bahawa Bahagian CSS anda menggunakan kod tidak akan rosak kerana pengarang komponen membuat perubahan tanpa memberitahu anda, anda juga boleh yakin dengan munasabah bahawa Bahagian CSS akan sentiasa menjadi perkara yang sama dalam hubungan dengan keseluruhan komponen. Jadi gaya yang anda gunakan pada bahagian itu pasti akan sentiasa "masuk akal" untuk bahagian itu walaupun komponen itu berkembang dari semasa ke semasa.

Selangkah lagi

Saya telah melihat beberapa ulasan daripada orang industri yang sangat bijak dan berharga tentang kesakitan Bahagian CSS dan menambah akses bayang bayangan terus melalui pemilih akan menjadi lebih mudah. Jika tiada apa-apa yang berubah bentuk dari semasa ke semasa, saya akan bersetuju dengan sepenuh hati. Tetapi memandangkan komponen berubah dari semasa ke semasa, saya akan cuba menganggap bahawa akses DOM bayangan langsung akan menjadi lebih menyakitkan daripada perlu mengingati Bahagian CSS yang tersedia untuk digunakan.

Setiap kali terdapat perbincangan tentang cara untuk menyeberangi sempadan antara "apl" dan bayang bayangan di dalam komponen, saya akan sentiasa menyokong beberapa pendekatan kontrak struktur yang dinamakan seperti Bahagian CSS berbanding akses pemilih langsung. Pada pandangan saya, sesiapa sahaja yang menganggap Bahagian CSS kikuk dan dahsyat tidak perlu pergi memburu seluruh aplikasi mereka mencari semua tempat templat akar bayang telah berubah tanpa pengetahuan mereka :)

Kesimpulan

Bahagian CSS sangat bagus dan apabila anda menggunakannya, walaupun anda 100% adalah pembangun yang hebat dan anda tahu apa yang anda lakukan, anda 100% juga tidak mahu kesakitan yang berpotensi untuk mengubah suai semua CSS tersuai itu anda menulis setiap kali terdapat tampalan pada komponen yang anda gunakan. Anda pasti tahu apa yang anda lakukan, tetapi kami semua mahu menghalang apl kami daripada rosak secara rawak dan itulah yang akan dilakukan oleh penggayaan DOM bayangan langsung. Pemilih "Saya tahu apa yang saya lakukan" pasti akan membuatkan gaya anda berfungsi, tetapi ia hanya akan dijamin berfungsi jika anda tidak pernah mengemas kini versi pakej yang anda gayakan. Jika anda mengemas kini versi, anda perlu memerhatikan semua gaya "Saya tahu apa yang saya lakukan" itu setiap masa.

Imo itu membuang masa berharga kita. hanya gunakan Bahagian CSS dan galakkan pembangun komponen di luar sana untuk menambahkannya pada komponen yang mereka tulis.

Atas ialah kandungan terperinci Bahagian CSS menyelamatkan anda daripada mimpi ngeri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!