BEM คืออะไร (Block, Element, Modifier) ​​และใช้กับ Drupal Emulsify Twig ได้อย่างไร

เผยแพร่แล้ว: 2022-11-08

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

วิธีการ BEM (Block, Element, Modifier) ​​เป็นรูปแบบการตั้งชื่อที่ใช้กันอย่างแพร่หลายสำหรับคลาส CSS ที่ได้รับความนิยมเนื่องจากความสะดวกในการใช้งานที่มีให้ แนวคิดพื้นฐานของ BEM คือการพัฒนาเว็บแบบคอมโพเนนต์ BEM ทำให้การพัฒนาอินเทอร์เฟซทำได้ง่ายและรวดเร็ว โดยเฉพาะอย่างยิ่งเมื่อคุณจัดการโครงการขนาดใหญ่ที่มี UI ที่ซับซ้อน มาสำรวจเพิ่มเติมเกี่ยวกับ BEM และวิธีการทำงานกับโมดูล Drupal Emulsify Twig กัน

BEM .คืออะไร

มีการแนะนำวิธีการ BEM เพื่อช่วยให้คลาส CSS เข้าถึง ทำความเข้าใจ และปรับขนาดได้ง่ายขึ้น มันสามารถเร่งกระบวนการพัฒนาและช่วยสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้

BEM ประกอบด้วยสามส่วน:

  1. ปิดกั้น
  2. ธาตุ
  3. ตัวดัดแปลง

ปิดกั้น

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

คุณสมบัติ:

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

ตัวอย่าง:

 <div class=”icon-button”></div>

ธาตุ

องค์ประกอบเป็นรายการย่อยของบล็อก แต่ละองค์ประกอบสามารถมีได้เพียงบล็อกเดียวและไม่สามารถใช้ภายนอกได้ ตัวอย่าง: รายการเมนู รายการ รายการ ช่องป้อนข้อมูล ฯลฯ

คุณสมบัติ:

  • ชื่อองค์ประกอบ (คลาส) ควรอธิบายจุดประสงค์ (ชื่อ คำอธิบายภาพ) ไม่ใช่สถานะขององค์ประกอบ (เล็ก/แดง)
  • องค์ประกอบและบล็อกถูกคั่นด้วยเครื่องหมายขีดล่างคู่ (__) เช่นนี้: block-name__element-name.

ตัวอย่าง:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

ตัวดัดแปลง

ชื่อคลาสที่คุณสามารถกำหนดลักษณะที่ปรากฏ สถานะ หรือพฤติกรรมของบล็อกหรือองค์ประกอบ ตัวอย่าง: แดง ใหญ่ พิการ ตายตัว ฯลฯ

คุณสมบัติ:

  • ชื่อตัวแก้ไขอธิบายลักษณะที่ปรากฏ ตัวอย่างเช่น หากลักษณะที่ปรากฏคือ “_large” คลาสตัวแก้ไขจะเป็น icon-button__title_large
  • ตัวแก้ไขแยกจากบล็อกหรือองค์ประกอบด้วยขีดล่างเดียว (_)

ตัวอย่าง:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

ประเภทของตัวดัดแปลง

1. บูลีน

คุณสามารถตรวจสอบเงื่อนไขของค่าบูลีนและตั้งค่าเป็นตัวแปรได้ ตัวแปรนี้สามารถส่งผ่านเป็นค่าตัวแก้ไขได้

2. คีย์-ค่า

โครงสร้างของชื่อเต็มของตัวแก้ไขพร้อมคีย์-ค่าจะเป็นไปตามรูปแบบใดรูปแบบหนึ่งต่อไปนี้

  1. block-name_modifier-name_modifier-value
  2. block-name__element-name_modifier-name_modifier-value

อนุสัญญาการตั้งชื่อ: กฎและแบบแผน

มีรูปแบบการตั้งชื่อที่แตกต่างกัน แผนทั้งหมดมีกฎทั่วไปบางอย่างเช่น:

  • ชื่อเขียนด้วยอักษรละตินตัวพิมพ์เล็ก
  • คำคั่นด้วยยัติภังค์ (-)

1. แผนการตั้งชื่อแบบคลาสสิก

รูปแบบการตั้งชื่อแบบคลาสสิกคือรูปแบบการตั้งชื่อเริ่มต้นของ BEM

Block-name__elem-name_mod-name_mod-val

  • ชื่อองค์ประกอบและชื่อบล็อกคั่นด้วยเครื่องหมายขีดล่างคู่ (__)
  • ชื่อตัวแก้ไขและชื่อบล็อกหรือองค์ประกอบแยกจากกันด้วยขีดล่างเดียว (_)
  • ค่าตัวแก้ไขและชื่อตัวแก้ไขจะถูกคั่นด้วยขีดล่างเดียว (_)

2. สไตล์การตั้งชื่อสองขีด

block-name__elem-name--mod-name--mod-val

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

3. รูปแบบการตั้งชื่อ CamelCase

blockName-elemName_modName_modVal

  • แต่ละคำหลังคำแรกจะขึ้นต้นด้วยตัวพิมพ์ใหญ่
  • บล็อก อิลิเมนต์ และโมดิฟายเออร์ใช้ในลักษณะเดียวกับในโครงร่างการตั้งชื่อมาตรฐาน

4. ตอบสนองรูปแบบการตั้งชื่อ

BlockName-ElemName_modName_modVal

  • ชื่อบล็อกและชื่อองค์ประกอบขึ้นต้นด้วยตัวพิมพ์ใหญ่
  • ชื่อของตัวแก้ไขจะขึ้นต้นด้วยอักษรตัวพิมพ์เล็ก
  • ชื่อองค์ประกอบและชื่อบล็อกคั่นด้วยยัติภังค์เดียว (-)
  • ชื่อและค่าของโมดิฟายเออร์แยกจากกันในลักษณะเดียวกับในโครงร่างมาตรฐาน

BEM ใน Drupal พร้อม Emulsify Twig module

ใน Drupal เราสามารถใช้ฟังก์ชัน BEM Twig ด้วยความช่วยเหลือของโมดูล Emulsify Twig ฟังก์ชัน BEM ให้คุณสร้างคลาส BEM บนองค์ประกอบในส่วนประกอบ ด้านล่างนี้คือส่วนขยาย BEM Twig และการใช้งาน

1. ชื่อบล็อกอย่างง่าย (อาร์กิวเมนต์ที่จำเป็น):

<div {{ bem('icon') }}>

สิ่งนี้สร้าง:

<div class="icon">

2. บล็อกด้วยตัวดัดแปลง:

หากคุณต้องการเพิ่มตัวแก้ไขหลายตัว คุณสามารถทำได้โดยใช้อาร์เรย์

<div {{ bem('icon', ['small', 'red']) }}>

สิ่งนี้สร้าง:

<div class="icon icon-–small icon-–red">

3. องค์ประกอบที่มีตัวดัดแปลงและชื่อบล็อก (ไม่บังคับ):

<div {{ bem('icon', ['small', 'red'], 'icon-button') }}>

สิ่งนี้สร้าง:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red">

4. องค์ประกอบที่มีชื่อบล็อก แต่ไม่มีตัวดัดแปลง (ตัวเลือก):

<div {{ bem('icon', '', 'icon-button') }}>

สิ่งนี้สร้าง:

<div class="icon-button__icon">

5. องค์ประกอบที่มีชื่อบล็อก ตัวดัดแปลง และคลาสพิเศษ:

<div {{ bem('icon', ['small', 'red'], 'icon-button', ['js-click', 'something-else']) }}>

สิ่งนี้สร้าง:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-click something-else">

6. องค์ประกอบที่มีคลาสพิเศษเท่านั้น (ไม่บังคับ):

<div {{ bem('icon', '', '', ['js-click']) }}>

สิ่งนี้สร้าง:

<div class="icon js-click">

เพิ่มคุณสมบัติ Twig Extension

ฟังก์ชัน Add attributes Twig ช่วยให้คุณสามารถเพิ่มแอตทริบิวต์ HTML ให้กับองค์ประกอบของส่วนประกอบของคุณได้ ดูฟังก์ชัน Add Attributes ด้านล่าง:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

ความคิดสุดท้าย

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