BEM – A Front end Methodology là gì?

: Blogs; Blogs công nghệ

BEM là gì?

Để ngắn gọn, xúc tích và dễ hiểu nhất thì mình định nghĩa BEM với 1 vài gạch đầu dòng như sau:

BEM là 1 phương thức viết tên class trong HTML, CSS
BEM được tạo bởi 1 team của Yandex.
BEM là viết tắt của từ Block, Element, Modifier
Mục đích của BEM là đem lại cách viết hiệu quả tên class trong HTML theo hướng module, cũng như là viết CSS theo 1 cách có tổ chức và hiệu quả.

Tại sao lại dùng BEM?

Khi đọc tên class trong HTML ta cũng có thể hiểu ngay class đó sẽ là gì? làm gì? bình thường nếu 1 class có tên .item thì nhìn vào sẽ chưa hiểu ngay được item này của block nào, phải nhìn ngược ra thành phần ngoài mới xác định được, đối với 1 block HTML lồng nhiều cấp thì tìm rất tốn thời gian. Nhưng nếu như ta đặt tên là .social__item thì khi đó nhìn vào sẽ hiểu ngay rằng đây là item của block social.
Khi áp dụng BEM thì code CSS sẽ không phải lồng selector nhiều cấp nữa.
=> Không phải là

  .menu { ... }
    .menu .item { ... }
    .menu .item.active { ... }

. menu { . . . }

. menu . item { . . . }

. menu . item . active { . . . }

=> Mà sẽ là

= > Mà sẽ là

    .menu { ... }
    .menu__item { ... }
    .menu__item--active { ... }

. menu { . . . }

. menu_ _item { . . . }

. menu__item -- active { . . . }

Ai đang dùng BEM?

Cùng điểm qua 1 vài website và xem cách họ áp dụng BEM vào tên class trong HTML, CSS.

Airbnb

airbnb

Material Design Lite

mdl

CSS Wizardry

csswizardry

Jetbrains

jet_brain

BEM sử dụng như thế nào?

Everything is a class and nothing is nested

Phương châm hoạt động của BEM là ở HTML tất cả nên là class (không nên dùng id) và trong CSS không có thứ gì phải lồng vào.

Hãy xem qua ví dụ dưới đây để hiểu cách áp dụng BEM vào HTML, CSS và SASS:

Cách HTML đặt tên class

<a class="btn btn--orange" href="#">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

< a class = "btn btn--orange" href = "#" >

< span class = "btn__price" > $ 9.99 < / span >

< span class = "btn__text" > Subscribe < / span >

< / a >

Cách CSS style

/* Block */
.btn { ... }
.btn__price { ... }
.btn__text { ... }
.btn--orange { ... }

/* Block */

. btn { . . . }

. btn_ _price { . . . }

. btn_ _text { . . . }

. btn -- orange { . . . }

Cách SASS style

.btn {
    ...
    &__price { ... }
    &__text { ... }
    &--orange { ... }
}

. btn {

. . .

& __price { . . . }

& __text { . . . }

& -- orange { . . . }

}

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:

.menu {
    ...

    &__item {
        ...
    }

    &--fixed {
        ...
    }
}

. menu {

. . .

& __item {

. . .

}

& -- fixed {

. . .

}

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

.menu { ... }
.menu__item { ... }
.menu--fixed { ... }

. menu { . . . }

. menu_ _item { . . . }

. menu -- fixed { . . . }

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:

/// Block Element
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}
/// Block Modifier
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}
/// Rewriting our previous example with our brand new mixins
.menu {
    ...

    @include element('item') {
        ...
    }

    @include modifier('fixed') {
        ...
    }
}

/// Block Element

@ mixin element ( $ element ) {

& __ #{$element} {

@ content ;

}

/// Block Modifier

@ mixin modifier ( $ modifier ) {

& -- #{$modifier} {

@ content ;

}

/// Rewriting our previous example with our brand new mixins

. menu {

. . .

@ include element ( 'item' ) {

. . .

}

@ include modifier ( 'fixed' ) {

. . .

}

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

/// @alias element
@mixin e($element) {
    &__#{$element} {
        @content;
    }
}
/// @alias modifier
@mixin m($modifier) {
    &--#{$modifier} {
        @content;
    }
}
/// Rewriting our previous example with our brand new mixins alias
.menu {
    ...

    @include e('item') {
        ...
    }

    @include m('fixed') {
        ...
    }
}

/// @alias element

@ mixin e ( $ element ) {

& __ #{$element} {

@ content ;

}

/// @alias modifier

@ mixin m ( $ modifier ) {

& -- #{$modifier} {

@ content ;

}

/// Rewriting our previous example with our brand new mixins alias

. menu {

. . .

@ include e ( 'item' ) {

. . .

}

@ include m ( 'fixed' ) {

. . .

}

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.

Viblo

Có thể bạn quan tâm:

DVMS chuyên:

* Viết ứng dụng cho smartphone và máy tính bảng: iPhone, iPad , Android, Tablet, Windows Phone, Blackberry, Uber app, Grab app, mạng xã hội, vận tải thông minh, thực tế ảo, game mobile,...
* Viết ứng dụng tìm và đặt xe, các hệ thống theo mô hình kinh tế chia sẻ, uber for x, ứng dụng giúp việc,...
* Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
* Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup, ...

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>