รู้เบื้องต้นเกี่ยวกับระเบียบวิธี BEM

ระเบียบวิธี BEM คืออะไร?

เมื่อคุณสร้างเว็บไซต์ขนาดเล็ก วิธีการจัดระเบียบสไตล์ของคุณมักจะไม่ใช่ปัญหาใหญ่ คุณสร้างไฟล์ตามปกติของคุณ เขียน CSS ที่จำเป็นทั้งหมด และนั่นคือทั้งหมด อย่างไรก็ตาม เมื่อพูดถึงโปรเจ็กต์ที่ใหญ่กว่าและซับซ้อนกว่า วิธีจัดระเบียบโค้ดของคุณจึงกลายเป็น สิ่งสำคัญ วิธีจัดโครงสร้างโค้ดมีความสำคัญยิ่งขึ้นไปอีกหากคุณทำงานในทีมที่ประกอบด้วยนักพัฒนาส่วนหน้าและส่วนหลังหลายราย

ปัจจุบัน มีวิธีการมากมายที่มีจุดประสงค์เพื่อลดโค้ด CSS และทำให้โค้ด CSS ของคุณมีการบำรุงรักษามากขึ้น ในบทความนี้ ฉันจะอธิบายและให้ตัวอย่างหนึ่งในนั้น: BEM BEM ย่อมาจาก B lock E lement M odifier แนวคิดหลักเบื้องหลังคือการเร่งกระบวนการพัฒนา และทำให้การทำงานเป็นทีมของนักพัฒนาง่ายขึ้นโดยการจัดคลาส CSS เป็นโมดูลอิสระ หากคุณเคยเห็นชื่อคลาสเช่น header__form--search นั่นคือ BEM ในการดำเนินการ ใช่ คลาสสามารถตั้งชื่อได้ยาวมาก แต่คลาสทั้งหมดสามารถอ่านและเข้าใจได้

แนวทางปฏิบัติที่ดีที่สุดคือการใช้ BEM กับคลาสเท่านั้น ไม่ใช่ ID เนื่องจากคลาสอนุญาตให้คุณทำซ้ำชื่อได้หากจำเป็น และสร้างโครงสร้างการเข้ารหัสที่สอดคล้องกันมากขึ้น นอกจากนี้ หากคุณต้องการแบ่งเว็บไซต์ของคุณออกเป็นโมดูลที่มีการจัดระเบียบ เว็บไซต์ควรประกอบด้วยโครงสร้างเดียวกัน ได้แก่ บล็อก องค์ประกอบ และตัวแก้ไข โดยที่แต่ละบล็อกสามารถมีหลายองค์ประกอบได้ และทั้งบล็อกและองค์ประกอบสามารถมีตัวปรับแต่งได้หลายตัว อย่างไรก็ตาม เรามาเริ่มกันที่โครงสร้าง BEM พื้นฐานก่อน และอธิบายด้วยตัวอย่าง

ปิดกั้น

บล็อกแสดงถึงวัตถุในเว็บไซต์ของคุณ คิดว่ามันเป็นส่วนโครงสร้างที่ใหญ่กว่าของโค้ดของคุณ บล็อกที่พบบ่อยที่สุดในทุกๆ เว็บไซต์ในปัจจุบัน ได้แก่ ส่วนหัว เนื้อหา แถบด้านข้าง ส่วนท้าย และการค้นหา บล็อกใน BEM เป็นจุดเริ่มต้นของการเชื่อมโยงคลาส CSS ของคุณไว้เสมอ ดูตัวอย่างบล็อกบางส่วน:

• เนื้อหา
• เมนู
• แบบฟอร์มการค้นหา

 .content {/* Styles */} .menu {/* Styles */} .search {/* Styles */}

องค์ประกอบ

องค์ประกอบเป็นส่วนประกอบภายในบล็อกที่ทำหน้าที่เฉพาะ ควรมีเหตุผลในบริบทของบล็อกเท่านั้น:

• บทความเนื้อหา
• รายการเมนู
• ช่องป้อนข้อมูลการค้นหา

 .content__article {/* Styles */} .menu__item {/* Styles */} .search__input {/* Styles */}

ตัวดัดแปลง

ตัวดัดแปลงคือวิธีที่เราแสดงรูปแบบต่างๆ ของบล็อก หากคุณเคยใช้ Bootstrap ตัวอย่างที่ดีที่สุดคือขนาดปุ่ม ขนาดปุ่มเป็นเพียงการเปลี่ยนแปลงขนาดของปุ่มเอง ซึ่งทำให้เป็นตัวปรับแต่ง:

• บทความแนะนำเนื้อหา
• ลิงค์เมนู
• ช่องค้นหาที่มีหรือไม่มีไอคอน

 .content__article--featured {/* Styles */} .menu__item--link {/* Styles */} .search__input--icon {/* Styles */}

อนุสัญญาการตั้งชื่อ

วัตถุประสงค์หลักของวิธีการ BEM คือการตั้งชื่อตัวเลือก CSS ให้เป็นข้อมูลและโปร่งใสที่สุด รูปแบบ BEM ดั้งเดิมถูกกำหนดในลักษณะนี้:

ชื่อ บล็อก มักจะเป็นคำเดียว เช่น .header แต่ถ้าคุณมีคำจำกัดความบล็อกที่ยาวกว่า ชื่อนั้นจะถูกแบ่งด้วยยัติภังค์เดียว - :

 .lang-switcher {/* Styles */}

ชื่อ องค์ประกอบ เริ่มต้นด้วยขีดล่างสองครั้ง __ :

 .lang-switcher__flag {/* Styles */}

ชื่อ ตัวแก้ไข เริ่มต้นด้วยขีดล่างเดียว _ :

 .lang-switcher__flag_basic {/* Styles */}

มีกฎเกณฑ์ที่สำคัญมากเพียงกฎเดียวเท่านั้นในระเบียบวิธี BEM - ตัวปรับแต่งไม่สามารถใช้นอกบริบทของเจ้าของได้

ตัวอย่าง:

 .btn_big {/* Styles */}

คุณสามารถใช้ btn_big ก็ต่อเมื่อมีการกำหนดส่วนหัวด้วย

ตัวอย่างที่ไม่ดี:

 <div class=”btn_big”>...</div>

ตัวอย่างที่ดี:

 <div class=”btn btn_big”>...</div>

นอกจากรูปแบบ BEM ดั้งเดิมแล้ว ยังมีรูปแบบการตั้งชื่อแบบอื่น เช่น สไตล์ Harry Roberts และ CamelCase

ตัวอย่างสไตล์ Harry Roberts:

 .block-name__element-name--modifier-name {/* Styles */}

ตัวอย่างสไตล์ CamelCase:

 .BlockName__ElementName_ModifierName {/* Styles */}

มีอีกไม่กี่คนเช่นกัน แต่สองคนนี้เป็นเรื่องธรรมดาที่สุด โดยส่วนตัวแล้ว ฉันชื่นชอบหลักการตั้งชื่อที่เสนอโดย Harris Roberts ซึ่งมีกฎเกณฑ์ดังต่อไปนี้:

• ชื่อเขียนด้วยตัวพิมพ์เล็ก
• คำที่อยู่ในชื่อของเอนทิตี BEM คั่นด้วยยัติภังค์ -
• ชื่อองค์ประกอบแยกจากชื่อบล็อกด้วยเครื่องหมายขีดล่างคู่ __
• ตัวแก้ไขบูลีนคั่นด้วยยัติภังค์คู่ --
• ไม่ใช้ตัวดัดแปลงประเภทคีย์-ค่า

เหตุผลที่รูปแบบการตั้งชื่อนี้มีรูปแบบที่ดีกว่าแบบอื่นมาก เพราะคุณสามารถแยกแยะองค์ประกอบตัวปรับแต่งจากองค์ประกอบอื่นๆ ได้อย่างง่ายดาย ในการตั้งชื่อแบบแผนดั้งเดิม ตัวดัดแปลงจะถูกกำหนดดังนี้:

 .block__element_modifier {/* Styles */}

แต่อย่างที่คุณเห็น ไม่มีความแตกต่างระหว่างขีดล่างเดี่ยวและคู่ ในทางกลับกัน ยัติภังค์คู่ให้การแยกที่ชัดเจน และคุณสามารถเห็นตัวแก้ไขได้ทันที:

 .block__element--modifier {/* Styles */}

ตัวอย่าง BEM ในรูปแบบต่างๆ

โปรดทราบว่านอกจาก CSS แล้ว BEM ยังมีประโยชน์มากในการจัดระเบียบ JSON, XML, ไฟล์ทรี หรือรูปแบบใดๆ ที่สนับสนุนการซ้อน คิดว่าวิธีการของ BEM เป็นวิธีที่ดีในการสร้าง UI ของคุณ

ลองพิจารณา HTML ต่อไปนี้ ซึ่งมีโครงสร้างในรูปแบบ BEM:

 <header class=”header”> <img class=”header__logo”> <form class=”header__search-from”> <input class=”header__search-from__input” type=”input”> <button class=”header__search-from__button” type=”button”> </form> <div class=”header__lang-switcher”></div> </header>

สามารถทำได้เช่นเดียวกันโดยใช้รูปแบบ JSON และ XML

XML:

 <block:header> <block:logo/> <block:search-from> <block:input/> <block:button/> </block> <block:lang-switcher/> </block>

เจสัน:

 { block: 'header', content: [ { block: 'logo' }, { block: 'search-form', content: [ { block: 'input' }, { block: 'button' } ] }, { block: 'lang-switcher' } ] }

การจัดระบบไฟล์ของโครงการ BEM

ใน BEM การจัดระเบียบไฟล์ของคุณในลักษณะที่ถูกต้องเป็นสิ่งสำคัญ BEM ไม่เพียงแต่มอบการจัดระเบียบคลาส CSS ที่ยอดเยี่ยมและทำให้พวกเขาเข้าใจได้อย่างสมบูรณ์ แต่ยังให้โครงสร้างไฟล์ที่ดูแลรักษาได้ดีมาก ลองมาดูตัวอย่างโครงการโดยใช้เทคนิคการจัดระเบียบไฟล์ BEM กับไฟล์ SASS:

 blocks/ input/ __box/ --big/ input__box--big.scss input__box.scss button/ --big/ button--big.scss

ดังที่คุณเห็นด้านบน เพียงแค่เห็นโครงสร้างโฟลเดอร์ย่อยภายในโฟลเดอร์หลักของคุณ ทุกอย่างก็ชัดเจนและเป็นระเบียบ ด้วยวิธีนี้ จึงไม่มีความแตกต่างกันว่าใครทำงานตามคุณหรือถ้าคุณกำลังทำงานหลังจากใครสักคน เพราะมันง่ายอย่างเหลือเชื่อที่จะทำตามรูปแบบเดียวกัน

แบ่งโครงการ BEM ออกเป็นแพลตฟอร์ม

นอกจากการจัดระเบียบไฟล์ของคุณโดยใช้เทคนิควิธีการ BEM แล้ว คุณยังสามารถทำสิ่งต่างๆ ที่เฉพาะเจาะจงมากขึ้นได้อีกด้วย ตัวอย่างเช่น หากคุณกำลังสร้างโปรเจ็กต์เว็บที่จะตอบสนองได้อย่างเต็มที่ และลูกค้าระบุว่าบล็อกบางส่วนบนมือถือนั้นแตกต่างจากอุปกรณ์เดสก์ท็อปโดยสิ้นเชิง การแบ่งโครงสร้างโฟลเดอร์ BEM ของคุณออกเป็นแพลตฟอร์มจะเป็นการดีที่สุด ตัวอย่างการจัดระเบียบปุ่มบนแพลตฟอร์มต่างๆ:

 common.blocks/ button/ button.scss desktop.blocks/ button/ buttons.scss mobile.blocks/ button/ button.scss

โปรดทราบว่านี่เป็นเพียงตัวอย่าง หากคุณต้องการจัดระเบียบทั้งโครงการโดยใช้วิธีการ BEM โครงสร้างไฟล์ที่มีโครงสร้าง BEM ไม่จำเป็นต้องใช้ BEM อย่างถูกต้อง คุณสามารถใช้ BEM ได้เฉพาะในบางส่วนของโครงการ จนถึงตอนนี้ฉันยังไม่เคยใช้การจัดโครงสร้างไฟล์ BEM ที่เข้มงวดซึ่งทุกองค์ประกอบและตัวแก้ไขมีไฟล์ที่สร้างขึ้น แต่ฉันแค่สร้างโครงสร้างไฟล์สำหรับบล็อกที่มีการประกาศองค์ประกอบและตัวปรับแต่ง

BEM ในทางปฏิบัติ

เนื่องจากตอนนี้คุณคุ้นเคยกับหลักการตั้งชื่อแล้ว ฉันจะสาธิตวิธี BEM ในทางปฏิบัติ สมมติว่าเรามีโค้ด HTML นี้ในการดำเนินการ:

 <a class=”btn btn--big btn--primary-color” href=”#” title=”Title”> <span class=”btn__price”>$3.99</span> <span class=”btn__text”>Product</span> </a>

ด้วยการใช้มาร์กอัป CSS ต่อไปนี้:

 .btn__price {/* Styles */} .btn__text {/* Styles */} .btn--big {/* Styles */} .btn--primary-color {/* Styles */}

ตอนนี้อย่าหลงทาง ในตัวอย่างของเราจนถึงตอนนี้ เรามักจะมีบล็อก องค์ประกอบ และตัวปรับแต่ง ซึ่งไม่จำเป็นต้องเป็นอย่างนั้นเสมอไป

ตัวอย่างเช่น สมมติว่าเรามีบล็อกชื่อ person คนมีขาและมืออาจเป็นหญิงหรือชายก็ได้ หากเราต้องการกำหนดผู้ชายด้วยมือขวาจะมีลักษณะดังนี้:

 .person--male__hand--right {/* Styles */}

ตอนนี้คุณสามารถเห็นความหมายที่แท้จริงของ BEM เรากำหนดบุคคลที่ปรับเปลี่ยนเป็นเพศ เนื่องจากไม่สำคัญว่าคนจะเป็นชายหรือหญิง มีมือ และมือเป็นองค์ประกอบ และอีกครั้งแต่ละคนสามารถมีมือขวาหรือมือซ้ายซึ่งเป็นตัวปรับแต่งได้อีก

ในอีกกรณีหนึ่ง หากเราต้องการกำหนดบุคคลทั่วไปด้วยมือเดียว เราจะทำดังนี้:

 .person__hand {/* Styles */}

ดังที่คุณสังเกตได้ เมื่อคุณคุ้นเคยกับ BEM แล้ว การวางโครงสร้างโครงสร้าง CSS และ HTML ของคุณนั้นทำได้ง่ายมาก

การใช้ BEM กับตัวประมวลผลล่วงหน้า CSS

โดยส่วนตัวแล้ว ฉันไม่สามารถจินตนาการถึงการเริ่มต้นโครงการใหม่โดยไม่ต้องใช้ตัวประมวลผลล่วงหน้า CSS ตัวใดตัวหนึ่ง อย่างที่ทราบกันดีว่าพรีโพรเซสเซอร์นั้นยอดเยี่ยมและให้ประโยชน์มากมายแก่เรา และที่สำคัญที่สุดคือมันเข้ากันได้อย่างสมบูรณ์แบบกับวิธีการของ BEM

ในตัวอย่างต่อไปนี้ คุณสามารถดูตัวอย่างทั่วไปที่สุดของ BEM ร่วมกับ SASS:

 .person { &__hand {/* Styles */} &__leg {/* Styles */} &--male { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } &--female { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } }

รหัส SASS จะคอมไพล์เป็น CSS ต่อไปนี้:

 .person__hand {/* Styles */} .person__leg {/* Styles */} .person--male {/* Styles */} .person--male__hand {/* Styles */} .person--male__hand--left {/* Styles */} .person--male__hand--right {/* Styles */} .person--male__leg {/* Styles */} .person--male__leg--left {/* Styles */} .person--male__leg--right {/* Styles */} .person--female {/* Styles */} .person--female__hand {/* Styles */} .person--female__hand--left {/* Styles */} .person--female__hand--right {/* Styles */} .person--female__leg {/* Styles */} .person--female__leg--left {/* Styles */} .person--female__leg--right {/* Styles */}

หากคุณต้องการไปไกลกว่านี้ คุณสามารถใช้มิกซ์อิน SASS ที่มีประโยชน์สำหรับ BEM:

 /// Block Element /// @param {String} $element - Element's name @mixin element($element) { &__#{$element} { @content; } } /// Block Modifier /// @param {String} $modifier - Modifier's name @mixin modifier($modifier) { &--#{$modifier} { @content; } }

และคุณสามารถใช้สิ่งนี้:

 .person { @include element('hand') {/* Person hand */} @include element('leg') {/* Person leg */} @include modifier('male') { /* Person male */ @include element('hand') { /* Person male hand */ @include modifier('left') { /* Person male left hand */ } @include modifier('right') { /* Person male right hand */ } } } }

ซึ่งจะให้ผลลัพธ์ CSS ต่อไปนี้:

 .person__hand { /* Person hand */ } .person__leg { /* Person leg */ } .person--male { /* Person male */ } .person--male__hand { /* Person male hand */ } .person--male__hand--left { /* Person male left hand */ } .person--male__hand--right { /* Person male right hand */ }

ฉันรู้ว่าเป็นไปได้มากที่คุณจะไม่มี Use Case นานขนาดนี้ แต่นี่เป็นตัวอย่างที่ดีของวิธีการใช้ BEM และเหตุใดจึงมีประสิทธิภาพมาก ทั้งในโครงการขนาดเล็กและขนาดใหญ่

เริ่มโครงการ BEM ของคุณ

ตามที่อธิบายไว้ในเอกสาร BEM อย่างเป็นทางการ วิธีที่ง่ายที่สุดในการเริ่มต้นโครงการ BEM ใหม่ของคุณคือการใช้ที่เก็บ GIT ที่มีอยู่ เพียงใช้คำสั่งโคลน Git:

 $ git clone https://github.com/bem/project-stub.git

จากนั้นไปที่ไดเร็กทอรีที่สร้างขึ้นใหม่และติดตั้งการพึ่งพาทั้งหมด:

 $ npm install

การอ้างอิงที่จำเป็นทั้งหมดจะถูกติดตั้ง:

สร้างโครงการโดยใช้ ENB:

 $ node_modules/.bin/enb make

เรียกใช้โหมดเซิร์ฟเวอร์เพื่อการพัฒนา:

 $ node_modules/.bin/enb server

เป็นผลให้ข้อความต่อไปนี้ปรากฏขึ้น:

 Server started at 0.0.0.0:8080

ตอนนี้หมายความว่าเซิร์ฟเวอร์เริ่มทำงานแล้ว คุณสามารถตรวจสอบผลลัพธ์ได้จากที่อยู่นี้:

 http://localhost:8080/desktop.bundles/index/index.html

อย่างที่คุณเห็น มีองค์ประกอบมากมายที่สร้างไว้แล้วซึ่งกำหนดไว้ในไฟล์ bemjson ซึ่งอยู่ที่นี่:

 project-stub/desktop.bundles/index/index.bemjson.js

คุณสามารถดูและสำรวจโครงสร้างปัจจุบันของไฟล์ที่สร้าง HTML ทั้งหมดนั้น ซึ่งคุณจะเห็นที่ไฟล์ localhost index.html ของคุณ เราจะแก้ไขไฟล์นี้เพื่อรับโปรเจ็กต์ "บุคคล" BEM ซึ่งเราได้อธิบายไว้ในบทที่แล้ว คุณสามารถลบ (หรือแสดงความคิดเห็น) โค้ดทั้งหมดจากไฟล์ index.bemjson.js และแทนที่ด้วยโค้ดนี้:

 module.exports = { block: 'page', title: 'Person BEM', favicon : '/favicon.ico', head : [ { elem : 'meta', attrs : { name : 'description', content : '' } }, { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } }, { elem : 'css', url : 'index.min.css' } ], scripts: [{ elem : 'js', url : 'index.min.js' }], content: [ { block: 'person', content: [ { elem: 'male', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Male person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Male person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Male person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Male person hand -- right' } ] }, { elem: 'female', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Female person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Female person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Female person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Female person hand -- right' } ] }, ] } ] };

ตอนนี้ HTML ต่อไปนี้จะถูกสร้างขึ้น:

 <div class="person"> <div class="person__male"> <div class="person__leg person__leg_side_left"> Male person leg -- left </div> <div class="person__leg person__leg_side_right"> Male person leg -- right </div> <div class="person__hand person__hand_side_left"> Male person hand -- left </div> <div class="person__hand person__hand_side_right"> Male person hand -- right </div> </div> <div class="person__female"> <div class="person__leg person__leg_side_left"> Female person leg -- left </div> <div class="person__leg person__leg_side_right"> Female person leg -- right </div> <div class="person__hand person__hand_side_left"> Female person hand -- left </div> <div class="person__hand person__hand_side_right"> Female person hand -- right </div> </div> </div>

ดังที่คุณเห็นจากโค้ดด้านบน มีการใช้รูปแบบการเข้ารหัส BEM เริ่มต้นในสถานการณ์นี้ เนื่องจากเราเพียงแค่ใช้การตั้งค่าเริ่มต้นที่ BEM มอบให้เรา มีคำสั่งและตัวเลือกอีกมากมายที่คุณสามารถสำรวจและใช้งาน เช่น การสร้างหน้าใหม่ บล็อก หรือแก้ไข BEM HTML ฉันจะไม่ลงลึกในเรื่องนี้มากเกินไป และทั้งหมดนี้สามารถพบได้ในเอกสารอย่างเป็นทางการของ BEM

ข้อดีและข้อกังวล

ข้อดี

• BEM นั้นยอดเยี่ยมสำหรับการบำรุงรักษา มีกี่ครั้งที่คุณต้องทำงานตามหลังใครบางคนในโครงการขนาดใหญ่และคุณแค่กลัวเกินไปที่จะเปลี่ยนแปลงอะไรโดยที่สิ่งที่ไม่รู้จักพังทลาย? เมื่อใช้ BEM คุณจะทราบจุดประสงค์ที่แท้จริงขององค์ประกอบและบล็อกที่อาจปรากฏขึ้น
• ชื่อคลาสมีเหตุผลและเข้าใจง่าย และสมาชิกทุกคนในทีมรู้ว่าองค์ประกอบนั้นทำอะไรบนเว็บไซต์ BEM ให้ทุกคนในโครงการมีรูปแบบการประกาศที่พวกเขาสามารถแบ่งปันเพื่อให้พวกเขาอยู่ในหน้าเดียวกัน
• BEM กำจัดตัวเลือก CSS ที่ซ้อนกัน องค์ประกอบ HTML ทุกองค์ประกอบมีคลาส CSS ของตัวเอง และด้วยชื่อองค์ประกอบ คุณรู้จุดประสงค์ของมัน ตัวเลือกเดียวที่จะปกครองพวกเขาทั้งหมด

ความกังวลและข้อผิดพลาดทั่วไป

• อย่าทำรังลึกเกินไป กฎหลักไม่ควรใช้มากกว่าสองระดับของผู้ปกครองและเด็ก
• ระวังด้วยที่คุณเริ่มขอบเขตบล็อกของคุณ ข้อผิดพลาดทั่วไปที่นี่คือเมื่อนักพัฒนาใช้บล็อก แต่เขาไม่ทราบว่าในช่วงหลังของการพัฒนาบล็อกเดียวกันจะมีบล็อกหลักหลักซึ่งอาจทำลายกฎด้วยการซ้อน
• หลีกเลี่ยง SASS @extend หากต้องการอ้างอิง Harry Roberts เกี่ยวกับสิ่งนี้:

คุณสามารถสร้างชุดค่าผสมจำนวนมากขึ้นในมุมมองโดยไม่ต้อง 'ผูก' คลาสเข้าด้วยกันใน Sass HTML มีเส้นทางเดินกระดาษที่ดีกว่ามาก เพราะคุณสามารถเห็นทุกชั้นเรียนทำงานบน DOM CSS ของคุณมีขนาดเล็กกว่ามาก โดยที่คุณไม่ต้องสร้างคลาสตัวยึดตำแหน่งใหม่ (หรือคลาสรายการซึ่งรวมเข้าด้วยกัน) ทุกครั้งที่คุณต้องการสร้าง UI ชิ้นใหม่

บทสรุป

เมื่อฉันเห็นรูปแบบการเข้ารหัส BEM เป็นครั้งแรก ความคิดแรกของฉันคือ:

ชั้นเรียนเหล่านี้ยาวเกินไปที่จะเขียนและอ่าน

แต่หลังจากที่ได้ลองใช้แล้ว ตอนนี้ฉันนึกไม่ออกว่าจะเริ่มโครงการใหม่โดยไม่ได้ใช้งาน สำหรับฉัน BEM ได้ปรับปรุงความสามารถในการบำรุงรักษาโค้ดของฉันอย่างมาก และฉันสามารถพูดได้อย่างแน่นอนว่านักพัฒนาทุกคนที่จะถูก "โยน" ลงในโปรเจ็กต์ที่ใช้ BEM จะตามทันโครงสร้างโค้ดทั้งหมดอย่างรวดเร็ว

แม้จะมีทั้งหมดนี้ แต่ก็มีการพูดคุยกันมากมายบนโซเชียลเน็ตเวิร์กเกี่ยวกับ BEM บางคนบอกว่า BEM ไม่ดี สงสัยว่าทำไมพวกเขาจึงควรเขียนคลาสชื่อยาวเช่นนี้ แทนที่จะใช้องค์ประกอบที่ซ้อนกันของ HTML เริ่มต้น ไม่มีใครบอกว่าคุณต้องชอบ BEM แต่ความจริงก็คือนักพัฒนาส่วนหน้าส่วนใหญ่ยอมรับและพบว่ามีประโยชน์เป็นพิเศษ