Cách tốt nhất để đặt tên ID và class CSS trong dự án JavaScript

Nhiều lập trình viên thường cảm thấy khó khăn trong việc đặt tên class CSS và ID. Nếu cũng đang cảm thấy như thế, mời bạn tham khảo những cách đặt tên class CSS và ID đơn giản nhưng hiệu quả dưới đây.

Quy ước đặt tên cho class CSS và ID có vai trò quan trọng trong việc hiểu và duy trì mã trong dự án JavaScript. Các tên được sử dụng có thể nâng cao tính rõ ràng, khả năng sử dụng lại và linh hoạt của codebase. Những phương pháp dưới đây sẽ giúp bạn làm việc đó dễ dàng hơn.

Dùng tên theo ngữ nghĩa

Chọn tên giải thích chính xác chức năng hoặc mục đích của phần tử rất quan trọng. Tên theo ngữ nghĩa cung cấp ngữ cảnh và làm cho code dễ hiểu hơn.

Ví dụ, thay vì dùng tên truyền thống như box và holder, thử dùng tên như header hoặc sidebar phản ánh vai trò của thành phần.

/* Ví dụ về tên theo ngữ nghĩa */

.header {}
.sidebar {}

Dùng quy ước đặt tên nhất quán

Tính nhất quán là chìa khóa khi đặt tên cho các class CSS và ID. Sử dụng cùng một tiêu chuẩn đặt tên cho dự án JavaScript giúp duy trì cấu trúc của codebase đơn giản hơn.

Những quy ước đặt tên BEM (Công cụ sửa đổi thành phần khối) và OOCSS (CSS hướng đối tượng) là hai quy ước đặt tên được ưa thích nhất.

Bạn có thể sử dụng quy ước đặt tên OOCSS để viết mã CSS theo mô-đun, có thể quản lý và thay đổi quy mô. Dưới đây là minh họa về cách bạn có thể tạo menu điều hướng bằng OOCSS:

/* Structure */

.nav {
 display: flex;
 list-style: none;
}

.nav__item {
 margin-right: 1rem;
}

.nav__link {
 text-decoration: none;
 color: #333;
}

/* Appearance */

.nav__link:hover {
 text-decoration: underline;

}

Bạn có hai phần riêng biệt của code cho menu điều hướng trong ví dụ này, một phần dành cho cấu trúc và một phần dành cho giao diện. Phần hình thức mô tả màu sắc và các kiểu khác mang lại vẻ ngoài hấp dẫn, còn phần cấu trúc giải thích cách thức và vị trí các mục menu sẽ được đặt.

Tránh namespace

Trong CSS, namespace là các cấu trúc theo ngữ nghĩa, cho phép bạn cung cấp một tiền tố namespace cho các lựa chọn. Để phân biệt giữa các mô-đun, thư viện hoặc các phần khác của codebase có thể có tên class xung đột, tiền tố namespace được sử dụng.

Tuy nhiên, dù hữu ích, tính năng này có thể gây ra các vấn đề về tính đặc hiệu và khả năng bảo trì.

Một trong những nhược điểm lớn nhất của namespace là khó xử lý tính đặc hiệu của bộ chọn. Tiền tố namespace có thể làm cho lựa chọn trở nên cụ thể hơn, khiến việc ghi đè kiểu trong tương lai trở nên khó khăn hơn.

Điều này dẫn đến code bloat CSS, gây nhầm lẫn và khó duy trì theo thời gian.

Ví dụ:

/* With namespace */

.my-module .content {
 background-color: blue;
}

/* Without namespace */

.module-header {
 background-color: red;
}

.module-content {
 background-color: yellow;

}

Tiền tố namespace .my-module và .content đều được sử dụng trong khối code chính. Kết quả là việc lựa chọn trở nên chính xác hơn, hạn chế ghi đè kiểu trong tương lai.

Ở phần thứ hai, namespace được thay bằng tên class mô tả .module-header và .module-content. Ngoài việc làm cho code dễ hiểu hơn, điều này khiến việc bảo trì trở nên đơn giản hơn.

Dùng namespace sẽ làm tăng thêm độ phức tạp không cần thiết cho chương trình của bạn, đặc biệt là khi nhiều người đang làm việc trên các phần khác nhau của cùng một dự án. Bạn có thể thấy khó hiểu và khó thay đổi code vì các nhóm khác nhau có thể sử dụng những tiền tố namespace khác nhau.

Ví dụ:

.header {

 background-color: red;

}

.content {

 background-color: yellow;

}

Bằng cách sử dụng namespace mô tả, bạn có thể loại bỏ yêu cầu cần có namespace và có thể giữ codebase theo cấu trúc tốt và dễ hiểu.

Tránh dùng tên chung chung

Trong các dự án JavaScript, việc tránh dùng tên chung cho các lớp CSS và ID là rất quan trọng. Chúng chỉ làm phức tạp việc bảo trì mã và tăng rủi ro khi đặt tên. Để đảm bảo một codebase bền vững và có khả năng mở rộng, bạn nên sử dụng các tên chính xác hơn trong phạm vi của một thành phần hoặc mô-đun.

Ví dụ:

<!-- Incorrect use of global names -->

<div class="container">
 <div class="sidebar">

   <!-- Content here -->

 </div>
</div>

Class chung tên sidebar và container ở ví dụ trên dễ bị xung đột với các style sheet hoặc code JavaScript khác bên trong dự án. Chẳng hạn, nếu hai style sheet chỉ định cùng một lớp .sidebar, một có nền màu xanh lam và một có nền màu đỏ, thì màu của thanh bên sẽ phụ thuộc vào lần tải style sheet cuối cùng. Kết quả bất ngờ và không thể đoán trước có thể xảy ra từ điều này.

Tốt hơn bạn nên dùng tên chính xác hơn trong phạm vi thành phần hoặc mô đun liên quản để giảm thiểu những vấn đề đó.

Phiên bản nâng cấp:

<!-- Improved with specific names -->

<div class="header__container">
 <div class="sidebar__content">

   <!-- Content here -->

 </div>
</div>

Ở đây, tên class header_container và sidebar_content làm rõ chức năng của từng phần.

Dùng tên cụ thể giảm rủi ro xung đột ten và đảm bảo kiểu đó chỉ ảnh hưởng tới các thành phần liên quan.

Dùng quy ước đặt tên BEM

BEM (Block Element Modifier) phổ biến trong việc đặt tên cho các lớp CSS và ID ở dự án JavaScript. BEM cung cấp một cách đặt tên các phần tử có cấu trúc và theo mô-đun, khuyến khích khả năng sử dụng lại và giúp việc duy trì cơ sở mã dễ dàng hơn.

Các quy ước BEM bao gồm khối, phần tử và công cụ sửa đổi. Một phần tử cấp cao hoặc một thành phần độc lập được gọi là một khối. Các phần tử là các phần thành phần của một khối dựa trên ngữ cảnh của khối. Công cụ sửa đổi có thể thay đổi giao diện hoặc hành vi của một khối hoặc phần tử.

Ví dụ:

/* Ví dụ quy ước đặt tên theo BEM */

/* Block */
.header {} 

/* Thành phần của block */
.header__logo {} 
.header__menu {}

/* Modifier của thành phần */
.header__menu--active {} 

Ví dụ trên hiện một khối header kèm logo và menu. Mục menu nhận thay đổi active để cho thấy rằng nó đã hoạt động.

Bạn có thể nhanh chóng xác định các thành phần cơ bản và kết nối giữa các phần khác nhau, làm cho cấu trúc và hệ thống phân cấp của cơ sở mã rõ ràng hơn.

Trên đây là một số cách đặt tên class CSS và ID tốt nhất. Hi vọng bài viết có lựa chọn phù hợp với bạn.