SASS และ BEM

บทความนี้อธิบายเกี่ยวกับ SASS และ BEM

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

YouTube Video

SASS และ BEM

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

เนื่องจาก CSS โดยพื้นฐานเป็น ภาษาที่ไม่ได้บังคับใช้กฎการออกแบบ ถ้ายังคงเขียนไปเรื่อย ๆ อย่างเดิม ความพึ่งพาซึ่งกันและกันโดยไม่ได้ตั้งใจก็จะเพิ่มขึ้น

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

เหตุผลที่ CSS จัดการได้ยากง่ายมาก

CSS แบบตัวอย่างนี้อาจทำให้ ยากต่อการเข้าใจว่ามันจะทำงานอย่างไร เมื่อต้องย้อนกลับมาดูโค้ดในภายหลัง

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• ในตัวอย่างนี้คลาส .title เดียวกัน มีหน้าตาต่างกันขึ้นอยู่กับตำแหน่งที่วางไว้ ทำให้คุณไม่สามารถรู้ได้ทันทีว่าสไตล์แบบไหนจะถูกนำมาใช้กับ .title นี้
• ในลักษณะนี้ เมื่อ selector ลึกมากขึ้นและขึ้นอยู่กับ element แม่มากขึ้น CSS ก็จะเดายากขึ้นว่ามีผลต่ออะไรบ้าง และเสี่ยงต่อการเสียหายเมื่อมีการแก้ไข

BEM เป็นแนวทางการตั้งชื่อที่ 'แสดงบทบาทของแต่ละส่วนผ่านชื่อ'

BEM ย่อมาจาก Block / Element / Modifier และใส่ชื่อให้เห็นว่าแต่ละคลาสเป็นส่วนไหนของ component และมีสถานะอะไรอยู่

• Block คือ component ที่เป็นอิสระในตัวเอง
• Element คือส่วนประกอบย่อยภายใน Block
• Modifier แทนสถานะหรือการเปลี่ยนแปลงต่าง ๆ

1.card {}
2.card__title {}
3.card--highlighted {}

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

รูปแบบพื้นฐานของ HTML ที่ใช้ BEM

นี่คือตัวอย่าง UI แบบบัตร (card) ที่เขียนใน HTML โดยใช้ BEM

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

แค่ดูจากชื่อคลาสก็เข้าใจได้ว่าสิ่งนี้คือ 'component card', 'title ที่อยู่ภายใน' และ 'สถานะที่เน้น' นี่คือข้อดีที่ใหญ่ที่สุดของ BEM

แต่อย่างไรก็ดี BEM เพียงอย่างเดียวสามารถทำให้ CSS ยืดยาวได้

หากเขียน BEM ลงใน CSS ตรง ๆ โค้ดจะมีปริมาณมากขึ้น

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

ตรงนี้ถ้าใช้ SASS จะช่วยให้ โค้ดเป็นระเบียบและคงโครงสร้างไว้

แสดงโครงสร้าง BEM ได้อย่างเป็นธรรมชาติด้วย SASS แบบซ้อน

การซ้อนกันของ SASS จะสะท้อนถึงโครงสร้างของ BEM ได้โดยตรงในโค้ด

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& หมายถึง selector แม่และ ใช้ร่วมกับ BEM ได้อย่างดีเยี่ยม

CSS ที่ถูกสร้างขึ้นจาก SASS นี้

SASS ข้างบนเมื่อแปลงแล้วจะได้ CSS ประมาณนี้

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

แม้ว่าผลลัพธ์จะเหมือนเดิม แต่ ความซับซ้อนในการทำความเข้าใจของนักพัฒนาได้ลดลงอย่างมาก

ออกแบบการใช้ Modifier ให้ปลอดภัย

เนื่องจาก Modifier ใน BEM แทน 'สถานะ' เคล็ดลับคือควร จำกัดการใช้เฉพาะการเขียนทับ (override) เท่านั้น

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

การออกแบบจะมั่นคงขึ้นหากใช้ Modifier เป็น 'การเปลี่ยนแปลง' มากกว่าจะเป็น 'การเพิ่มเข้ามา'

จำกัดการซ้อนของ Element ไว้แค่หนึ่งระดับ

ใน BEM สิ่งสำคัญคือต้องไม่ซ้อน Element ลึกเกินไป

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Element หลายระดับ เช่น .card__header__title เป็น สัญญาณว่าควรแยก Block ออก

ตัวอย่างโครงสร้างไฟล์ SASS

สุดท้ายนี้ นี่คือตัวอย่างโครงสร้าง SASS ที่ใช้ได้จริงในโปรเจกต์

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

ถ้าจัดการแต่ละ component แบบ 1 block = 1 ไฟล์ จะมีโอกาสเสียหายน้อยลง

ตัวอย่าง card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

เพราะทุกอย่างถูกรวมอยู่ในขอบเขตนี้ การลบ เคลื่อนย้าย และนำกลับมาใช้ใหม่จึงง่ายขึ้น

สรุป

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

• BEM ตั้งชื่อเพื่อบอกความหมายและหน้าที่
• SASS ช่วยให้เขียนง่ายขณะรักษาโครงสร้าง
• การใช้ทั้งสองร่วมกันช่วยให้ CSS มีความเสียหายน้อยลง

มาเขียน CSS วันนี้ ให้ตัวคุณเองในอนาคตเข้าใจได้ง่ายกันเถอะ

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video