SASS và BEM

Bài viết này giải thích về SASS và BEM.

Chúng tôi sẽ giải thích các khái niệm và phương pháp triển khai để ngăn ngừa sự nhầm lẫn và dễ vỡ thường xảy ra khi CSS phát triển quy mô lớn, bằng cách sử dụng SASS và BEM với các ví dụ cụ thể.

YouTube Video

SASS và BEM

Khi số lượng tệp và màn hình tăng lên, CSS thường gặp phải các vấn đề như: 'Tôi không biết kiểu này được định nghĩa ở đâu' và 'Chỉ một thay đổi nhỏ đã làm hỏng giao diện trên một màn hình khác.'.

Điều này là do CSS vốn dĩ là một ngôn ngữ không áp đặt các quy tắc thiết kế. Nếu bạn tiếp tục viết như hiện tại, các phụ thuộc ngoài ý muốn sẽ tăng lên.

SASS và BEM là những kỹ thuật thực tiễn giúp chuyển đổi CSS từ thứ bạn viết một cách ngẫu hứng thành thứ bạn thiết kế và quản lý, từ đó ngăn ngừa những vấn đề như vậy. Bằng cách kết hợp cả hai, bạn có thể làm rõ ý nghĩa của các kiểu và đồng thời nâng cao khả năng đọc, khả năng tái sử dụng và khả năng bảo trì.

Các lý do khiến CSS dễ trở nên khó quản lý

CSS như sau đây có thể trở nên khó hiểu cách nó hoạt động khi bạn xem lại mã sau này.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• Trong ví dụ này, cùng một lớp .title có thể hiển thị khác nhau tùy vào vị trí của nó, nên bạn không thể biết ngay kiểu nào sẽ được áp dụng cho .title này.
• Bằng cách này, khi các bộ chọn càng sâu và phụ thuộc vào phần tử cha nhiều hơn, CSS sẽ càng khó dự đoán phạm vi ảnh hưởng và dễ bị hỏng khi thay đổi.

BEM là quy ước đặt tên 'diễn đạt vai trò thông qua tên gọi'

BEM là viết tắt của Block / Element / Modifier, và tên gọi sẽ thể hiện thành phần mà lớp đó đại diện và trạng thái của nó.

• Block là một thành phần độc lập.
• Element là một phần tử bên trong Block.
• Modifier biểu thị một trạng thái hoặc biến thể.

1.card {}
2.card__title {}
3.card--highlighted {}

Với quy tắc đặt tên này, bạn có thể suy ra cấu trúc và vai trò chỉ bằng cách nhìn vào HTML.

Dạng cơ bản của HTML sử dụng BEM

Đây là một ví dụ về giao diện thẻ được viết bằng HTML sử dụng BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Chỉ từ tên lớp, bạn có thể hiểu đây là một 'thành phần card', 'title bên trong' và 'trạng thái nhấn mạnh'. Đây là lợi thế lớn nhất của BEM.

Tuy nhiên, chỉ dùng BEM có thể dẫn đến CSS dài dòng.

Nếu bạn viết BEM trực tiếp trong CSS, số dòng mã sẽ tăng lên.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Ở đây, bằng cách sử dụng SASS, bạn có thể có được mã tổ chức tốt, duy trì được cấu trúc.

Thể hiện BEM một cách tự nhiên bằng cách lồng nhau trong SASS

Bằng cách sử dụng lồng nhau trong SASS, bạn có thể thể hiện cấu trúc của BEM trực tiếp trong mã của mình.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& đề cập đến bộ chọn cha và hoạt động rất tốt với cách đặt tên BEM.

CSS được tạo ra từ SASS này

SASS trên sẽ được biên dịch thành CSS như sau.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Mặc dù giao diện giống nhau, nhưng gánh nặng tư duy cho nhà phát triển được giảm đi đáng kể.

Thiết kế để sử dụng Modifier một cách an toàn

Vì Modifier trong BEM đại diện cho 'trạng thái', nên điểm mấu chốt là giới hạn chúng chỉ để ghi đè.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Thiết kế sẽ ổn định hơn nếu Modifier không được xem là 'bổ sung' mà là 'thay đổi'.

Hạn chế lồng Element chỉ một cấp

Trong BEM, điều quan trọng là không lồng các phần tử quá sâu.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Các phần tử nhiều cấp như .card__header__title là dấu hiệu cho thấy bạn nên cân nhắc tách Block ra.

Một ví dụ về cấu trúc tệp SASS

Cuối cùng, đây là một ví dụ về cấu trúc SASS mang tính thực tiễn cho các dự án thực tế.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Nếu bạn quản lý mỗi thành phần là 1 block = 1 file, sẽ ít khi bị lỗi hơn.

Ví dụ về card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Vì mọi thứ đều khép kín trong đơn vị này nên việc xóa, di chuyển và tái sử dụng sẽ dễ dàng hơn.

Tóm tắt

SASS và BEM không chỉ là những kỹ thuật theo xu hướng—chúng là phương pháp thực tiễn để biến CSS thành mã có thể thiết kế được.

• BEM đặt tên theo ý nghĩa và vai trò.
• SASS giúp viết dễ dàng hơn mà vẫn giữ được cấu trúc.
• Kết hợp cả hai giúp CSS ít bị lỗi hơn.

Hãy viết CSS hôm nay theo cách mà chính bạn trong tương lai có thể hiểu được.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video