Bem dan smacss: nasihat dari pemaju yang ' telah berada di sana

Metodologi CSS boleh menjadi minda yang membingungkan dan sukar untuk diputuskan. Mari kita pertimbangkan dua pilihan yang paling terkenal: BEM dan SMACSS.

Sekiranya anda memilih salah satu daripada ini untuk projek anda yang seterusnya? Apa yang paling sesuai untuk mereka? Apa yang mungkin salah? Jika anda sudah bekerja dengan satu - adakah anda menggunakannya seperti yang dimaksudkan? Kepada potensi sepenuhnya? Bagaimana anda tahu jika anda melakukannya dengan betul? Saya fikir saya akan senang bertanya kepada orang yang sudah melalui soalan -soalan itu dalam projek mereka sendiri dan belajar dari pengalaman mereka.

Saya bertanya kepada pemaju yang telah bekerja dengan Bem dan/atau Smacss untuk kisah kejayaan mereka, cerita seram, nasihat, dan kata -kata berhati -hati. Saya memberi beberapa pemaju senarai keseluruhan soalan dan yang lain hanya membentuk pemikiran mereka kepada saya. Saya telah mengumpulkan hasilnya ke dalam apa yang saya harap akan bacaan berharga bagi mereka yang mempertimbangkan untuk mengoptimumkan CSS mereka.

Tonton Menjadi Wira CSS Pejabat Anda dengan Senibina CSS CSS berstruktur, diselenggarakan dan berskala

Tonton kursus ini Tonton kursus ini Bagi mereka yang baru kepada BEM dan SMACSS, saya akan mulakan dengan memberikan gambaran keseluruhan yang sangat tinggi tentang apa yang BEM dan SMACSS.

Kunci Takeaways

BEM adalah serba boleh untuk sebarang saiz projek: BEM bukan sahaja untuk projek besar; Ia bermanfaat untuk mengekalkan kod yang bersih dan dikekalkan dalam kedua -dua projek kecil dan besar.
Menghindari bersarang dengan BEM: BEM membantu mengurangkan kerumitan CSS dengan mengelakkan pemilih yang berlebihan, yang biasa berlaku dalam kod SASS.
enkapsulasi dan modulariti dengan BEM: Metodologi enkapsulasi BEM membolehkan komponen digunakan semula di seluruh projek yang berbeza tanpa membawa kebergantungan.
SMACSS Memudahkan penyerahan projek: pengkategorian SMACSS menjadikannya lebih mudah untuk menerangkan dan menyerahkan projek, terutamanya berguna dalam tetapan kontrak atau kolaboratif.
• Pendekatan hibrid boleh berkesan: Menggabungkan BEM dan SMACSS dapat memanfaatkan kekuatan kedua -dua metodologi, yang membolehkan fleksibiliti dan organisasi yang dipertingkatkan dalam seni bina CSS.
Baca dan Eksperimen: Kedua -dua BEM dan SMACSS mempunyai merit mereka dan boleh digunakan bersama -sama. Membaca kedua -duanya dan bereksperimen dengan mereka dalam projek boleh membawa kepada pengurusan dan aliran kerja CSS yang lebih baik.
• Apa itu bem?

bem bermaksud

pengubah elemen blok

dan berasal dari Yandex. Ia menyediakan cara yang agak ketat untuk mengatur kelas CSS anda ke dalam modul bebas. Terdapat beberapa variasi idea tetapi yang paling biasa kelihatan seperti ini:

Blok mewakili objek di laman web anda. Contohnya:

• seseorang
• Borang log masuk
• menu
• Borang carian

elemen adalah komponen dalam blok yang melaksanakan fungsi tertentu. Ia hanya masuk akal dalam konteks bloknya. Contohnya:

tangan
Butang masuk
item menu
medan input carian

Pengubahsuaian adalah bagaimana kita mewakili variasi blok. Contohnya:

orang yang tinggi/pendek
Borang log masuk pekat (mis. Kami menyembunyikan label dalam satu versi)
menu diubahsuai untuk kelihatan berbeza untuk footer atau sitemap
medan input carian dengan gaya butang tertentu

Dalam contoh menu kami, nama kelas boleh kelihatan seperti ini:

<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>

Terdapat prinsip -prinsip dan alat seni bina yang lain untuk BEM di laman web BEM.info, bagaimanapun, apabila pemaju membincangkan BEM, mereka sering memberi tumpuan terutamanya kepada konvensyen penamaan di atas dan itu benar mengenai majoriti perbincangan di bawah.

Apa itu smacss?

SMACSS adalah kerangka CSS oleh Jonathan Snook. Di laman web SMACSS, dia mengatakan ia lebih seperti "panduan gaya" daripada kerangka CSS yang tegar. Ia memberi tumpuan kepada lima kategori untuk peraturannya:

Pangkalan digunakan untuk lalai seperti HTML, Body, A, A: Hover. Ini termasuk reset CSS anda dan selalunya berada di fail CSS asasnya sendiri atau pada permulaan CSS utama anda.

Layout membahagikan halaman ke bahagian dengan unsur -unsur seperti header, footer, dan artikel. Selalunya pemaju menunjukkan elemen susun atur dengan mengutamakan kelas dengan l-.

Modul adalah elemen modular yang boleh diguna semula dalam reka bentuk. Dokumentasi SMACSS melihat modul sebagai majoriti elemen anda dan dengan itu tidak memerlukan anda awalan mereka tetapi anda boleh melakukannya jika anda memilih.

Negeri digunakan untuk variasi yang mungkin untuk setiap elemen (mis. Aktif, tidak aktif, berkembang, tersembunyi). Ini adalah awalan dengan-, mis. IS-Active, IS-Inactive, IS-Expanded, IS Handden atau melalui Pseudo-Classes seperti: Hover and: Focus atau Media Queries.

Tema adalah serupa dengan Negeri tetapi mentakrifkan bagaimana modul dan susun atur akan kelihatan. Ia lebih sesuai untuk laman web yang lebih besar dengan elemen bersama yang kelihatan berbeza di seluruh. Anda akan menambah variasi tema pada setiap halaman atau setiap bahagian.

Unsur -unsur kanak -kanak di SMACSS (seperti apa yang "elemen" adalah "blok" dalam bem) mempunyai item induk yang diawali dengan dash. mis. Menu dan menu-item.

SMACSS menyatakan bahawa semuanya terpulang kepada keutamaan pemaju dan tidak sebagai preskriptif seperti BEM. SMACSS hanya menyediakan garis panduan asas. Gunakan konvensyen penamaan anda sendiri untuk setiap kategori dan susunkannya dengan cara pilihan anda, selagi anda mendokumentasikan pendekatan anda supaya pemaju lain dapat mengikuti.

panduan daripada mereka yang telah menggunakan BEM

Ia boleh digunakan untuk semua projek, besar dan kecil

Hamish Taplin, pemaju depan dari Cardiff, UK, percaya BEM sesuai untuk projek-projek besar dan kecil dan ia menawarkan banyak kelebihan:

"Bem disebut -sebut sebagai projek besar tetapi saya tidak percaya sama sekali. Jika anda suka menulis kod yang bersih, boleh dikekalkan, dan tidak bertarung dengan masalah kekhususan maka BEM adalah untuk anda. Ada yang mengatakan bahawa HTML yang dihasilkannya hodoh atau berlebihan tetapi saya fikir ia cantik. Saya dapat membaca beberapa HTML dan melihat apa yang sedang berlaku dan bagaimana unsur -unsur berkaitan antara satu sama lain. Ia hebat. "

Ia mengelakkan bersarang

Alec Raeside, pemaju front-end dari Sydney, Australia telah menemui BEM untuk menjadi cara yang baik untuk mengelakkan terlalu banyak pemilih:

"Bem adalah cara yang baik untuk membina UI. Nama kelas deskriptif, kadang -kadang panjang, baik untuk memahami langsung di mana kelas/pemilih ini duduk dalam seni bina UI anda. Ia juga bermakna anda jarang perlu pemilih sarang, kejatuhan biasa dengan kod sass. Biasanya apabila saya bersarang dengan BEM adalah apabila saya ingin menargetkan elemen melalui nama tag HTML, atau untuk memenangi pertempuran spesifik apabila komponen gaya bertindih. "

ia membantu anda mencari semula kuasa kelas

Hamish Taplin menyanyikan pujian BEM dan prinsip berorientasikan objek. Dia menimbulkan pemikiran yang menarik mengenai konsep markup "semantik":

"Kelebihan BEM jelas dengan segera. Sebelum mengadopsi prinsip BEM dan OOCSS, saya telah menjadi peguam bela tentang apa yang (tidak betul) dikenali sebagai markup "semantik". Saya fikir banyak pemaju (saya termasuk) sebahagian besarnya salah faham apa sebenarnya maksudnya dan telah mengabaikan kuasa kelas di bawah nama mereka yang tidak cukup "semantik". Enjin carian dan pembaca skrin tidak peduli dengan kelas yang anda gunakan atau beberapa div tambahan yang digunakan untuk grid. Jurutera Twitter Nicholas Gallagher benar-benar memaku ini dengan catatan blognya "Mengenai Semantik HTML dan Senibina Front-End" ketika dia berkata: '... tidak semua semantik perlu diperolehi. Nama kelas tidak boleh "tidak bersemangat". Apa sahaja nama yang digunakan: mereka mempunyai makna, mereka mempunyai tujuan. Semantik nama kelas boleh berbeza dengan elemen HTML. '"

membuat kerja di tapak yang lebih besar lebih mudah

Satu kekuatan besar BEM yang banyak pemaju menyebutkan keupayaannya untuk mengendalikan membangun dan melaksanakan projek besar dan modular dengan cara yang lebih bersih. Walaupun BEM bukan sahaja untuk laman web besar, ia kelihatan mempunyai kelebihan yang besar di ruang ini. Hamish membincangkan pengalamannya dan juga mempunyai catatan blog keseluruhannya:

"Saya melancarkan beberapa projek kecil dan terpaksa mengatasinya - ia agak sukar pada mulanya kerana ia bertentangan dengan cara saya bekerja selama bertahun -tahun tetapi manfaatnya menjadi jelas. Kemudian, kami memulakan projek yang agak besar dan sangat modular - kemahiran kesihatan saya. Ini adalah projek Bluegg pertama yang saya telah bekerja di mana saya bekerja dengan pemaju lain (Paul Goodfield, yang juga menggunakan BEM)-saya melakukan front-end dan Paul backend. Faedahnya segera jelas, Paul dapat memahami dengan tepat apa yang saya lakukan dan menulis template Laravelnya di sekelilingnya. Sekiranya dia perlu mengisi beberapa jurang maka sifat BEM yang boleh diramal bermakna dia boleh menulis HTML seperti yang saya ada dan keseluruhan prosesnya dibuat lebih lancar. Saya menulis mengenai perkara ini dalam catatan blog "Membina Kemahiran Kesihatan Saya". "

Alec Raeside juga mendapat faedah kepada projek -projek besar melalui sifat modular penamaan BEM. Dia berkata:

"Bem sangat sesuai untuk projek besar. CSS adalah projek yang kompleks dan besar boleh jatuh di mana pemilih yang tidak spesifik boleh menyebabkan akibat yang tidak diingini di tempat lain. Sebagai contoh, mensasarkan semua

s di bawah pemilih seperti .container ul {} boleh berfungsi apabila kod itu ditulis, tetapi sekali banyak komponen lain bersarang dalam komponen .container, gaya UL mungkin tidak sesuai. Dengan enkapsulasi dan kekhususan di tengah -tengah metodologi BEM, ia dapat membantu mencegah pertembungan penamaan antara komponen dan pemilih yang tidak spesifik daripada secara tidak sengaja menggayakan beberapa halaman.

Metodologi BEM merangkumi kod anda untuk digunakan semula

Harry Roberts, seorang arkitek, pereka dan pemaju depan perunding dari UK yang telah menyumbang sejumlah besar idea-idea di kawasan BEM dan mengarang CSS bersih, menunjukkan bahawa metodologi BEM memudahkan penggunaan komponen Di seluruh laman web melalui enkapsulasi:

"Metodologi BEM sangat sesuai untuk projek -projek di mana komponen anda mungkin perlu dipindahkan dari satu pangkalan ke tempat lain; Mereka perlu dikemas sepenuhnya supaya anda boleh memindahkan satu bahagian HTML, CSS, JS ke projek lain, dan anda tidak perlu mengambil sebarang kebergantungan dengan anda. Mari kita bayangkan anda bekerja untuk sebuah syarikat yang mempunyai lima tapak yang berbeza, dan mereka semua memerlukan karusel yang sama di laman web. Anda akan menulis bahawa karusel dalam metodologi BEM supaya anda boleh mengambilnya dalam satu bahagian dan bergerak di sekitar. "

berfungsi dengan baik dengan rangka kerja dengan fokus berasaskan komponen

Josh Hunt, pemaju depan dari Sydney, mendapati ia bermain dengan baik dengan rangka kerja lain dengan fokus komponen yang sama:

"Bem sangat baik untuk laman web yang mempunyai banyak widget atau komponen yang serba lengkap, seperti aplikasi web. Rangka kerja yang mempromosikan komponen HTML (sudut, reaksi, polimer/komponen web) juga menjadikannya lebih mudah untuk menggunakan metodologi BEM. "

cara cepat untuk menyampaikan prototaip

Bob Donderwinkel, pemaju front-end dari Rotterdam, Belanda, memberikan persembahan yang hebat mengenai "manfaat BEM CSS". Dia menunjukkan kelebihan terbesar yang dia dapati dengan bekerja dengan BEM:

"Saya telah berkecimpung dengan BEM selama setengah tahun sekarang dan menggunakannya dalam dua projek: halaman Galeri Scrolling baru untuk www.viewbook.com dan mengolah semula tapak Flash lama ke versi HTML. Reka bentuk untuk projek -projek ini ditakrifkan dengan baik dan saya akan mengatakan kemenangan terbesar menggunakan BEM adalah menyampaikan prototaip dengan cepat. Dan itu terutamanya kerana "menguraikan" reka bentuk anda dalam blok, elemen, dan pengubahsuaian memberi anda permulaan yang baik untuk kodkan beberapa CSS. "

membuat anda berfikir dua kali

Josh Hunt mendapati bahawa konvensyen penamaan membantu anda berfikir dua kali sebelum membuat sesuatu terlalu kompleks:

"Saya dapati kerana hakikat bahawa ia agak hodoh, ia memaksa anda untuk berfikir dua kali apabila akan menulis nama kelas yang sangat panjang."

Pastikan anda merancang!

Hamish Taplin juga memberikan nasihat ini bagi mereka yang memulakan projek baru:

"Mempunyai tahap perancangan apabila anda memulakan projek. Saya cenderung untuk melalui mockups dan mencari corak yang saya boleh abstrak ke dalam modul BEM. Ini boleh menjadi sukar pada mulanya tetapi anda menjadi lebih baik ke titik di mana anda mula menggunakan semula corak lama. Menggunakan semula kod adalah nirvana pembangunan dan sesuatu yang bos anda akan berterima kasih kepada anda apabila kos pengeluaran turun kerana anda lebih cekap! "

Jangan terlalu ketat dengannya

Josh memberi amaran tentang mendapatkan terlalu ketat dengan projek anda ketika bertujuan untuk menggunakan bem:

"Jangan merasa terhad oleh BEM atau merasa seperti anda dipaksa mengikuti corak yang pelik. Saya tertarik dengan dua tweet ini oleh Harry Roberts:

Itu bukan untuk mengatakan modularity, kering, srp, dan lain -lain bukan idea yang hebat -mereka! -Tetapi faham bahawa mereka pendekatan dan bukan pencapaian. 2, 2014

Josh menjelaskan, "BEM tidak seharusnya menjadi matlamat projek, ia harus menjadi sesuatu yang anda ingat ketika anda sedang membangun dan memohon di mana berguna. Jangan terlalu terbawa cuba untuk berpegang pada beberapa 'standard' teoretikal. Kelas penolong (seperti .pull-kanan atau .text-center) benar-benar sejuk untuk wujud bersama BEM. Di mana anda mungkin ada, akan melakukan juga (mungkin lebih baik).
Jika anda teragak -agak, hanya melompat masuk dan berikannya
Hamish tidak mengambil lompatan ke Bem dengan segera. Ia mengambil sedikit masa, persembahan yang berpengaruh, dan mengubah pekerjaan, untuk membawanya menilai semula dan meletakkan Bem untuk memikirkan semula kelasnya. Tetapi dia gembira dia lakukan.

"Saya telah melihat Bem disebut beberapa kali dan fikir ia kelihatan menarik tetapi masih dijalankan seperti saya, cuba meminimumkan jumlah markup dan kelas yang saya tulis, menggunakan sass @extend untuk bekerja di sekitar masalah ini menyebabkan penyebabnya . Suatu hari saya menyaksikan video "Breaking Good Tabiat" Harry Roberts dan terpesona. Lelaki ini sudah pasti - apa masalah yang kita lakukan dengan melakukan ini? "

Hamish terus berkata, "Saya sedang menggerakkan pekerjaan pada masa itu, bermula pada pekerjaan saya sekarang di Bluegg dan melihatnya sebagai rehat yang bersih untuk mencuba bem."

Saya bertanya kepada Harry, pemaju yang sama yang meniup Hamish dengan ceramahnya mengenai "memecahkan tabiat yang baik" dan yang mengilhami Josh dengan tweetnya, jika dia mempunyai cerita kejayaan tertentu untuk dikongsi. Kata -kata beliau bergema mentaliti "memberikannya":

"Setiap projek yang saya kerjakan telah mendapat manfaat daripada konvensyen penamaan BEM. Ia bukan perkara yang berubah -ubah dengan serta -merta, jadi sukar untuk memetik cerita -cerita kejayaan: Biasanya ia hanya salah satu daripada banyak bahagian yang datang bersama -sama untuk mewujudkan keseluruhan yang lebih baik. Seperti roda stereng itu sendiri tidak begitu mendalam, tetapi ia adalah bahagian penting dalam kereta; Penamaan Bem adalah satu perkara yang menjadikan keseluruhan projek lebih baik.

"Yang paling dekat saya mempunyai kisah kejayaan, mungkin, adalah masa saya memperkenalkan penamaan BEM kepada pelanggan saya. Dia telah menghindari penamaan Bem untuk masa yang lama, memetik yang sering digunakan "tetapi ia hanya begitu hodoh!" Saya meyakinkannya untuk sekurang -kurangnya mencubanya pada projek selama setengah hari, dan melihat apa yang difikirkannya. Dia menyukainya. Selepas hanya beberapa jam dia meletakkan garis bawah di sini, dan dua hyphens di sini. Ia sentiasa bagus untuk melihat orang mempunyai momen mentol cahaya itu. "

Harry juga mengemukakan soalan berikut untuk mereka yang tidak pasti:

"Jika anda tidak pasti tentang BEM, jawab soalan ini: Apa yang tidak disukai oleh cara yang ketat, telus, dan bermakna untuk menamakan perkara? Secara jujur, tidak ada kelemahan untuk menggunakan penamaan BEM. "

Saya akan meninggalkan kata -kata terakhir ini kepada Hamish Taplin yang berkata:

"Cubalah sahaja. BEM adalah mengenai menyelesaikan masalah jadi lihat jika ia berlaku untuk anda. Saya telah melihatnya ditolak di banyak forum atau perbincangan oleh orang yang tidak pernah mencubanya dan ingin mengekalkan markup mereka "semantik". Saya sama sehingga saya mengambil terjun dan ia benar -benar mengubah keseluruhan pandangan saya tentang bagaimana saya harus menulis HTML dan CSS. Anda perlu bersedia untuk menyesuaikan diri dan mengakui apabila anda salah jika anda ingin membina produk yang hebat. "

panduan daripada mereka yang telah menggunakan SMACSS

kemudahan demonstrasi dan penyerahan

Chris Wright, pemaju yang berpangkalan di Sydney, adalah peminat besar Smacss dan menawarkan nasihatnya. Pujian utama Chris terhadap SMACSS adalah kemudahan penggunaan ciri -ciri pengkategoriannya:

"Sebaik sahaja saya mula memanfaatkan sebab mengapa SMACSS sangat kuat, ciri -ciri pengkategorian, saya dapati ia menjadi metodologi yang benar -benar boleh dibaca dan boleh diajar berbanding dengan metodologi CSS yang popular."

"Saya telah menggunakannya sebagai kontraktor kerana lebih mudah untuk menunjukkan kepada orang- inilah stylesheet saya: kelas dengan l- di hadapan susun aturnya, perkara dengan m- di hadapannya adalah modul, Dan sebagainya. Walaupun saya masih perlu menyerahkan dan menjelaskan, jumlah yang saya perlu jelaskan dan dokumen telah dikurangkan sehingga ia menyelamatkan saya lebih banyak masa di luar kerja juga. Sehingga tahun lepas, saya telah mula menggunakannya pada setiap projek yang saya dapat. "
baik untuk pendatang baru dengan metodologi CSS
Chris terutamanya mendapati dia menghadapi masalah untuk mendapatkan orang lain untuk bekerja dengan versi awal BEM dan OOCSS tetapi SMACSS lebih mudah dijelaskan:
"Saya mendapati bahawa jauh lebih mudah untuk dijelaskan kepada pemaju yang tidak pernah menemui metodologi CSS sebelum - apakah nilai metodologi itu dan bagaimana menggunakannya.

"Saya cuba seketika dengan BEM tetapi selalu mendapati orang akan keliru. Dengan OOCSS saya mendapati bahawa konvensyen penamaan orang sering di seluruh tempat tetapi mereka biasanya mendapatnya. SMACSS menawarkan pengkategorian yang membantu anda melihat apa tujuan kelas. "

kemudahan membaca

Chris juga berkata dia mendapati versi awal BEM menjadi sedikit verbose tetapi telah melihatnya berkembang dari masa ke masa, dia lebih suka SMACSS di sini.

"Juga dari sudut pandang membaca, semua garis bawah dan sengkang dan kelas panjang gila di Bem cenderung untuk menghilangkan saya dari situ - Saya telah melihat beberapa versi yang disesuaikan seperti apa yang dilakukan Harry Roberts sebagai peningkatan yang cukup besar Mengenai metodologi, tetapi saya masih tidak merasa seperti itu untuk saya.

berskala untuk semua projek

Chris juga menegaskan bahawa SMACSS tidak perlu sepenuhnya diikuti dengan cara yang sama di tapak yang lebih besar berbanding dengan yang lebih kecil, yang membolehkan fleksibiliti dan kebolehgunaan dalam semua projek:

"Saya fikir ia adalah selamat untuk mengatakan pelbagai bentuk SMACSS boleh sesuai untuk semua projek. Seperti yang dinyatakan oleh Snook dalam bukunya-pada projek yang lebih kecil, anda mungkin tidak akan menggunakan perkara seperti tema sebagai kategori (t-), tetapi dapat membezakan kelas susun atur dari kelas modul dari sekilas yang cukup berharga. "

anda boleh menggunakan smacss dan bem

Hamish Taplin sebenarnya mengambil pendekatan hibrid, menggunakan beberapa konsep SMACSS dalam BEMnya. Saya dapati beberapa pemaju telah menemui tempat yang manis di antara keduanya, jadi mungkin bukan masalah memilih satu yang lain:

"Saya menggunakan beberapa konsep SMACSS dan saya tidak melihat mereka sebagai saling eksklusif. Saya mengatur sass saya ke dalam "asas", "susun atur" dan "modul" yang luas konvensyen SMACSS. Saya juga peminat besar menggunakan kelas berasaskan 'negeri' dalam javascript saya. Sebagai contoh, modul yang boleh dilihat atau tersembunyi mungkin mempunyai kelas yang kelihatan atau tersendiri yang dikawal oleh JavaScript. Saya dapati ini membantu membezakan apa yang dikawal oleh JavaScript dan bukannya menggunakan pengubah gaya BEM. Saya tidak akan menentangnya. "

Bob Donderwinkel bersetuju bahawa campuran kedua -dua BEM dan SMACSS mungkin dalam kebanyakan situasi:

"Saya akan mengatakan menggunakan satu tidak mengecualikan yang lain, walaupun terdapat beberapa pertindihan dengan BEM jika anda menganggap modul dan peraturan negara dari SMACSS. Tetapi selain ini anda boleh mencampur dan memadankan kedua -duanya seperti yang diperlukan. "

Harry Roberts mengesyorkan memilih bit terbaik dari mana -mana dan menggunakan metodologi sendiri yang dia panggil "ITCSS" dengan gabungan BEM, SMACSS, dan OOCSS.

"Saya sebenarnya menggunakan metodologi saya sendiri - belum diterbitkan - ITCSS bersama -sama dengan pemadaman OOCSS, BEM, dan SMACSS. Sangat penting untuk memilih bit dari mana -mana, dan bukannya membabi buta mengikuti satu metodologi yang tepat hingga akhir pahit. Saya sentiasa menggunakan penamaan BEM, dan akan menggunakan metodologi BEM pada projek -projek di mana saya memerlukan komponen yang terkandung sepenuhnya yang memerlukan perkongsian merentasi pelbagai kod. Saya akan menulis komponen ini menggunakan OOCSS, dan kemudian saya akan membungkus komponen ini ke dalam seni bina ITCSS.
"Ia tidak bermula dan berhenti dengan BEM dan SMACSS. ITCSS direka untuk merangkumi keseluruhan projek; OOCSS adalah metodologi kecil yang hebat yang serasi; Prinsip pepejal boleh digunakan untuk menulis CSS berkualiti yang lebih baik. "
Jika anda berminat untuk mengetahui sedikit lebih lanjut mengenai ITCSS, Harry mempunyai video yang tersedia untuk anda tonton. Untuk maklumat lanjut mengenai prinsip CSS pepejal, Harry juga menawarkan kedua -dua artikel ini:
prinsip tanggungjawab tunggal yang digunakan untuk CSS
Prinsip terbuka/tertutup yang digunakan untuk CSS
Jika anda belum melakukannya, baca panduan SMACSS
Harry Roberts sangat mengesyorkan membaca panduan SMACSS:
"Hanya baca di atasnya. Smacss adalah salah satu daripada bacaan depan yang terbaik yang keluar dalam beberapa tahun kebelakangan ini, dan sangat sukar untuk tidak bersetuju dengan logik yang dikemukakannya. "
Cerita Seram di Bem dan Smacss
Saya cuba mendapatkan beberapa cerita seram dan kata -kata amaran dari pemaju kita - pelajaran yang dapat kita pelajari dari kesilapan mereka semasa mereka berada dalam proses pembelajaran. Berikut adalah pemikiran mereka.

alec raeside on bem

"Ia agak lengkung pembelajaran, ia tidak terlalu sukar untuk difahami, tetapi ia mengambil sedikit masa untuk mengubah tabiat anda menulis CSS/SASS biasa. Ia sangat mudah untuk tidak berfikir dengan cara yang semata -mata berasaskan komponen. Saya telah menulis BEM sepanjang tahun dan masih berasa seperti saya belajar dan menaik taraf cara saya menulisnya. Kadang-kadang anda perlu menulis lebih banyak CSS dengan BEM berbanding dengan CSS bukan BEM untuk mencapai sesuatu yang menjengkelkan, tetapi yang terbaik adalah konsistensi.

"BEM itu sendiri tidak mencukupi untuk membina UI dengan cara terbaik, kami menggabungkan BEM, CSS pertama mudah alih, penggunaan standard pengekodan SASS dan ketat yang sesuai. Kami tidak mendapatnya sempurna tetapi semakin baik. Kami juga baru-baru ini mula menggunakan SCSS-Lint untuk membantu menguatkuasakan piawaian pengekodan kami dan sedikit penggunaan BEM kami. "

Chris Wright on Smacss

"Kebanyakan cerita seram saya tidak benar -benar cerita seram tetapi tempat kesakitan. Saya telah menemui agensi -agensi yang benar -benar kerangka bootstrap berat yang ingin meneruskan dengan lebih banyak pendekatan OOCSS, yang baik -baik saja (OOCSS juga cukup baik) - tetapi cuba meyakinkan seseorang yang menggunakan pendekatan yang datang dengan rangka kerja tertentu untuk sedikit Laraskan metodologi mereka untuk projek mereka yang tidak menggunakan rangka kerja adalah hujah yang sia -sia untuk dimiliki. Jadi saya terpaksa meninggalkannya dalam kes tersebut. Kelemahan terbesar Smacss yang saya katakan sebenarnya adalah kurang diterima secara meluas daripada BEM atau OOCSS - nampaknya lebih sedikit orang yang mendengarnya.

"Kisah peribadi saya sendiri dengan melaksanakannya tidak benar -benar mematuhi titik metodologi. Sangat mudah untuk jatuh ke perangkap "modul semua perkara", dan lupa bahawa kategori yang dicadangkan adalah tepat, cadangan. Bahagian yang paling sukar adalah memahami apa yang layak dalam setiap kategori. Adakah butang utama yang digunakan secara global adalah modul yang dipanggil .m-BTN-Primary? Atau adakah perkara itu hidup dalam modul? Ia boleh mengelirukan apabila anda mula menggunakan metodologi, dan dalam hal SMACSS di mana anda jelas menentukan perkara seperti susun atur, modul, dan tema; Saya telah mengalami beberapa situasi di mana saya terpaksa berhenti dan berfikir di mana sesuatu yang dimiliki, tetapi itu juga positif bagi saya, dan maksudnya kita mahu lebih banyak kelas yang teratur yang boleh dibaca dan difahami oleh orang ramai. "

Josh Hunt on Bem
"Kali pertama menggunakan BEM akan lebih kerap daripada tidak menjadi mimpi ngeri. Kali pertama saya saya membuat .classes__about__five__levels__deep. BEM tidak sepatutnya menjadi pemetaan satu-ke-satu struktur DOM kepada nama kelas.

"Apa yang saya dapati sukar untuk memohon BEM adalah apabila anda memerlukan unsur -unsur tambahan semata -mata untuk gaya, seperti .wrapper atau .inner. Ia tidak benar -benar betul untuk mempunyai .article__inner (dalaman bukan elemen artikel). Kadang-kadang anda boleh kreatif dengan kata-kata yang anda pilih (div.article__media img.article__img), tetapi masa-masa lain ia baik-baik saja untuk "memecahkan" bem dan pergi. Article-Wrapper atau. Article-Inner.

Hamish Taplin di Bem

"Saya fikir cabaran terbesar dengan BEM adalah wujud dalam abstraksi - sukar untuk mendapatkan kepala anda kadang -kadang. Ia memerlukan tahap perancangan untuk melihat corak yang boleh dicabut dan kadang -kadang anda perlu refactor apabila anda tidak melihat perkara pertama kali. Ini biasa dalam pembangunan walaupun dan perancangan dan pengalaman dapat membantu banyak.

"Satu lagi titik melekat ialah ia memerlukan kawalan penuh ke atas markup -sesuatu yang boleh menjadi sukar jika anda bekerja di persekitaran (seperti .NET) di mana ini tidak selalu mungkin."

Harry Roberts di Bem

"Kerana penamaan BEM hanya Goodidea ™, sangat jarang anda akan mendengar cerita -cerita seram. Yang paling dekat yang boleh saya fikirkan berlaku dengan pelanggan saya yang sangat hebat pada awal tahun ini. Mereka adalah pasukan yang sangat rajin yang telah melakukan banyak penyelidikan dan membaca ke dalam seni bina CSS yang lebih baik, dan mereka membawa saya selama seminggu untuk mencuba dan menyiram mana -mana tempat yang kasar. Salah satu tempat paling kasar adalah dengan pelaksanaan penamaan BEM mereka. Malangnya, mereka akan membaca artikel (yang, demi kepentingan tidak mengekalkan, saya tidak akan menghubungkan ke sini) yang memberikan nasihat yang benar -benar buruk mengenai penamaan BEM. Maklumat yang cacat pada asasnya hanya salah. Pelanggan mengikuti nasihat ini kepada surat itu dan ia membawa mereka ke dalam beberapa masalah sebenar. Perkara -perkara yang lebih kusut dan saling berkaitan berbanding sebelum ini -sesuatu yang menamakan Bem dimaksudkan untuk menyelesaikannya! Walau bagaimanapun, itu satu -satunya kejadian yang saya sedar. "

Bob Donderwinkel di Bem

"Baiklah saya tidak akan menyebutnya cerita seram dengan tepat;) Tetapi saya membuat alat perancah BEM kecil yang dipanggil Kabem. Kesalahan yang saya buat di sana menggunakan nama kelas BEM CSS dengan pelbagai elemen (seperti block__element__element). Terutamanya kerana ia membantu dalam menghasilkan struktur folder bersarang yang baik berdasarkan nama kelas CSS. Pada dasarnya saya menangkap struktur HTML dalam nama kelas CSS, tetapi itu sebenarnya menjadikan BEM sedikit lebih tegar, yang tidak diperlukan.

"Satu lagi gotcha kecil ialah pemilih BEM CSS bersarang seperti yang anda boleh lakukan dengan SASS atau kurang sebenarnya menambah kekhususan CSS di mana ia tidak diperlukan. BEM berfungsi dengan baik sebagai nama kelas tunggal, jadi itu mungkin sesuatu yang perlu diingat. "

Kesimpulan

Selepas melalui tindak balas dan idea semua orang, jelas bahawa pendekatan terbaik seolah -olah menjadi hibrid. Baca segala -galanya, berikan kedua -dua BEM dan SMACSS pergi dengan minda terbuka dan lihat sama ada CSS dan alur kerja anda bertambah baik. Anda tidak perlu memilih satu metodologi; Menggabungkan konsep beberapa metodologi ke dalam satu yang berfungsi untuk anda dan pasukan anda. Sekiranya anda memerlukan bantuan, terdapat banyak pemaju di luar sana yang bersedia berkongsi beberapa pemikiran dan nasihat.

Kredit

terima kasih yang sangat besar kepada pemaju berikut yang cukup baik untuk melepaskan masa mereka untuk menjawab soalan saya dan berkongsi pendapat dan pengalaman mereka:

• Alec Raeside - Laman Web, Twitter
• Bob Donderwinkel - Laman Web, Twitter
• Chris Wright - Laman Web, Twitter
• Hamish Taplin - Laman Web, Twitter
• Harry Roberts - Laman Web, Twitter
• Josh Hunt - Laman Web, Twitter

soalan yang sering ditanya mengenai bem dan smacss

Apakah perbezaan utama antara BEM dan SMACSS? BEM adalah konvensyen penamaan yang menjadikan CSS lebih mudah dibaca dan difahami, sementara SMACSS adalah panduan gaya yang menyediakan peraturan untuk organisasi CSS. BEM memberi tumpuan kepada perwakilan visual laman web ini, sementara SMACSS memberi tumpuan kepada struktur dan susun atur. BEM menggunakan konvensyen penamaan khusus untuk kelas, manakala SMACSS mengkategorikan gaya menjadi lima jenis: asas, susun atur, modul, negeri, dan tema. Skalabilitas dengan menyediakan struktur yang jelas dan mudah difahami untuk CSS anda. Ia menggunakan konvensyen penamaan khusus yang menjadikannya mudah untuk mengenal pasti hubungan antara unsur -unsur yang berbeza dan blok induk mereka. Ini menjadikannya lebih mudah untuk mengurus dan skala kod CSS yang besar, kerana ia mengurangkan kemungkinan penamaan konflik dan menjadikan kod lebih mudah dibaca dan difahami. SMACSS menyediakan satu set garis panduan untuk menganjurkan CSS anda, yang boleh menjadikan kod anda lebih cekap dan lebih mudah untuk dikekalkan. Ia menggalakkan anda untuk mengkategorikan gaya anda, yang boleh menjadikan CSS anda lebih modular dan boleh diguna semula. SMACSS juga menggalakkan penggunaan peraturan negeri, yang boleh memudahkan untuk menguruskan gaya dinamik di CSS anda. bersama. BEM boleh digunakan sebagai konvensyen penamaan dalam kerangka SMACSS. Ini dapat memberi manfaat kepada kedua -dua metodologi, dengan BEM menjadikan CSS anda lebih mudah dibaca dan difahami, dan SMACSS menyediakan pendekatan berstruktur untuk menganjurkan CSS anda.

Bagaimanakah BEM mengendalikan kekhususan CSS?

BEM mengendalikan kekhususan CSS dengan menggalakkan penggunaan kelas dan bukannya ID untuk gaya. Ini mengurangkan kekhususan pemilih anda, menjadikan CSS anda lebih mudah untuk mengurus dan mengatasi. BEM juga tidak menggalakkan penggunaan pemilih bersarang, yang boleh meningkatkan kekhususan dan menjadikan CSS anda lebih sukar untuk mengekalkan. Struktur CSS anda. Ia menggalakkan penggunaan kelas melalui ID dan tidak menggalakkan penggunaan pemilih bersarang. Ini membantu mengekalkan kekhususan yang rendah, menjadikan CSS anda lebih mudah untuk mengurus dan mengatasi. nama kelas panjang dan kompleks. Ini boleh menjadikan HTML dan CSS lebih sukar untuk dibaca dan difahami. Walau bagaimanapun, ini dapat dikurangkan dengan menggunakan preprocessor seperti sass atau kurang, yang dapat membantu mengurus dan mempermudahkan kelas BEM anda. Cabaran melaksanakan SMACSS adalah bahawa ia memerlukan pemahaman yang baik tentang CSS dan amalan terbaiknya. Ia juga memerlukan pendekatan berdisiplin untuk menulis dan mengatur CSS anda. Walau bagaimanapun, sebaik sahaja anda mendapat sambutan hangat, SMACSS boleh menjadikan CSS anda lebih cekap dan lebih mudah untuk dikekalkan. Reka bentuk berasaskan, kerana ia menggalakkan penggunaan blok, yang boleh dianggap sebagai komponen individu. Setiap blok adalah bebas dan boleh digunakan semula di seluruh laman web anda. Ini menjadikan BEM pilihan yang baik untuk laman web yang menggunakan pendekatan reka bentuk berasaskan komponen.

Bagaimana SMACSS mengendalikan reka bentuk berasaskan komponen? Modul adalah komponen mandiri yang boleh digunakan semula di seluruh laman web anda. Ini menjadikan SMACSS pilihan yang baik untuk laman web yang menggunakan pendekatan reka bentuk berasaskan komponen.

Atas ialah kandungan terperinci Bem dan smacss: nasihat dari pemaju yang ' telah berada di sana. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!