[React Basics] Học cách Styling trong React hiệu quả và tối ưu

Khi xây dựng một ứng dụng React, việc "thổi hồn" cho các component bằng CSS cũng quan trọng như việc viết logic cho chúng. Nhưng trong React, việc styling không chỉ có một con đường. Nó giống như một mê cung với nhiều lựa chọn, mỗi lựa chọn đều có ưu và nhược điểm riêng.

Bài viết này sẽ cùng bạn khám phá các phương pháp styling phổ biến nhất trong React, từ cách tiếp cận truyền thống đến những kỹ thuật hiện đại và mạnh mẽ nhất. Hãy cùng tìm ra "phong cách" phù hợp nhất cho dự án của bạn!

1. CSS/SASS Stylesheets (The Classic)

Đây là cách tiếp cận quen thuộc nhất với bất kỳ ai đã từng làm web. Bạn tạo một file .css hoặc .scss riêng, viết CSS như bình thường và import nó vào component của bạn.

Cách hoạt động:

/* styles.css */
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.card-title {
  font-size: 1.5rem;
  color: #333;
}

// Card.js
import React from 'react'
import './styles.css' // Import file CSS

function Card({ title, children }) {
  return (
    <div className="card">
      <h2 className="card-title">{title}</h2>
      <p>{children}</p>
    </div>
  )
}

export default Card

✅ Ưu điểm:

• Dễ tiếp cận: Rất quen thuộc, không cần học thêm cú pháp mới.
• Tách biệt rõ ràng: Logic (JS) và trình bày (CSS) được tách biệt hoàn toàn.
• Hỗ trợ tiền xử lý: Hoạt động hoàn hảo với SASS, LESS.

❌ Nhược điểm:

• Xung đột tên class (Global Scope): Tất cả các class đều nằm trong scope toàn cục. Khi dự án lớn lên, việc đặt tên và quản lý class để tránh trùng lặp trở thành một cơn ác mộng.
• Khó quản lý: Khó để biết class nào đang được sử dụng ở component nào và ngược lại. Việc xóa một class có thể gây ra lỗi ở một nơi không ngờ tới.

2. Inline Styles (The Quick & Dirty)

React cho phép bạn viết style trực tiếp trong component dưới dạng một đối tượng JavaScript.

Cách hoạt động:

import React from 'react'

function Header() {
  const headerStyle = {
    backgroundColor: 'navy',
    color: 'white',
    padding: '1rem',
    textAlign: 'center', // Các thuộc tính CSS được viết theo kiểu camelCase
  }

  return (
    <header style={headerStyle}>
      <h1>Welcome to My App</h1>
    </header>
  )
}

export default Header

✅ Ưu điểm:

• Nhanh chóng: Tuyệt vời cho việc prototype hoặc áp dụng các style động dựa trên state hoặc props.
• Scope cục bộ: Style chỉ ảnh hưởng đến chính element đó, không bao giờ gây xung đột.

❌ Nhược điểm:

• Hạn chế: Không hỗ trợ các tính năng CSS cao cấp như pseudo-classes (:hover), media queries, hay animations.
• Khó đọc: Trộn lẫn style và logic làm component trở nên lộn xộn.
• Hiệu năng: Có thể gây ra các vấn đề về hiệu năng nếu sử dụng không đúng cách, vì một đối tượng style mới sẽ được tạo ra mỗi lần render.

3. CSS Modules (The Local Hero)

CSS Modules là một cuộc cách mạng. Về cơ bản, nó là một file CSS thông thường, nhưng khi được build, nó sẽ tự động tạo ra các tên class độc nhất. Điều này giải quyết triệt để vấn đề scope toàn cục.

Cách hoạt động:

Bạn cần đặt tên file theo định dạng [tên].module.css (ví dụ: Button.module.css).

/* Button.module.css */
.button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// Button.js
import React from 'react'
import styles from './Button.module.css' // Import như một module

function Button({ children }) {
  // `styles.button` sẽ được chuyển thành một class độc nhất, ví dụ: "Button_button__1a2b3c"
  return <button className={styles.button}>{children}</button>
}

export default Button

✅ Ưu điểm:

• Scope cục bộ mặc định: Hoàn toàn không còn nỗi lo xung đột tên class.
• Dễ bảo trì: Các style được đóng gói cùng với component, dễ dàng quản lý và xóa bỏ.
• Sử dụng được tất cả tính năng CSS: Bạn vẫn viết CSS thuần túy nên không có giới hạn nào.

❌ Nhược điểm:

• Thiết lập: Cần có sự hỗ trợ từ công cụ build (như Webpack, Vite), tuy nhiên Create React App và các framework hiện đại đã hỗ trợ sẵn.
• Khó chia sẻ style: Việc chia sẻ style giữa các component khác nhau sẽ phức tạp hơn một chút.

4. CSS-in-JS (The Dynamic Powerhouse) 🚀

Đây là một phương pháp hoàn toàn khác: viết CSS ngay bên trong file JavaScript bằng các thư viện chuyên dụng. Nó cho phép bạn tận dụng toàn bộ sức mạnh của JavaScript (biến, hàm, logic) để tạo ra các style cực kỳ linh hoạt và động.

Hai thư viện phổ biến nhất là Styled-components và Emotion.

Styled-components

Cách hoạt động:

Bạn tạo ra các component React đã được đính kèm style sẵn bằng cách sử dụng cú pháp template literal của JavaScript.

import React from 'react'
import styled from 'styled-components'

// Tạo một component <Wrapper> là một thẻ <section> đã được style
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`

// Tạo một component <Title> là một thẻ <h1>
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`

function MyComponent() {
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  )
}

✅ Ưu điểm:

• Tư duy component-first: Style và component là một thể thống nhất, giúp việc tái sử dụng và quản lý trở nên cực kỳ dễ dàng.
• Styling động đỉnh cao: Dễ dàng thay đổi style dựa trên props một cách tự nhiên và mạnh mẽ.
• Tự động tiền tố (vendor prefixing): Thư viện tự xử lý các tiền tố trình duyệt cho bạn.
• Không còn class name: Bạn không cần phải lo lắng về việc đặt tên class nữa.

❌ Nhược điểm:

• Đường cong học tập: Cần thời gian để làm quen với cú pháp và cách tư duy mới.
• Performance Overhead: Có một chút chi phí về hiệu năng lúc runtime so với CSS tĩnh, mặc dù các thư viện đã được tối ưu rất tốt.
• Phụ thuộc thư viện: Phải cài đặt và quản lý thêm một thư viện bên ngoài.

5. Utility-First CSS (The Modern Minimalist)

Đây là xu hướng đang rất thịnh hành, với Tailwind CSS là đại diện tiêu biểu nhất. Thay vì viết CSS cho từng component, Tailwind cung cấp cho bạn một bộ sưu tập khổng lồ các class "tiện ích" cấp thấp, mỗi class làm một việc duy nhất (ví dụ: p-4 để padding, flex để display: flex, text-center để text-align: center). Bạn sẽ xây dựng giao diện bằng cách kết hợp các class này trực tiếp trong JSX.

Cách hoạt động:

import React from 'react'

function ProductCard() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg p-6 bg-white hover:bg-gray-100 transition-colors">
      <div className="font-bold text-xl mb-2">The Coldest Sunset</div>
      <p className="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
        quia, nulla!
      </p>
    </div>
  )
}

✅ Ưu điểm:

• Tốc độ phát triển cực nhanh: Không cần rời khỏi file HTML/JSX, không cần đặt tên class.
• Nhất quán: Thiết kế của bạn sẽ luôn nhất quán vì bạn chỉ sử dụng các giá trị đã được định nghĩa trước trong hệ thống thiết kế (design system) của Tailwind.
• File CSS siêu nhỏ: Tailwind sẽ quét code của bạn và chỉ sinh ra những class bạn thực sự dùng trong file CSS cuối cùng.
• Responsive trực quan: Xử lý responsive trực tiếp trong JSX (md:flex, lg:text-xl).

❌ Nhược điểm:

• JSX "lộn xộn": Class list có thể trở nên rất dài và khó đọc đối với các component phức tạp.
• Đường cong học tập: Bạn phải học và nhớ tên các class tiện ích của Tailwind.
• Ít "nghệ thuật": Hạn chế sự tự do sáng tạo so với việc viết CSS thuần.

Styling trong React: Bảng so sánh nhanh

Dưới đây là bảng so sánh nhanh các phương pháp Styling trong React:

Kết luận: Vậy đâu là con đường dành cho bạn?

Không có câu trả lời nào là "tốt nhất tuyệt đối". Lựa chọn phương pháp styling phụ thuộc vào quy mô dự án, yêu cầu kỹ thuật, và sở thích của team bạn.

• Mới bắt đầu? Hãy bắt đầu với CSS/SASS truyền thống để nắm vững kiến thức nền tảng, sau đó chuyển sang CSS Modules để trải nghiệm sức mạnh của scope cục bộ.
• Xây dựng một ứng dụng phức tạp và có tính tương tác cao? CSS-in-JS (Styled-components/Emotion) sẽ là người bạn đồng hành đắc lực.
• Ưu tiên tốc độ phát triển và sự nhất quán trong thiết kế? Tailwind CSS là một lựa chọn không thể bỏ qua.

Styling trong React không chỉ là "mặc áo" cho component. Đó là cách bạn kiến trúc giao diện, quản lý sự phức tạp và nâng cao trải nghiệm người dùng. Hãy thử nghiệm, khám phá và tìm ra phong cách giúp bạn và đội nhóm của mình làm việc hiệu quả và vui vẻ nhất!