ID và Class trong CSS: Phân Biệt, So Sánh và Cách Dùng Đúng

Khi bước chân vào lĩnh vực thiết kế web, bạn sẽ gặp đi gặp lại hai khái niệm cốt lõi: ID và Class trong CSS. Chúng giống như những tấm biển chỉ dẫn giúp bạn tạo kiểu cho từng phần tử trên trang. Hiểu rõ sự khác biệt và cách dùng đúng sẽ giúp bạn viết code gọn gàng, hiệu quả hơn. Hãy cùng WiWeb tìm hiểu tường tận về hai “trợ thủ” đắc lực này nhé!

ID và Class là gì?

Trước khi đi sâu vào so sánh, chúng ta cần nắm vững định nghĩa của từng khái niệm. ID và Class chính là hai loại CSS Selector (bộ chọn) phổ biến nhất. Chúng giúp bạn “gọi tên” chính xác phần tử HTML mà bạn muốn áp dụng phong cách.

ID là gì?

Hãy tưởng tượng mỗi công dân có một số Căn cước Công dân duy nhất. Trong HTML, ID cũng hoạt động tương tự. Nó là một định danh duy nhất cho một phần tử trên toàn bộ trang web.

• Mỗi trang HTML chỉ nên có một phần tử mang một tên ID cụ thể.
• Nếu bạn đặt tên ID là main-header, thì không có bất kỳ phần tử nào khác trên trang đó được phép có ID là main-header nữa.

Chính vì tính duy nhất này, ID thường được dùng để xác định các khối cấu trúc lớn và độc nhất của trang. Ví dụ như phần đầu trang (header), chân trang (footer), hoặc thanh điều hướng chính (main-nav).

Class là gì?

Nếu ID là Căn cước Công dân, thì Class giống như tên của một nhóm hoặc một câu lạc bộ. Nhiều người có thể cùng tham gia một câu lạc bộ. Tương tự, một Class có thể được áp dụng cho nhiều phần tử khác nhau.

• Bạn có thể tạo một class tên là .btn-primary để định dạng cho tất cả các nút bấm quan trọng trên trang.
• Một phần tử cũng có thể tham gia nhiều “câu lạc bộ”, tức là mang nhiều class cùng lúc.

Class là công cụ tuyệt vời để nhóm các phần tử có chung đặc điểm kiểu dáng, giúp bạn tái sử dụng code CSS một cách hiệu quả và tiết kiệm thời gian.

Cú pháp khai báo và sử dụng ID và Class

Hiểu định nghĩa rồi, giờ là lúc chúng ta xem cách viết chúng trong code. Cú pháp rất đơn giản và dễ nhớ, bạn sẽ nhanh chóng làm quen thôi!

Cách khai báo trong HTML: Thuộc tính id và class

Trong file HTML, bạn sử dụng thuộc tính id và class ngay bên trong thẻ mở của phần tử.

• Để gán một ID: Dùng thuộc tính id="ten-id".
• Để gán một Class: Dùng thuộc tính class="ten-class".
• Để gán nhiều Class: Viết các tên class cách nhau bởi dấu cách, ví dụ: class="class-1 class-2".

Cùng xem ví dụ dưới đây:

<!-- Sử dụng ID cho phần tử duy nhất -->
<header id="page-header">Đây là đầu trang</header>

<!-- Sử dụng Class cho các phần tử có thể lặp lại -->
<p class="text-highlight">Đoạn văn bản được làm nổi bật.</p>
<span class="text-highlight">Từ này cũng được làm nổi bật.</span>

<!-- Một phần tử có cả ID và nhiều Class -->
<div id="main-content" class="container full-width">Nội dung chính</div>

Cách gọi trong CSS: Dấu thăng (#) và dấu chấm (.)

Sau khi đã “đặt tên” cho các phần tử trong HTML, bạn cần “gọi” chúng trong file CSS để bắt đầu trang trí. Quy tắc rất rõ ràng:

• Gọi ID: Sử dụng dấu thăng (#) đứng trước tên ID.
• Gọi Class: Sử dụng dấu chấm (.) đứng trước tên class.

Tiếp nối ví dụ HTML ở trên, file CSS của chúng ta sẽ trông như thế này:

/* Định dạng cho ID page-header */
#page-header {
  background-color: #333;
  color: white;
  padding: 20px;
}

/* Định dạng cho class text-highlight */
.text-highlight {
  color: blue;
  font-weight: bold;
}

/* Định dạng cho class container */
.container {
  width: 1140px;
  margin: 0 auto;
}

Bảng so sánh chi tiết: Sự khác nhau giữa ID và Class

Đây là phần quan trọng nhất để phân biệt id và class một cách rạch ròi. WiWeb đã tổng hợp các điểm khác biệt cốt lõi vào bảng dưới đây để bạn dễ dàng theo dõi và so sánh id và class.

Một phần tử có thể có cả ID và Class không?

Câu trả lời là CÓ. Như bạn đã thấy ở ví dụ trên, một phần tử hoàn toàn có thể sở hữu cả hai. Điều này rất hữu ích.

Bạn có thể dùng ID để xác định nó là một khối cấu trúc duy nhất (ví dụ id="main-content"), đồng thời dùng Class để áp dụng các kiểu dáng chung (ví dụ class="container"). Cách làm này giúp code của bạn vừa rõ ràng về mặt cấu trúc, vừa linh hoạt trong việc tạo kiểu.

Khi nào nên dùng ID và khi nào nên dùng Class?

Lý thuyết là vậy, nhưng trong thực tế, khi nào dùng ID khi nào dùng Class? Đây là câu hỏi mà rất nhiều người mới bắt đầu băn khoăn. Quy tắc chung rất đơn giản: Ưu tiên dùng Class cho việc tạo kiểu (styling) và chỉ dùng ID khi thật sự cần thiết.

Các trường hợp lý tưởng để sử dụng ID

Bạn nên nghĩ đến việc dùng ID trong các tình huống sau:

• Định danh các khối Layout chính: Các thành phần chỉ xuất hiện một lần trên trang như <header>, <footer>, <main>, <aside> là ứng cử viên hoàn hảo cho ID.
• Tạo liên kết neo (Anchor Links): ID rất hữu ích để tạo các liên kết nhảy đến một phần cụ thể trên cùng một trang. Ví dụ, bạn có thể tạo một liên kết ở đầu trang để cuộn xuống phần có id="contact-form".
• Tương tác với JavaScript: Khi bạn cần dùng JavaScript để chọn và thao tác với một phần tử duy nhất, getElementById() là phương thức nhanh và hiệu quả nhất.

Các trường hợp nên sử dụng Class

Class là công cụ bạn sẽ sử dụng gần như mọi lúc khi viết CSS. Hãy dùng Class khi:

• Tạo kiểu cho nhiều phần tử giống nhau: Tất cả các nút bấm, thẻ sản phẩm, thông báo, tiêu đề bài viết… nên dùng chung một class để đảm bảo tính nhất quán.
• Tạo các tiện ích (Utility Classes): Ví dụ, bạn có thể tạo các class như .text-center để căn giữa chữ, .mt-20 để tạo lề trên 20px. Các class này có thể được áp dụng ở bất cứ đâu bạn cần.
• Viết CSS theo các phương pháp luận như BEM, OOCSS: Các phương pháp này đều dựa trên việc sử dụng Class để tạo ra các component có thể tái sử dụng.

Ví dụ thực tế: Xây dựng layout Header, Content, Footer

Hãy xem cách ID và Class kết hợp với nhau để tạo ra một bố cục trang web cơ bản.

HTML:

<body id="home-page">
  <header id="main-header" class="site-padding">
    <h1>Logo của tôi</h1>
  </header>

  <main id="main-content" class="site-padding">
    <p>Đây là nội dung chính của trang.</p>
    <button class="btn btn-primary">Nhấn vào đây</button>
  </main>

  <footer id="main-footer" class="site-padding bg-dark">
    <p>Bản quyền © 2023</p>
  </footer>
</body>

CSS:

/* Dùng ID cho cấu trúc chính */
#main-header { border-bottom: 1px solid #eee; }
#main-footer { border-top: 1px solid #eee; }

/* Dùng Class cho các kiểu dáng tái sử dụng */
.site-padding { padding: 20px 40px; }
.bg-dark { background-color: #333; color: white; }
.btn { padding: 10px 15px; border: none; }
.btn-primary { background-color: blue; color: white; }

Trong ví dụ này, ID (#main-header, #main-footer) dùng để định danh các khối độc nhất. Class (.site-padding, .btn) dùng để áp dụng các kiểu dáng có thể dùng lại ở nhiều nơi.

Độ ưu tiên (Specificity) trong CSS: Tại sao ID luôn “thắng” Class?

Bạn đã bao giờ viết CSS cho một class nhưng không thấy nó hoạt động, để rồi phát hiện ra có một ID nào đó đang “ghi đè” lên nó chưa? Đó chính là do độ ưu tiên trong CSS (CSS Specificity).

Giải thích về CSS Specificity

CSS Specificity là một hệ thống quy tắc mà trình duyệt sử dụng để quyết định thuộc tính CSS nào sẽ được áp dụng cho một phần tử khi có nhiều quy tắc cùng nhắm vào nó. Hãy coi nó như một hệ thống tính điểm. Bộ chọn nào có điểm cao hơn, quy tắc của nó sẽ được áp dụng.

Nguyên tắc rất đơn giản: Bộ chọn càng cụ thể, điểm ưu tiên càng cao.

Cách tính điểm ưu tiên của bộ chọn ID và Class

Để cho dễ hình dung, chúng ta có thể gán cho mỗi loại bộ chọn một số điểm (đây chỉ là cách mô phỏng, không phải cách tính chính thức của trình duyệt):

• Bộ chọn ID (#): 100 điểm
• Bộ chọn Class (.): 10 điểm
• Bộ chọn thẻ (ví dụ: p, div): 1 điểm

Bây giờ, hãy xem ví dụ:

<div id="unique-box" class="normal-box">Một cái hộp</div>

/* Điểm: 100 */
#unique-box {
  background-color: blue;
}

/* Điểm: 10 */
.normal-box {
  background-color: red;
}

Trong trường hợp này, div sẽ có màu nền xanh dương (blue). Tại sao vậy? Vì bộ chọn ID (#unique-box) có 100 điểm, cao hơn nhiều so với 10 điểm của bộ chọn Class (.normal-box). Trình duyệt sẽ ưu tiên áp dụng quy tắc có điểm cao hơn. Đây chính là lý do tại sao ID luôn “thắng” Class khi chúng cùng nhắm vào một phần tử.

Lời kết

Vậy là chúng ta đã cùng nhau tìm hiểu chi tiết về ID và Class trong CSS. Đây là những kiến thức nền tảng nhưng cực kỳ quan trọng mà bất kỳ ai làm web cũng phải nắm vững.

Tóm tắt các điểm khác biệt chính

• ID là duy nhất, dùng cho các phần tử độc nhất và có độ ưu tiên cao hơn.
• Class có thể tái sử dụng, dùng để nhóm các phần tử có chung kiểu dáng và là lựa chọn hàng đầu cho việc styling.
• Cú pháp: ID dùng dấu thăng (#), Class dùng dấu chấm (.).

Lời khuyên để sử dụng ID và Class hiệu quả trong dự án

• Ưu tiên sử dụng Class: Hãy tập thói quen dùng Class cho hầu hết các công việc tạo kiểu. Điều này giúp code của bạn dễ bảo trì, mở rộng và tái sử dụng.
• Dành ID cho những việc đặc biệt: Chỉ dùng ID cho các khối layout chính hoặc khi cần tương tác với JavaScript trên một phần tử duy nhất.
• Tránh lạm dụng ID để style: Việc style bằng ID sẽ làm tăng độ ưu tiên một cách không cần thiết, khiến cho việc ghi đè CSS sau này trở nên khó khăn hơn.

Nắm vững cách sử dụng hai công cụ này sẽ giúp bạn xây dựng các trang web có cấu trúc tốt và code CSS sạch sẽ hơn rất nhiều.

Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại ý kiến của bạn ở phần bình luận nhé!

Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!