อะไรทำให้ BEM ดีกว่าการใช้ภาษาชีทสไตล์ที่สามารถซ้อนได้เช่น LESS

เพื่อนร่วมงานของฉันกำลังผลักดันวิธีการ BEM ( Block Element Modifier ) สำหรับ CSS ในโครงการที่เขากำลังช่วยเหลือและฉันไม่สามารถเข้าใจได้ว่าอะไรทำให้ดีกว่า LESS CSS ที่เราเขียนมาหลายปี

เขาอ้างว่า "ประสิทธิภาพที่สูงขึ้น" แต่ฉันไม่สามารถจินตนาการได้ว่าประสิทธิภาพจะมีความสำคัญต่อแอพพลิเคชั่นบนเว็บชนิดใดที่เราเขียนในร้านรหัสนี้ เราไม่ได้สร้าง Twitter หรือ Facebook ที่นี่ ฉันจะแปลกใจมากถ้าแอปที่ใช้งานสูงสุดของเรามียอดดาวน์โหลดมากกว่า 10,000 ครั้งต่อเดือนและส่วนใหญ่ต่ำกว่า 1,000 รายการ

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

เขาอ้างว่า "CSS ที่ซ้อนกันเป็นรูปแบบต่อต้าน" "anti-pattern" หมายถึงอะไรและทำไม CSS ที่ซ้อนกันไม่ดี?

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

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

เพื่อนร่วมงานของฉันกำลังผลักดันวิธีการ BEM (Block Element Modifier) ​​สำหรับ CSS ในโครงการที่เขากำลังช่วยเหลือและฉันไม่สามารถเข้าใจสิ่งที่ทำให้ดีกว่า LESS CSS ที่เราเขียนมาหลายปี

BEM เป็นวิธีการ CSS อื่น ๆ ได้แก่ OOCSS และ SMACSS วิธีการเหล่านี้ใช้ในการเขียนโค้ดแบบขยายได้และสามารถนำกลับมาใช้ใหม่ได้

LESS เป็นตัวประมวลผลล่วงหน้า CSS อื่น ๆ ได้แก่ Sass และ Stylus ตัวประมวลผลล่วงหน้าเหล่านี้ใช้เพื่อแปลงแหล่งข้อมูลที่เกี่ยวข้องเป็น CSS แบบขยาย

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

เขาอ้างว่า "ประสิทธิภาพสูง" ...

ประสิทธิภาพจะต้องมีการวัดระหว่างสไตล์ CSS คลาสสิกของ:

.widget .header

และรูปแบบ BEM ของ:

.widget__header

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

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

เขาอ้างว่า "การอ่าน" และ "ใช้ซ้ำ" ...

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

เห็นชั้นเรียนเช่น

.foo--bar__baz

บอกฉันว่ามีfooบล็อกที่อยู่ในbarสถานะและมีbazองค์ประกอบ

ฉันจะบอกว่า BEM นั้นสามารถใช้ซ้ำได้มากกว่าแบบคลาสสิก

หากผู้พัฒนาสองคนสร้างบล็อก ( fooและbar) และทั้งสองบล็อกนั้นมีส่วนหัวพวกเขาสามารถนำบล็อกของพวกเขากลับมาใช้ใหม่ได้อย่างปลอดภัยในบริบทที่แตกต่างกันโดยไม่ต้องกังวลว่าจะมีการตั้งชื่อชนกัน

นั่นเป็นเพราะในบริบทที่คลาสสิก.foo .headingและ.bar .headingจะขัดแย้งและแนะนำความขัดแย้งเฉพาะที่จะต้องได้รับการแก้ไขอาจจะเป็นกรณี ๆ ไป

ในไซต์ BEM คลาสจะเป็น.foo__headingและ.bar__headingซึ่งจะไม่ขัดแย้งกัน

เขาอ้างว่า "CSS ที่ซ้อนกันเป็นรูปแบบต่อต้าน" "anti-pattern" หมายถึงอะไรและทำไม CSS ที่ซ้อนกันไม่ดี?

"anti-pattern" เป็นรูปแบบการเข้ารหัสที่ง่ายขึ้นสำหรับนักพัฒนาที่ไม่มีประสบการณ์ในการเรียนรู้และใช้งานมากกว่าทางเลือกที่เหมาะสมกว่า

ตราบใดที่ CSS ที่ซ้อนกันไม่ดี: การทำรังจะเพิ่มความเฉพาะเจาะจงของตัวเลือก ยิ่งมีความเฉพาะเจาะจงมากเท่าไหร่ก็ยิ่งพยายามมากเท่านั้น นักพัฒนาที่ไม่มีประสบการณ์มักจะกังวลว่า CSS ของพวกเขาอาจส่งผลกระทบหลายหน้าดังนั้นพวกเขาจึงใช้ตัวเลือกดังนี้:

#something .lorem .ipsum .dolor ul.sit li.amet a.more

เมื่อนักพัฒนาที่มีประสบการณ์จะกังวลว่า CSS ของพวกเขาอาจไม่ส่งผลกระทบต่อหลาย ๆ หน้าดังนั้นพวกเขาจึงใช้ selector เช่น:

.more

เขาอ้างว่า "ทุกคนกำลังมุ่งสู่การใช้ BEM ดังนั้นเราควรทำเช่นกัน" ...

นั่นคือการเข้าใจผิดของ bandwagonดังนั้นให้เพิกเฉยว่านี่เป็นข้อโต้แย้งที่ไม่ดี อย่าตกหลุมกับการเข้าใจผิดเนื่องจากการโต้แย้งที่ไม่ดีในการสนับสนุน BEM ไม่ใช่เหตุผลที่เชื่อได้ว่า BEM ไม่ดี

มีคนช่วยอธิบายรายละเอียดสิ่งที่ทำให้ BEM ดีกว่า LESS บ้างไหม

ฉันกล่าวถึงเรื่องนี้มาก่อน BEM & LESS นั้นไม่เทียบเท่ากัน แอปเปิ้ลและส้ม ฯลฯ

เพื่อนร่วมงานของฉันไม่สามารถโน้มน้าวฉันได้ แต่ฉันไม่รู้ว่าฉันมีทางเลือก แต่ต้องทำตามหรือไม่

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

ฉันอยากจะชื่นชม BEM มากกว่าที่จะยอมรับมันอย่างไม่เต็มใจ

ผมเขียนคำตอบใน StackOverflow ที่อธิบายถึงวิธีการทำงานของ สิ่งสำคัญที่ต้องเข้าใจคือตัวเลือกอุดมคติของคุณควรมีความเฉพาะเจาะจง0-0-1-0เพื่อให้ง่ายต่อการแทนที่และขยาย

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

คุณอาจจะมีที่ไหน

.widget {
    .heading {
        ...
    }
}

ด้วย BEM คุณสามารถใช้:

.widget {
    &__heading {
        ...
    }
}

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

แก้ไข 2017

หากคุณกำลังอ่านสิ่งนี้ในปี 2560 shadow DOM และ shadow DOM polyfills รวมถึงส่วนประกอบจะช่วยแก้ปัญหาเหล่านี้ทั้งหมดในขณะที่รักษาโค้ดของคุณให้เล็กแน่นและแยกส่วน อย่าใช้ BEM บน IMO ของโครงการกรีนฟิลด์

แทนที่จะเป็น BEM เรามีเครื่องมือเช่น ViewEncapsulation, Polymer, StyledJSX, SASS Modules, Styled Components เป็นต้น

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

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

สิ่งนี้ทำให้โค้ดของคุณเป็นแบบแยกส่วนมากขึ้นเนื่องจากไม่ต้องคำนึงถึงการซ้อนกันอีกต่อไป

ไม่มี BEM

หากไม่มี BEM เราอาจเขียนสิ่งนี้:

<div class="widget">
  <a>Hello!</a>
  <ul>...</ul>
</div>

สไตล์ CSS มาตรฐานอาจมีลักษณะเช่นนี้:

.widget {
  border: 1px solid red;
}

.widget a {
  color: green;
}

สิ่งเดียวกันกับ SASS จะมีลักษณะเช่นนี้:

.widget {
  border: 1px solid red;
  a {
    color: green;
  }
}

หากคุณเป็นทีมเล็ก ๆ ที่ทุกคนสามารถโค้ด CSS ให้ได้มาตรฐานสูงและโครงการมีขนาดเล็กพอที่คุณสามารถรักษาความรู้ความเข้าใจไว้ได้ทั้งหมดนี่เป็นทางออกที่ดีและสมเหตุสมผล

ด้วย BEM

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

ตอนนี้ HTML ของเรามีรายละเอียดมากขึ้น:

<div class="widget">
  <a class="widget__anchor">Hello!</a>
  <ul class="widget__ul">...</ul>
</div>

CSS ของเราไม่มีตัวเลือกผู้สืบทอด:

.widget {
  border: 1px solid red;
}

.widget__anchor {
  color: green;
}

แต่ตอนนี้เราสามารถทำสิ่งนี้:

<div class="widget__2">
  <a class="widget__anchor">Hello!</a>
</div>

widget__anchor เป็นโมดูล ไม่น่าเป็นไปได้ที่คำจำกัดความอื่นของ. aspget__anchor จะปรากฏบนหน้าเว็บ

สมดุล:

BEM:

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

CSS มาตรฐาน (ซึ่งต้องอาศัยการใช้ตัวเลือกการสืบทอด):

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

วิธีที่สาม - องค์ประกอบจริง

หากคุณกำลังใช้บางอย่างเช่น React, Angular 2 หรือ framewords front-end ที่ทันสมัยอื่น ๆ คุณมีวิธีแก้ไขปัญหาอื่น คุณสามารถใช้เครื่องมือในการบังคับใช้การห่อหุ้ม

ตัวอย่างนี้ใช้ React และ StyledJSX แต่มีตัวเลือกมากมาย นี่คือเครื่องมือ:

const Widget = () => 
  <div>
    <a>Hello</a>
  </div>
  <style jsx>
    div {border:red }
    a { background: pink }
  </style>

จากนั้นคุณจะใช้ประโยชน์จากวิดเจ็ตใหม่เช่นนี้:

<Widget />

สไตล์ทั้งหมดที่ประกาศในวิดเจ็ตจะถูกห่อหุ้มและจะไม่นำไปใช้กับองค์ประกอบภายนอกองค์ประกอบ เรามีอิสระที่จะจัดแต่งทรงผมdivและaตรงไปตรงมาโดยไม่ต้องกังวลเกี่ยวกับการจัดแต่งทรงผมโดยไม่ตั้งใจบนหน้าเว็บ

ไม่มีวิธีที่สมบูรณ์แบบ IMHO เราควรได้รับส่วนที่ดีที่สุดของแต่ละวิธี (BEM, SMACSS, OOCSS, DRY) ใช้ SMACSS เพื่อจัดระเบียบโครงสร้างโฟลเดอร์ของคุณใน CSS- ของคุณโดยเฉพาะสำหรับการกำหนดระดับการแยกระดับตรรกะของ CSS ทั้งหมด แห้งเพื่อสร้างไลบรารียูทิลิตี้ของคุณหรืออาจเป็นตัวดัดแปลงไลบรารีทั่วไปที่จะใช้ในบางครั้งร่วมกับคลาสที่ใช้ BEM OOCSS สำหรับส่วนประกอบ และ BEM สำหรับชิ้นส่วนขนาดเล็กหรือส่วนประกอบย่อย ที่นั่นคุณสามารถกระจายความซับซ้อนและรับอิสระในการทำงานภายในทีมใหญ่

สิ่งใดเมื่อใช้โดยไม่เข้าใจความสำคัญของมันจะส่งผลเสีย

ในขณะที่ BEM เป็นวิธีการที่ดีสำหรับทีมใหญ่ แต่ก็มีข้อเสียเช่นกัน 1. บางครั้งทำให้ชื่อยาวมากในโครงสร้าง HTML ขนาดใหญ่ ส่งผลให้ไฟล์ CSS มีขนาดใหญ่ 2. สำหรับการซ้อน html ที่มากกว่า 2-3 ระดับจะทำให้ปวดหัวในการกำหนดชื่อ

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