Tổ chức CSS với OOCSS, SMACSS và BEM

OOCSS là gì?

• OOCSS là một mô hình lập trình. OOCSS có thể hiểu cơ bản là CSS hướng đối tượng, do đó nó được hiểu rõ nhất trong bối cảnh lập trình hướng đối tượng.
• OOCSS tập trung tới tính linh hoạt, mô đun, các thành phần có thể thay thế.
• OOCSS tập trung vào các nguyên tắc trách duy nhất cơ bản nhất, tách biệt mối quan tâm, và nhiều hơn nữa của các khái niệm cơ bản của lập trình hướng đối tượng.

Đưa ra 1 ví dụ để cho thấy về những gì một CSS đối tượng hoạt động như thế nào, và lợi ích của việc sử dụng nó.

có 1 ví dụ đơn giản về việc sử dụng OOCSS như sau:

.media {}
.media .img {}
.media .img img {}
.media .imgExt {}
.bd {}

như bạn có thể thấy, class .media là một đối tượng, và mục đích là để làm cho rằng đối tượng độc lập với môi trường xung quanh của nó để nó có thể được đặt ở bất cứ đâu trong trang web của bạn.

SMACSS là gì

SMACSS là viết tắt của “Scalable and Modular Architecture for CSS”, là các hướng dẫn về cách phân tích design, có thể hiểu SMACSS là khả năng mở rộng và kiến trúc mô đun dành cho css.

• Scalable đề cập đến khả năng mở rộng. Code CSS cần được tổ chức theo cách nào đó để dễ dàng mở rộng về sau khi ứng dụng lớn dần lên
• Modular đề cập đến việc chia nhỏ code theo từng khối nhỏ, có thể dùng đi dùng lại.

BEM là gì? BEM là một ứng dụng cụ thể cụ thể của OOCSS. BEM là viết tắt của từ Block, Element, Modifier.

Về cơ bản, mỗi class của BEM bắt đầu với một block, bắt đầu bằng tên đối tượng. Ví dụ bắt đầu với class .byline. Sau đó, đến thành phần con của block đó, cuối cùng là đến element, tách nó với hai dấu gạch dưới: .byline__name. Cuối cùng, bạn có thể sửa đổi bất kỳ class (block hoặc element) bằng cách thêm một bổ nghĩa, tách biệt bằng hai dấu gạch nối: .byline--expanded.

Ví dụ:

.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}

Đây là vd về OOCSS có đối tượng media được viết dưới cú pháp BEM:

.media {}
.media__img {}
.media__img--rev {}
.media__body {}

LÀM SAO ĐỂ KÊT HỢP CẢ 3 PHƯƠNG PHÁP

Kể từ OOCSS là một phương pháp code trừu tượng, BEM là một ứng dụng cụ thể của OOCSS, và SMACSS là một cơ cấu tổ chức OOCSS tập trung,chúng kết hợp với nhau rất hay và độc đáo, đặc biệt là khi bạn dùng chúng với Sass.

Ví dụ:

style.scss

chứa tập tin core, được nhập bởi nhiều người

_base.scss

bao gồm normalize.css, và hầu hết các thiết lập cho các thành phần cơ bản như: html, body, a, ul, li, etc.

_layout.scss Tùy thuộc vào độ phức tạp của website, trong file này sẽ đặt các file grid, responsive, wrapper, etc.

_modules.scss Bao gồm các định nghĩa cho các module, hoặc các đối tượng. Mục đích là cho nhiều code ở đây khả thi, làm cho nó linh hoạt và tái sử dụng lại. Tập tin này sẽ chỉ là một danh sách các module được định nghĩa.

_other.scss

Các tên cho phần này là khác nhau, nhưng thực chất đây là tất cả code không phù hợp trong _base, _layout, hoặc _modules. những đoạn code ko tạo thành module, vv

Cách sử dụng BEM trong SASS

Trong quá khứ, rất nhiều lợi ích của việc sử dụng Sass đã mất khi bạn chuyển sang BEM:

Ví dụ:

/* Sass trước khi dùng BEM: */
.object {
    color: red;

    .descendant {
        color: black;
    }
}
/* hiển thị:
    .object {
        color: red;
    }
    .object .descendant {
        color: black;
    }
*/

/* Sass dùng BEM: */
.object {
    color: red;
}
    .object__descendant {
        color: black;
    }
/* hiển thị:
    .object {
        color: red;
    }
    .object__descendant {
        color: black
    }
*/

Nhưng với Sass 3.3, đã có thể nhận được Sass kết hợp BEM sử dụng & tiền tố của thành phần hoặc các yếu tố hoặc bổ:

/* Sass 3.3+ với BEM: */
.object {
    color: red;

    &__descendant {
        color: black;
    }
}

/* hiển thị:
    .object {
        color: red;
    }
    .object__descendant {
        color: black
    }
*/

Bài viêt có tham khảo các nguồn:

• https://mattstauffer.co/blog/organizing-css-oocss-smacss-and-
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• https://viblo.asia/ngocyen/posts/7ymwGXK0M4p1
• https://viblo.asia/ha.huu.tin/posts/qzaGzNMzGyO
• https://smacss.com/