(Phần 2) Tìm hiểu về BEM - CSS hiệu quả với Sass Mixin

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:

.menu {
    ...

    &__item {
        ...
    }

    &--fixed {
        ...
    }
}

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

.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') {
        ...
    }
}

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') {
        ...
    }
}

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.

Tổng kết

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.