Kỹ thuật tái sử dụng và tổ chức classnames

Trong các dự án lớn, việc tổ chức và tái sử dụng classnames một cách hợp lý giúp code dễ bảo trì, giảm trùng lặp và tăng hiệu suất phát triển giao diện. Bài học này sẽ hướng dẫn bạn cách tổ chức classnames gọn gàng và tái sử dụng hiệu quả thông qua các kỹ thuật cơ bản và nâng cao. Bạn cũng sẽ được tìm hiểu cách sử dụng các thư viện hỗ trợ như clsx hoặc classnames.

Kỹ thuật tái sử dụng và tổ chức classnames

1. Tổ chức classnames hiệu quả

• Đặt tên lớp có ý nghĩa:
  Thay vì sử dụng bg-gray-300 p-4 rounded, hãy sử dụng card-container và định nghĩa lớp này trong Tailwind hoặc CSS nếu cần mở rộng.

• Nhóm lớp CSS cho từng component:
  Đảm bảo mỗi component có tập hợp lớp CSS riêng biệt nhằm dễ quản lý hơn.

2. Sử dụng thư viện hỗ trợ classnames

2.1. Thư viện classnames
Cài đặt:

npm install classnames

Ví dụ sử dụng:

import classNames from "classnames";

function Button({ primary, disabled }) {
  const buttonClass = classNames("px-4 py-2 rounded", {
    "bg-blue-500 text-white": primary,
    "bg-gray-300 text-gray-600": disabled,
  });

  return <button className={buttonClass}>Click me!</button>;
}

export default Button;

Giải thích: classnames giúp bạn thêm lớp CSS động dễ dàng bằng cách kiểm tra điều kiện primary và disabled.

2.2. Thư viện clsx
Cài đặt:

npm install clsx

Ví dụ sử dụng:

import clsx from "clsx";

function Card({ highlight }) {
  const cardClass = clsx("p-6 border rounded-lg", {
    "bg-yellow-200": highlight,
    "bg-white": !highlight,
  });

  return <div className={cardClass}>Card Content</div>;
}

export default Card;

Giải thích: clsx cung cấp cách viết tối ưu và gọn gàng hơn cho việc quản lý lớp CSS động.

3. Thực hành tái sử dụng classnames

1. Component Button tái sử dụng lớp CSS:
   Tạo component ReusableButton.jsx với classnames linh hoạt:

   import clsx from "clsx";
   
   function ReusableButton({ variant }) {
     const buttonClass = clsx("px-4 py-2 rounded", {
       "bg-green-500 text-white": variant === "success",
       "bg-red-500 text-white": variant === "danger",
       "bg-gray-300 text-black": variant === "default",
     });
   
     return <button className={buttonClass}>Button</button>;
   }
   
   export default ReusableButton;
   

2. Cách tạo utility classes để tái sử dụng:

   • Định nghĩa các lớp CSS chung trong file styles.css:

     .btn {
       padding: 8px 16px;
       border-radius: 8px;
     }
     .btn-primary {
       background-color: blue;
       color: white;
     }
     .btn-danger {
       background-color: red;
       color: white;
     }
     

   • Áp dụng trong React Component:

     <button className="btn btn-primary">Primary Button</button>
     

Kết luận

Sau bài học này, bạn đã hiểu cách tổ chức và tái sử dụng classnames hiệu quả, từ đó giúp dự án dễ bảo trì và tối ưu hơn. Việc sử dụng thư viện như classnames và clsx giúp bạn quản lý lớp CSS động dễ dàng và rõ ràng hơn. Hãy áp dụng các kỹ thuật này vào dự án của mình để tăng hiệu suất và tính linh hoạt khi phát triển giao diện!