8 phương pháp hay nhất để đặt tên cho các lớp CSS và ID trong một dự án JavaScript
Quy ước đặt tên cho lớp 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à tính linh hoạt của cơ sở mã. Làm theo các phương pháp hay nhất là rất quan trọng khi đặt tên cho các lớp CSS và ID trong một dự án JavaScript.
Mục Lục
1. Sử dụng tên 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ử là rất quan trọng. Tên ngữ nghĩa cung cấp ngữ cảnh có ý nghĩa và làm cho mã dễ hiểu hơn.
Chẳng hạn, thay vì sử dụng tên truyền thống như hộp hoặc người giữhãy thử sử dụng các tên như tiêu đề hoặc thanh bên phản ánh vai trò cụ thể của thành phần.
.header {}
.sidebar {}
2. Sử dụng các 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 lớp CSS và ID. Sử dụng cùng một tiêu chuẩn đặt tên trên bảng giúp duy trì cấu trúc của cơ sở mã đơn giản hơn.
Các 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à các 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à có thể 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:
.nav {
display: flex;
list-style: none;
}
.nav__item {
margin-right: 1rem;
}
.nav__link {
text-decoration: none;
color: #333;
}
.nav__link:hover {
text-decoration: underline;
}
Bạn có hai phần riêng biệt của mã 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, trong khi phần cấu trúc giải thích cách thức và vị trí các mục menu sẽ được định vị.
3. Tránh các không gian tên
Trong CSS, không gian tên là cấu trúc ngữ nghĩa cho phép bạn cung cấp tiền tố không gian tên cho các lựa chọn của chúng. Để phân biệt giữa các mô-đun, thư viện hoặc các phần khác của cơ sở mã có thể có các tên lớp xung đột, tiền tố không gian tên được sử dụng.
Tuy nhiên, tính năng này rất hữu ích, nó 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 không gian tên là khó xử lý tính đặc hiệu của bộ chọn. Tiền tố không gian tên 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 mã CSS phình to, gây nhầm lẫn và khó duy trì theo thời gian.
Lấy ví dụ:
.my-module .content {
background-color: blue;
}
.module-header {
background-color: red;
}
.module-content {
background-color: yellow;
}
Tiền tố không gian tên .my-mô-đun Và .nội dung đều được sử dụng trong khối mã chính. Kết quả là việc lựa chọn trở nên chính xác hơn, làm cho kiểu ghi đè trong tương lai trở nên khó khăn hơn.
Trong phần thứ hai, không gian tên được thay thế bằng tên lớp mô tả .module-tiêu đề Và .module-nội dung. Ngoài việc làm cho mã dễ hiểu hơn, điều này cũng làm cho nó đơn giản hơn để bảo trì.
Việc sử dụng không gian tên 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 mã của nhau vì các nhóm khác nhau có thể sử dụng các tiền tố không gian tên khác nhau.
Ví dụ, sử dụng các tên lớp mang tính mô tả:
.header { background-color: red;
}
.content {
background-color: yellow;
}
Bằng cách sử dụng tên lớp mô tả, bạn có thể loại bỏ yêu cầu về không gian tên và bạn có thể giữ cho cơ sở mã của mình có cấu trúc tốt và dễ hiểu.
4. Tránh tên toàn cầu
Trong các dự án JavaScript, việc tránh các tên chung cho các lớp CSS và ID là rất quan trọng. Tên toàn cầu làm phức tạp việc bảo trì mã và tăng khả năng đặt tên rủi ro. Để đảm bảo một cơ sở mã lâu dài hơn 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.
Hãy xem xét ví dụ dưới đây:
<div class="container">
<div class="sidebar">
</div>
</div>
Tên lớp chung thanh bên Và thùng đựng hàng trong ví dụ trên dễ bị xung đột với các biểu định kiểu hoặc mã JavaScript khác bên trong dự án. Chẳng hạn, nếu hai biểu định kiểu chỉ định cùng .thanh bên lớp, một lớp có nền màu xanh lam và lớp kia có nền màu đỏ, màu của thanh bên sẽ phụ thuộc vào biểu định kiểu nào tải lần cuối. 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 là sử dụng các tên chính xác hơn có phạm vi trong thành phần hoặc mô-đun có liên quan để giảm thiểu những vấn đề này.
Nhìn vào một phiên bản nâng cao.
<div class="header__container">
<div class="sidebar__content">
</div>
</div>
Trong phiên bản đã thay đổi, tên lớp tiêu đề__container Và thanh bên__nội dung làm rõ mỗi phần tử dùng để làm gì và nó làm gì.
Sử dụng các tên cụ thể giúp giảm nguy cơ xung đột đặt tên và đảm bảo rằng các kiểu chỉ ảnh hưởng đến các thành phần dự đoán bên trong các thành phần hoặc mô-đun tương ứng của chúng.
5. Sử dụng Quy ước đặt tên BEM
Quy ước đặt tên BEM (Block Element Modifier) phổ biến để đặt tên cho các lớp CSS và ID trong các 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 các 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ử.
Đây là một ví dụ sử dụng quy ước đặt tên BEM:
.header {}
.header__logo {}
.header__menu {}
.header__menu--active {}
Hình minh họa trên hiển thị một tiêu đề khối với một Logo và một thực đơn yếu tố. Các thực đơn mục nhận được tích cực thay đổi để cho thấy rằng nó đã trở thành hoạt động.
Bạn có thể nhanh chóng xác định các thành phần cơ bản và các 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.
6. Sử dụng Tiền tố hoặc Hậu tố
Bạn có thể thêm các cài đặt bổ sung vào tên ID và lớp CSS bằng cách thêm tiền tố hoặc hậu tố cho chúng, đặc biệt là trong các dự án lớn hơn. Bạn có thể sử dụng một tiền tố như js– để chỉ ra rằng một lớp hoặc ID cung cấp khả năng JavaScript. Các quy ước đặt tên JavaScript cùng với các quy ước đặt tên CSS này có thể giúp bạn tiết kiệm thời gian và công sức về lâu dài.
<button class="js-toggle">Toggle</button>
<div id="js-modal">Modal</div>
7. Sử dụng tên mô tả
Bạn có thể hiểu rõ hơn về mục đích, chức năng hoặc nội dung của một phần tử thông qua các tên mô tả.
Hãy xem xét ví dụ dưới đây:
.blue-box {
}
a {
}
Tên lớp hộp xanh Và Một trong ví dụ trên không truyền thông tin liên quan về các thành phần mà chúng tham chiếu. Việc không đặt tên mô tả có thể khiến bạn khó hiểu nhanh mục đích hoặc vai trò của một số thành phần bên trong chương trình.
Sử dụng các tên mô tả giải thích chính xác vai trò của phần tử để cải thiện khả năng đọc và khả năng bảo trì của mã.
Hãy xem xét ví dụ cải tiến dưới đây:
.product-card {
}
.navigation-link {
}
Tên lớp thẻ sản phẩm Và liên kết điều hướng trong phiên bản cập nhật, hãy làm rõ mục đích của từng phần tử. Bạn sẽ thấy việc khám phá và chỉnh sửa mã đơn giản hơn với các tên mô tả này.
Sử dụng tên mô tả có lợi cho các nhà phát triển hiện tại và tiềm năng trong tương lai làm việc trên cơ sở mã. Khi xem lại mã sau một thời gian, bạn có thể dễ dàng hiểu cấu trúc và hoạt động của các phần.
8. Sử dụng tên ngắn gọn và súc tích
Mặc dù các tên riêng biệt là cần thiết nhưng việc giữ cho chúng ngắn gọn cũng rất quan trọng. Tên lớp và ID dài có thể làm cho mã khó đọc và khó bảo trì hơn. Cố gắng đạt được sự cân bằng giữa ngắn gọn và chi tiết. Ngoài ra, hãy cân nhắc sử dụng các từ viết tắt hoặc từ viết tắt nổi tiếng trong ngữ cảnh dự án.
Hãy xem xét trường hợp bạn muốn sử dụng CSS để tùy chỉnh menu điều hướng trên trang web của mình. Bạn có thể sử dụng tên ngắn hơn, cụ thể hơn như mục điều hướng hoặc liên kết điều hướng thay vì những cái dài như giao diện điều hướng hoặc liên kết điều hướng chính.
.nav-item {
}.nav-link {
}
Sử dụng từ viết tắt hoặc từ viết tắt phổ biến trong ngữ cảnh dự án, chẳng hạn như điều hướng vì dẫn đườngcó thể làm cho mã dễ hiểu hơn nhiều đối với các lập trình viên khác.
Các phương pháp hay nhất để đặt tên cho các lớp CSS và ID
Trong một dự án JavaScript, điều quan trọng là phải đặt tên thích hợp cho các lớp CSS và ID để mã có thể đọc được, bảo trì và khả năng mở rộng.
Bạn có thể làm cho biểu định kiểu đơn giản hơn và cải thiện chất lượng của mã. Dành thời gian để đặt ra các quy ước đặt tên tốt sẽ được đền đáp về lâu dài bằng cách giúp bạn và những người khác hiểu và duy trì cơ sở mã dễ dàng hơn.