Bekerja dengan BEM pada skala

Artikel ini meneroka cabaran dan amalan terbaik menggunakan metodologi CSS BEM (blok, elemen, pengubahsuaian) pada skala, menarik pandangan dari pemaju yang berpengalaman. Soalan teras yang ditangani ialah cara menguruskan kerumitan BEM dengan berkesan dalam projek besar.

Artikel bermula dengan menonjolkan salah tanggapan umum: over-nesting. Walaupun struktur BEM asas (.block__element--modifier) adalah mudah, banyak pemaju tersilap melanjutkan ini ke tahap yang berlebihan (mis., .block__element__subelement--modifier). Konsensus di kalangan pemaju yang ditemuramah secara umumnya mengehadkan bersarang ke satu atau dua peringkat. Sarang yang mendalam mengurangkan kebolehbacaan dan penyelenggaraan, dan sering menunjukkan keperluan untuk scoping atau penstrukturan semula blok yang lebih baik. Seorang pemaju mencadangkan menggunakan nama elemen yang lebih lama dan lebih deskriptif dan bukannya menambah tahap bersarang tambahan. Satu lagi menawarkan analogi yang menarik yang membandingkan bersarang yang berlebihan dengan tegas menentukan struktur DOM dalam CSS, menganjurkan pendekatan yang lebih fleksibel. Walau bagaimanapun, tidak semua pemaju mematuhi ketat ke had dua peringkat ini; Ada yang mendapati bahawa bersarang yang lebih mendalam kadang -kadang perlu.

scoping blok yang betul adalah penting. Artikel ini menekankan bermula dengan unit terkecil, paling mandiri, mengelakkan definisi blok yang terlalu luas yang merangkumi unsur-unsur yang tidak berkaitan. Pendekatan ini memastikan modulariti dan kebolehgunaan semula yang lebih baik.

Menganjurkan fail CSS adalah satu lagi aspek utama. Beberapa pemaju menganjurkan struktur satu fail-per-blok, mempromosikan modulariti dan kemudahan penyelenggaraan. Lain -lain menggabungkan ini dengan unsur -unsur SMACSS, mewujudkan pendekatan hibrid. Artikel ini juga membincangkan ITCSS (CSS segitiga terbalik), satu metodologi yang membentuk CSS berdasarkan kekhususan, eksplisit, dan jangkauan, yang menawarkan sistem lapisan berstruktur untuk menguruskan projek CSS yang besar.

Penggunaan nama -nama kelas yang panjang dan deskriptif digalakkan melalui singkatan kritikal untuk meningkatkan kebolehbacaan kod dan kebolehkerjaan. Artikel ini sangat menasihatkan penggunaan SASS @extend dengan BEM, lebih suka pendekatan berbilang kelas dalam HTML untuk mengekalkan hubungan yang jelas antara kelas dan mengelakkan kembung CSS. Pendekatan ini membolehkan fleksibiliti yang lebih besar dan pengubahsuaian yang lebih mudah. ​​

Akhirnya, kepentingan CSS linting ditekankan untuk menguatkuasakan konvensyen penamaan dan memastikan konsistensi di seluruh pasukan. Artikel ini juga menyentuh stack Yandex BEM yang lebih luas, yang merangkumi alat untuk JavaScript dan templating, tetapi mengakui bahawa banyak pemaju memberi tumpuan semata -mata pada metodologi CSS. Kesimpulannya menekankan pentingnya mencari aliran kerja yang sesuai dengan pasukan dan projek, menggabungkan alat dan teknik dari pelbagai sumber. Manfaat komponen berstruktur yang didokumentasikan dengan baik, bersama-sama dengan keperluan untuk mengelakkan over-automation untuk mudah alih yang lebih baik.

Artikel ini disimpulkan dengan bahagian Soalan Lazim yang meliputi pelbagai aspek BEM, perbandingannya dengan metodologi lain, dan petua praktikal untuk pelaksanaan dan penskalaan.

Atas ialah kandungan terperinci Bekerja dengan BEM pada skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!