Home Coding BEM CSS คืออะไร? พร้อมวิธีการใช้

BEM CSS คืออะไร? พร้อมวิธีการใช้

Danai Phianphutthikorn

Last updated 4 months ago,

1 mins read

เชื่อว่า Front-end Developer หลายคนคงเคยประสบกับปัญหาการตั้งชื่อ Class หรือการนำ CSS ของคนอื่นมาทำงานต่อ เพราะแต่ละคนก็จะมีรูปแบบการเขียนที่แตกต่างกันจึงยากที่จะเข้าใจ ด้วยเหตุนี้จึงมีกลุ่มคนที่พยายามสร้างมาตรฐานในการเขียน CSS ให้เป็นระเบียบ เข้าใจง่ายขึ้น และนั้นก็เป็นที่มาของ BEM CSS ที่เราจะมาพูดถึงในวันนี้ครับ

BEM CSS คืออะไร

BEM ย่อมาจาก Block, Element, Modifier เป็น Front-end Naming Methodology หรือวิธีการตั้งชื่อ Class อย่างเป็นระบบเพื่อที่จะทำให้เราสามารถไล่โค้ดได้ง่าย ลดความซ้ำซ้อนของโค้ด การตั้งด้วยวิธี BEM CSS จะดูจากหน้าที่ของ HTML Element นั้นๆ แบ่งออกเป็น 3 แบบ ด้วยกัน ได้แก่ Block, Element และ Modifier

.block { }

.block__element { }

.block--modifier { }

.block__element--modifier { }

.block--modifier__element { }Code language: CSS (css)

ในการเขียน BEM CSS จะมีการใช้สัญลักษณ์ __ (underscore 2 ตัว) และ -- (dashes 2 ตัว) ในการเขียน CSS Selector หัวใจหลักของการเขียน BEM CSS ก็คือ การเขียน Selector เป็น .class ทั้งหมด ซึ่งเราจะไม่เขียนด้วย #id เพราะจะทำให้ไม่ยืดหยุ่น และไม่สามารถนำไปใช้งานต่อได้

Block ใน BEM CSS คืออะไร

Block คือ HTML Element ที่ครอบ Element ต่างๆ หรือกล่องอะไรก็ตามที่อยู่ได้โดยอิสระ เช่น Topbar, Button, Badges เป็นต้น

.topbar {}

.button {}

.badge {}Code language: CSS (css)

Element ใน BEM CSS คืออะไร

Element คือ HTML Element ที่อยู่ภายใต้ Block ยกตัวอย่างเช่น Topbar ประกอบด้วย Logo และ Menu ในการเขียน BEM CSS เราจะใช้สัญลักษณ์ __ (underscore 2 ตัว) ในการกั้นระหว่าง Block และ Element แบบนี้

.topbar {}

.topbar__logo {}

.topbar__menu {}Code language: CSS (css)

Modifier ใน BEM CSS คืออะไร

Modifier คือ สิ่งที่จะทำให้ Block หรือ Element มีสไตล์เฉพาะตัว เช่น Button ที่สถานะ Active, Disable, Primary, Warning หรืออื่นๆ ในการเขียน BEM CSS เราจะใช้สัญลักษณ์ -- (dashes 2 ตัว) ใส่ให้กับ Block หรือ Element แบบนี้

.button {}

.button--active {}

.button--disable {}Code language: CSS (css)

นำ BEM CSS มาใช้ร่วมกับ SCSS หรือ SASS อย่างไร

ปัจจุบัน SCSS ถือเป็นเครื่องมือยอดนิยมที่เหล่า Front-end Developer ใช้ในการเขียน CSS แต่เราจะหยิบเอา BEM CSS มาประยุกต์ใช้อย่างไรล่ะ โชคดีที่ตั้งแต่ SASS เวอร์ชั่น 3.3 ขึ้นไป ช่วยให้การนำ BEM CSS มาใช้งานได้ง่ายขึ้น โดยเพื่อนๆ สามารถนำไปใช้ได้ง่ายๆ ตามนี้

.block {
    /* CSS declarations for `.block` */

    &__element {
        /* CSS declarations for `.block__element` */
    }

    &--modifier {
        /* CSS declarations for `.block--modifier` */

        &__element {
            /* CSS declarations for `.block--modifier__element` */
        }
    }
}Code language: SCSS (scss)

สรุป

BEM CSS ช่วยให้การเขียน และการอ่านโค้ด CSS ง่ายสะดวกขึ้น แต่ในช่วงแรกๆ อาจจะดูแปลกๆ และนำไปปรับใช้กันไม่ถูก ทั้งนี้ก็ขึ้นอยู่กับการฝึกฝน และนำไปใช้งานบ่อยๆ ครับ

อ้างอิง: