Site icon saotuvi.com

CSS Modules là gì? Giải pháp quản lý Styles trong dự án

Ms Gao

Việc quản lý styles hiệu quả đóng vai trò quan trọng, đặc biệt khi dự án ngày càng mở rộng. CSS Modules khắc phục các vấn đề mà CSS truyền thống gặp phải.

Bài viết này mình sẽ tập trung so sánh chi tiết giữa CSS Modules và CSS thông thường, giúp bạn hiểu rõ sự khác biệt và lợi ích khi sử dụng CSS Modules trong dự án. Nếu bạn chưa biết về CSS là gì, bạn có thể tham khảo tại đây.

Bên cạnh đó, mình cũng sẽ nêu lên một vài cách quản lý style mà mình hay sử dụng nhất trong các dự án nhỏ, không quá phức tạp mà phải cần đến CSS Modules nhưng vẫn đảm bảo dễ dàng quản lý, bảo trì.

1. CSS Modules là gì?

CSS Modules là một phương pháp giúp quản lý CSS hiệu quả hơn, bằng việc đóng gói các lớp (class) với tên duy nhất trong phạm vi cục bộ, thay vì toàn cục như CSS truyền thống.

Dễ hiểu hơn là mỗi class được tạo ra trong CSS Modules chỉ tồn tại trong phạm vi của component hoặc module mà nó được khai báo, giúp ngăn ngừa hoàn toàn các xung đột tên lớp – một vấn đề phổ biến khi dự án được mở rộng.

Bạn sẽ thấy được CSS Modules thật sự tỏa sáng khi được sử dụng trong các ứng dụng web dựa trên các framework như Angular, Vue, và thư viện React, nơi mà việc tổ chức và quản lý style cho từng component là yếu tố then chốt để duy trì tính nhất quán và dễ bảo trì của ứng dụng.

Với CSS Modules, bạn không cần phải lo lắng về việc các lớp CSS vô tình ghi đè lẫn nhau làm phá vỡ bố cục của các phần khác trong dự án. Thay vào đó, mỗi class được tự động biên dịch thành một tên duy nhất dựa trên cấu trúc: filename__classname__hash, đảm bảo sự độc lập hoàn toàn.

2. Sự khác biệt giữa CSS và CSS Modules

CSS truyền thống và CSS Modules có nhiều điểm khác biệt rõ rệt về phạm vi, tái sử dụng style, tính bảo trì, và quá trình thiết lập. Để hiểu rõ hơn, cùng mình phân tích từng khía cạnh chi tiết bên dưới nhé.

2.1 Phạm vi (Scoping)

CSS

/* file1.css */
.button {
  background-color: red;
}

/* file2.css */
.button {
  background-color: blue;
}

Khi cả hai file CSS được sử dụng trong cùng một trang, kết quả sẽ phụ thuộc vào thứ tự file được tải. Nếu file2.css được tải sau, tất cả các button trên trang sẽ có màu đỏ, ngay cả khi bạn chỉ muốn một số button có màu xanh từ file1.css. Điều này tạo ra rủi ro xung đột cao khi dự án mở rộng lên.

CSS

/* button.module.css */
.button {
  background-color: blue;
}

Kết quả khi biên dịch sẽ là:

HTML

<button class="button_module__button__1abcd2">Click me</button>

Nhờ vậy, các class trong CSS Modules luôn bảo đảm là duy nhất, tránh hoàn toàn việc ghi đè hay xung đột với các class khác. Đây là điểm khác biệt nhưng đặc biệt quan trọng khi bạn làm việc trong dự án lớn có nhiều file CSS.

2.2 Tái sử dụng style

Javascript

import styles from './button.module.css';

function MyButton() {
    return <button className={styles.button}>Click me</button>;
}

2.3 Dễ dàng bảo trì và quản lý

Ngoài ra, CSS Modules còn giúp bạn dễ dàng tổ chức code theo từng component, giúp cho việc bảo trì và cập nhật trở nên dễ dàng và logic hơn. Bạn chỉ cần thay đổi style trong một module mà không lo ảnh hưởng đến các phần khác, điều này giúp giảm thiểu lỗi và cải thiện tính bảo trì.

2.4 Thiết lập và sử dụng

3. Ưu và nhược điểm của CSS Modules so với CSS

3.1 Ưu điểm

3.2 Nhược điểm

4. Khi nào nên sử dụng CSS Modules

CSS Modules là lựa chọn lý tưởng cho các dự án lớn, đặc biệt là những ứng dụng có kiến trúc dựa trên component như React, Angular, hoặc Vue. Với khả năng tránh xung đột tên class và dễ quản lý style, CSS Modules giúp đảm bảo tính nhất quán và dễ dàng bảo trì khi dự án phát triển.

Tuy nhiên, với các website đơn giản hoặc dự án nhỏ, CSS truyền thống có thể là lựa chọn phù hợp hơn, vì nó giúp giảm thiểu cấu hình phức tạp và tiết kiệm thời gian phát triển. Trong trường hợp này, sự đơn giản của CSS truyền thống sẽ mang lại hiệu quả nhanh chóng mà không cần các tính năng nâng cao của CSS Modules.

💡

Nếu như bạn chỉ sử dụng HTML, CSS và JavaScript thuần (liên kết với nhau thông qua thẻ <link> và <script> mà không cần phải trải qua các bước build phức tạp), không có nhu cầu tích hợp với những công nghệ như CSS Modules, bạn không cần các công cụ build.
=> Vậy cách tốt nhất để quản lý style trong CSS thuần là gì?

5. Các phương pháp quản lý style với CSS thuần

5.1 Sử dụng phương pháp đặt tên BEM (Block Element Modifier)

BEM (Block, Element, Modifier) là một phương pháp đặt tên class rất phổ biến trong CSS để giúp quản lý styles hiệu quả, ngay cả trong các dự án lớn. Phương pháp này tránh việc xung đột tên class và giúp bạn dễ dàng hiểu được cấu trúc CSS chỉ bằng cách nhìn vào tên lớp

HTML

<p class="header">
  <h1 class="header__title">My Website</h1>
  <nav class="header__nav">
    <ul class="header__list">
      <li class="header__item header__item--active">Home</li>
      <li class="header__item">About</li>
      <li class="header__item">Contact</li>
    </ul>
  </nav>
</p>

CSS

.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

.header__title {
  font-size: 24px;
  margin-bottom: 10px;
}

.header__nav {
  display: flex;
}

.header__list {
  list-style: none;
  display: flex;
  gap: 10px;
}

.header__item {
  padding: 10px;
}

.header__item--active {
  background-color: #555;
}

Với BEM, bạn sẽ:

5.2 Tách biệt rõ ràng các thành phần trong CSS

Một cách khác để quản lý style trong CSS thuần mà mình thấy cũng khá ổn là tách biệt các thành phần (component) trong web của bạn thành các file CSS riêng biệt.

Ví dụ như bạn có thể tách riêng thành nhiều file như thế này:

Sau đó thì trong file HTML, bạn chỉ cần liên kết các file CSS tương ứng:

HTML

<head>
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/main.css">
</head>

5.3 Sử dụng tiền tố (Prefix) cho tên class

Nếu bạn không muốn sử dụng BEM, một cách đơn giản là thêm tiền tố (prefix) cho các class để tránh xung đột tên. Mỗi thành phần hoặc module sẽ có một tiền tố nhất định.

Ví dụ: Nếu bạn có trang web với nhiều thành phần khác nhau, bạn có thể thêm tiền tố để xác định rõ ràng các class thuộc thành phần nào.

HTML

<p class="nav-bar">
  <ul class="nav-bar__list">
    <li class="nav-bar__item">Home</li>
    <li class="nav-bar__item">About</li>
    <li class="nav-bar__item">Contact</li>
  </ul>
</p>

<p class="footer">
  <p class="footer__text">© 2024 200Lab Website</p>
</p>

CSS

/* CSS navigation */
.nav-bar {
  background-color: #333;
  color: white;
}

.nav-bar__list {
  list-style: none;
  display: flex;
  gap: 10px;
}

.nav-bar__item {
  padding: 10px;
}

/* CSS footer */
.footer {
  background-color: #222;
  color: white;
}

.footer__text {
  text-align: center;
}

5.4 Sử dụng biến CSS (CSS Variables)

CSS Variables giúp bạn quản lý các giá trị lặp lại nhiều lần trong CSS (ví dụ như là: màu sắc, font-size, margin, padding) một cách hiệu quả.

CSS

:root {
  --primary-color: #333;
  --secondary-color: #555;
  --padding: 10px;
}

.header {
  background-color: var(--primary-color);
  padding: var(--padding);
}

.button {
  background-color: var(--secondary-color);
  padding: var(--padding);
}

Trong các dự án nhỏ, việc giữ cho mọi thứ đơn giản và dễ hiểu luôn là sự lựa chọn tốt nhất.

6. Kết luận

CSS Modules là bước tiến mới trong việc quản lý style cho các ứng dụng, khắc phục các hạn chế của CSS truyền thống. Hiểu rõ sự khác biệt giữa CSS và CSS Modules giúp bạn chọn được công cụ phù hợp, từ đó tối ưu hóa quá trình phát triển và duy trì ứng dụng.

Hy vọng bài viết đã giúp bạn có cái nhìn chi tiết về CSS Modules và lý do tại sao nó trở thành một trong những lựa chọn sử dụng của các developer trong các dự án.

Các bài viết liên quan:

Exit mobile version