Giới thiệu về BEM – A Front end Methodology (Phần 2)

573

Tóm tắt những kiến thức đã học được về BEM ở phần 1

  • BEM là gì?
  • Tại sao lại dùng BEM?
  • Ai đang dùng BEM?
  • BEM sử dụng như thế nào?

Với đặc trưng kiểu đặt tên cho class của BEM như vậy thì khi viết Sass, viết như thế nào để đạt hiểu quả, trong phần 2 này chúng ta sẽ cùng đi tìm giải pháp cho việc này

Chúng ta hoàn toàn có thể viết như thế này:

Kết quả render ra css tên class sẽ là:

Nhưng khi cấu trúc của block lớn lên thì cách viết trên sẽ trở nên khó để dễ nhìn, vậy thì hãy cải thiện với mixin:

Kết quả render ra css nhận được là như nhau, nhưng cách viết đã được cải thiện bằng mixin nên rõ ràng là dễ nhìn hơn

Tuy là code đã dễ đọc hơn nhưng cách đặt tên mixin làm chúng ta phải gõ nhiều ký tự hơn, vậy thì thử đổi tên mixin thành kiểu alias cho ngắn gọn: element -> e, ‘modifier’ -> m

Tên mixin vẫn ngữ nghĩa để đọc là hiểu, vừa đảm bảo không phải gõ nhiều ký tự của tên mixin.

Kết luận

Với cách viết tên class của BEM tuy hơi dài nhưng ngữ nghĩa, hướng module, dễ hiểu, đặc biệt đối với dự án lớn.

Techtalk via Viblo

CHIA SẺ