- vừa được xem lúc

Naming BEM - Block Element Modifier

0 0 62

Người đăng: Dương Linh

Theo Viblo Asia

1. Overview

  • BEM (Block-Element-Modifier) là một quy ước đặt tên CSS được phát triển bởi team tại Yandex để cải thiện khả năng mở rộng và khả năng bảo trì trong phát triển web
  • Nói một cách đơn giản, ý tưởng của BEM là chia giao diện người dùng thành các khối độc lập bằng cách đặt tên cho các lớp CSS theo phương pháp sau:
/* Block component */
.card {}
/* Elements are dependent on their parent block */ .card__img {}
/* Modifiers are for incremental style changes */
.card--dark {} .card__img--large {}
  1. Block: Là một thành phần độc lập có thể được sử dụng lại. (VD: class .nav)
  2. Element: Là một thành phần con trong một block không thể được sử dụng riêng biệt với block đó. (VD: class .nav__item)
  3. Modifier: Là sự thay đổi style css của block hoặc element (VD: class .nav--dark, nav__item--circle)

2. Blocks

  • Là các khối có thể tái sử dụng, giống như button, card, hoặc field trong form
  • Khi đặt tên Block, cần tập trung vào việc mô tả mục đích của nó (Nó là gì) thay vì trạng thái của nó (VD: Nó trông như thế nào)
  • Ví dụ: .btn hoặc .nav tuân theo quy ước đặt tên chính xác cho một block. .big hoặc .bright-pink mô tả cách nó trông như thế nào, vì vậy sẽ không mở rộng quy mô tốt khi bạn muốn thay đổi thiết kế sau này.
<!-- INCORRECT -->
<div class="large-red-box"> <img src="..."> <h2>...</h2> <p>...</p> <a>...</a>
</div>
<style> .large-red-box {}
</style>
<!-- CORRECT -->
<div class="card"> <img src="..."> <h2>...</h2> <p>...</p> <a>...</a>
</div>
<style> .card {}
</style>
  • Nếu bạn đang tự hỏi làm thế nào để đặt tên các block lồng nhau (ví dụ: một button nằm trong nav) bài viết này sẽ giúp bạn làm điều đó.

3. Elements

  • Các element nằm bên trong block, phụ thuộc vào block cha của chúng, do đó không thể sử dụng nếu không có block.
  • Các element cũng có một quy ước đặt tên lớp CSS duy nhất hoạt động như sau: .block__element
  • Ví dụ: Sử dụng thành phần .card, một phần tử bên trong thành phần thẻ (như image) sẽ có tên lớp như .card__img.
  • Tên element luôn nối với tên block, được phân tách bằng dấu gạch dưới kép __.
<!-- INCORRECT -->
<div class="card"> <img src="..."> <h2>...</h2> <p>...</p> <a>...</a>
</div>
<style> .card {} .card img {} .card h2 {} .card p {} .card a {}
</style>
<!-- CORRECT -->
<div class="card"> <img class="card__img" src="..."> <h2 class="card__title" >...</h2> <p class="card__description" >...</p> <a class="card__button">...</a>
</div>
<style> .card {} .card__img {} .card__title {} .card__description {}
</style>
  • Thực hiện theo cách tiếp cận này làm giảm nguy cơ xảy ra các sự cố xuống dòng.
  • Nếu bạn đang thắc mắc về cách xử lý các phần tử BEM được lồng sâu 3 hoặc 4 lớp, hãy xem bài viết về chủ đề này.

4. Modifiers

  • Khi bạn có nhiều kiểu khác nhau trong các khối (hoặc element), đó là lúc các công cụ sửa đổi xuất hiện.
  • Ví dụ: khối card của bạn có thể có màu lightdark. Hoặc bạn có thể có các button chính và phụ.
  • Modifier có một quy ước đặt tên CSS duy nhất hoạt động như sau: block--modifier hoặc block__element--modifier.
  • Đúng vậy modifier có thể được áp dụng cho cả block và element.
  • Hãy xem VD đặt tên tốt và không tốt:
<!-- INCORRECT -->
<div class="card--dark"> <img src="..."> <h2 class="card__title--large">...</h2> <p>...</p> <a>...</a>
</div>
<style> .card--dark {} .card__title--large {}
</style>
  • Việc sử dụng riêng một lớp (tức là không có block hoặc element) được coi là không tốt.
  • Đó là bởi vì modifier có nghĩa là để thêm các thay đổi vào block.
  • Do đó, bất cứ khi nào sử dụng modifier, hãy đảm bảo rằng nó được sử dụng với lớp cơ sở:
<!-- CORRECT -->
<div class="card card--dark"> <img src="..."> <h2 class="card__title card__title--large">...</h2> <p>...</p> <a>...</a>
</div>
<style> .card {} .card--dark {} .card__title {} .card__title--large {}
</style>
  • Đó là những nguyên tắc cơ bản giúp bạn bắt đầu và hoạt động với BEM.
  • Nếu bạn muốn tìm hiểu thêm về BEM, tôi khuyên bạn nên xem bài viết Thủ thuật CSS này.
  • Giống như học bất cứ điều gì mới, thực hành là chìa khóa. Hãy thử áp dụng BEM trong dự án tiếp theo của bạn và xem nó sẽ đưa bạn đến đâu!

5. Let's practice

Trong phần này tôi sẽ triển khai một alert message theo cấu trúc BEM

  • Ở đây tôi tạo block alert để chứa các element alert__icon, alert__body, alert__close .
<div class="alert"> <div class="alert__icon"> <i class="fas fa-check-circle"></i> </div> <div class="alert__body"> <h3 class="alert__title">Title</h3> <p class="alert__msg">Message</p> </div> <div class="alert__close"> <i class="fas fa-times"></i> </div>
</div>
  • Style cho các element một chút nào
.alert { display: flex; align-items: center; background-color: #fff; border-radius: 2px; padding: 20px 0; border-left: 4px solid; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.08);
}
.alert + .alert { margin-top: 24px;
}
.alert__icon { font-size: 24px; padding: 0 16px;
}
.alert__close { padding: 0 16px; font-size: 20px; color: rgba(0, 0, 0, 0.3); cursor: pointer;
}
.alert__body { flex-grow: 1;
}
.alert__title { font-size: 16px; font-weight: 800; color: #333;
}
.alert__msg { font-size: 14px; color: #888; margin-top: 6px; line-height: 1.5;
}
  • Hình ảnh sau khi style

  • Tiếp theo sẽ tạo class Modifier cho alert: alert--success, alert--info, alert--warning, alert--danger

<div class="alert alert--success"></div>
<div class="alert alert--info"></div>
<div class="alert alert--warning"></div>
<div class="alert alert--danger"></div>
  • Style css cho class modifier
.alert--success { border-color: #47d864;
}
.alert--success .alert__icon { color: #47d864;
}
.alert--info { border-color: #2f86eb;
}
.alert--info .alert__icon { color: #2f86eb;
}
.alert--warning { border-color: #ffc021;
}
.alert--warning .alert__icon { color: #ffc021;
}
.alert--danger { border-color: #ff623d;
}
.alert--danger .alert__icon { color: #ff623d;
}

6. Reference

Bình luận

Bài viết tương tự

- vừa được xem lúc

5 Điều nên tránh khi viết css

Giới thiệu. Chào các bạn, mình đã quay trở lại rồi đây. Lần này mình sẽ chia sẽ với các bạn 5 điều nên tránh khi viết css nha. 1.

0 0 15

- vừa được xem lúc

[Front-end Developer] Một vài mẹo để viết code CSS chuyên nghiệp hơn

Để tiếp tục với phần 1 của bài viết [Front-end Developer] Viết CSS sao cho chuẩn không cần chỉnh thì ở bài viết này mình xin chia sẻ một vài bí kíp nữa để chúng ta có thể nâng cao trình độ CSS của bản thân lên một tầm mới =)). 1.

0 0 25

- vừa được xem lúc

[Front-end Developer] Viết CSS sao cho chuẩn không cần chỉnh

Đôi nhời phát biểu. Trong quá trình phát triển các sản phẩm phần mềm, mình thấy việc chú ý đến code conventions(các nguyên tắc chung khi lập trình làm cho code dễ hiểu, dễ đọc và dễ bảo trì) khá là quan trọng.

0 0 15

- vừa được xem lúc

Tìm hiểu về BEM trong 15 phút

Tài liệu BEM do mình soạn thảo https://docs.google.com/document/d/1r7E_M03LZp_0LJFD6E7Qcdg74mP-ue76E2GzlIMe4Uk/edit. 1.

0 0 15

- vừa được xem lúc

BEM và Pug - Cách mà mình bắt đầu với Frontend

Bạn đã bao giờ đau đầu vì không thể nghĩ nổi 1 cái tên vừa tường minh vừa không bị trùng cho class CSS chưa? Mình thì rồi đấy, và BEM đúng là cứu tính của mình. Tất nhiên đấy không phải tất cả công dụ

0 0 31

- vừa được xem lúc

Cách kết hợp BEM, SASS và Bootstrap một cách ăn ý

Giới Thiệu. Chào mọi người, đối với những người mới học về BEM, SASS và Bootstrap như mình thì không khỏi bối rối khi muốn kết hợp cả ba một cách ăn ý.

0 0 33