Lời giới thiệu hay nhất về BEM là từ Harry Roberts:
BEM - có nghĩa là khối, phần tử, phần bổ trợ - là một phương pháp đặt tên giao diện người dùng do những người ở Yandex nghĩ ra. Đó là một cách thông minh để đặt tên cho các lớp CSS của bạn để giúp chúng minh bạch hơn và có ý nghĩa hơn đối với các nhà phát triển khác. Chúng nghiêm ngặt và nhiều thông tin hơn, điều này làm cho quy ước đặt tên BEM trở nên lý tưởng cho các nhóm nhà phát triển trên các dự án lớn hơn có thể tồn tại trong một thời gian.
Kể từ Sass 3.3, chúng ta có thể viết những thứ như sau:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Miễn là các quy tắc CSS ngắn và bộ chọn cơ sở đơn giản, khả năng đọc vẫn ổn. Nhưng khi mọi thứ trở nên phức tạp hơn, cú pháp này khiến bạn khó hiểu chuyện gì đang xảy ra. Vì điều này, chúng tôi có thể bị cám dỗ để xây dựng hai hỗn hợp trình bao bọc cho cú pháp BEM của chúng tôi:
/// Block Element /// @access public /// @param (String) $element - Element's name @mixin element($element) ( &__#($element) ( @content; ) ) /// Block Modifier /// @access public /// @param (String) $modifier - Modifier's name @mixin modifier($modifier) ( &--#($modifier) ( @content; ) )Viết lại ví dụ trước của chúng tôi với các mixin hoàn toàn mới của chúng tôi:
.block ( /* CSS declarations for `.block` */ @include element('element') ( /* CSS declarations for `.block__element` */ ) @include modifier('modifier') ( /* CSS declarations for `.block--modifier` */ @include element('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )Lưu ý rằng dấu ngoặc kép xung quanh chuỗi là tùy chọn, chúng tôi chỉ thêm chúng để dễ đọc hơn.
Bây giờ, nếu bạn cảm thấy thích elementvà modifierquá dài để nhập, bạn có thể tạo hai bí danh ngắn hơn như sau:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Sử dụng bí danh:
.block ( /* CSS declarations for `.block` */ @include e('element') ( /* CSS declarations for `.block__element` */ ) @include m('modifier') ( /* CSS declarations for `.block--modifier` */ @include e('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )