Thuộc tính lớp HTML được sử dụng để chỉ định một hoặc nhiều tên lớp cho một phần tử HTML. Tên lớp có thể được CSS và JavaScript sử dụng để thực hiện một số tác vụ cho các phần tử HTML. Bạn có thể sử dụng lớp này trong CSS với một lớp cụ thể, viết dấu chấm [. ], theo sau là tên của lớp để chọn các phần tử
Một thuộc tính lớp có thể được định nghĩa trong
Bạn mới bắt đầu với HTML/CSS và bạn thấy mình thắc mắc liệu có quy ước đặt tên cho id và lớp của các phần tử DOM trong tài liệu của bạn không
Trước khi chúng ta đi sâu vào nó, hãy để tôi kể cho bạn một câu chuyện ngắn
Trong HTML, không có quy ước đặt tên tiêu chuẩn mà bạn nên tuân theo đối với id và lớp của phần tử. Tuy nhiên, có một số phương pháp hay nhất mà bạn có thể áp dụng để làm cho mã của mình dễ đọc và dễ bảo trì
Những phương pháp hay nhất này là về việc viết mã CSS của bạn theo cách có trật tự và nhất quán để khi bạn hoặc ai đó trong nhóm của bạn cần thêm vào, cấu trúc lại hoặc gỡ lỗi mã, bạn có thể thực hiện dễ dàng—vì bạn hiểu những gì
Ba quy ước đặt tên được sử dụng rộng rãi nhất khi nói đến id và lớp của các phần tử HTML là
- Chữ thường có dấu gạch ngang
- Chữ thường có dấu gạch dưới
- trường hợp lạc đà
Chữ thường có dấu gạch ngang
Đây là cách tôi, cùng với hầu hết các nhà phát triển web mà tôi biết, đặt tên cho các id và lớp phần tử trong tài liệu HTML của mình
- Nếu id hoặc lớp bao gồm một từ duy nhất [hoặc viết tắt], hãy viết nó bằng tất cả các chữ cái viết thường
- Nếu id hoặc lớp bao gồm hai từ trở lên, hãy viết nó bằng tất cả các chữ cái viết thường, tách các cặp từ liền kề bằng dấu gạch nối
Hãy xem xét một ví dụ
Việc bạn sử dụng một dấu gạch nối, hai dấu gạch nối hay nhiều hơn, hoàn toàn tùy thuộc vào bạn
Ví dụ: bạn có thể sử dụng hai dấu gạch nối để biểu thị mối quan hệ cha/con trong cách đặt tên cho các thành phần HTML của mình
Caption goes here
Chữ thường, có dấu gạch dưới
Một số người viết mã HTML thích tách các cặp từ liền kề bằng dấu gạch dưới hơn là dấu gạch nối
Nếu chúng tôi điều chỉnh cùng một ví dụ mà chúng tôi đã sử dụng ở trên cho quy ước đặt tên này, chúng tôi sẽ có đánh dấu HTML sau
Caption goes here
Một lần nữa, bạn có thể sử dụng một dấu gạch dưới, hai dấu gạch dưới hoặc bao nhiêu dấu gạch dưới tùy thích để biểu thị các mối quan hệ phân cấp và lồng các phần tử HTML
Việc sử dụng dấu gạch dưới, mặc dù ít phổ biến hơn, được khuyến khích bởi quy ước đặt tên BEM [Khối, Phần tử, Công cụ sửa đổi] cho các phần tử HTML
Trường hợp lạc đà
Các nhà phát triển JavaScript sẽ tự hỏi liệu họ có thể sử dụng trường hợp lạc đà hay không—kiểu phổ biến nhất để đặt tên cho các biến và hàm JavaScript—trong Biểu định kiểu xếp tầng của họ
Về mặt kỹ thuật, bạn có thể sử dụng trường hợp lạc đà trong id và lớp của các thành phần HTML của mình. Tuy nhiên, điều này dẫn đến một số trường hợp khó khăn và hạn chế khi sử dụng các bộ chọn CSS phức tạp truy vấn các phần tử có chứa một số từ nhất định
Để cho bạn thấy các lớp và id lạc đà trông như thế nào, hãy điều chỉnh lại ví dụ mà chúng ta đã sử dụng trong hai phần trước
Caption goes here
Vì vậy, chính xác những hạn chế của việc sử dụng trường hợp lạc đà trong id và lớp của các phần tử HTML của bạn là gì?
Chà, bạn sẽ không thể tận dụng hết một số bộ chọn thuộc tính CSS vì chúng phân biệt chữ hoa chữ thường. Ví dụ: nếu bạn cố gắng truy vấn các phần tử DOM có chứa “hình thu nhỏ”, bộ chọn của bạn sẽ không khớp với những phần tử có chứa “Hình thu nhỏ. ”
Tất nhiên, bạn có thể giải quyết vấn đề bằng cách kết hợp hai bộ chọn CSS—một cho phiên bản viết hoa của từ và một cho phiên bản viết thường—nhưng quy ước đặt tên của bạn là một hạn chế mà bạn sẽ phải giải quyết bằng cách viết mã CSS bổ sung
BẠn nên chọn cái nào?
Như chúng ta đã thảo luận, không có câu trả lời đúng hay sai ở đây. Bạn có thể viết chữ thường, với dấu gạch ngang và/hoặc dấu gạch dưới, hoặc chữ hoa lạc đà—tùy theo sở thích của bạn và những người còn lại trong nhóm của bạn
Khi nghi ngờ, hãy chọn tất cả các chữ thường có dấu gạch ngang;
Điều quan trọng nhất là chọn một quy ước đặt tên mà bạn và các thành viên trong nhóm của bạn có thể đồng ý, sau đó tuân theo nó một cách tôn giáo. Điều này đảm bảo rằng mọi người viết đánh dấu HTML của họ theo cùng một cách, với các lớp và id được đặt tên nhất quán
Điều quan trọng thứ hai, như hướng dẫn tạo mã HTML và CSS của Google chỉ ra, là sử dụng các tên phản ánh mục đích của phần tử DOM được đề cập. Những tên đó có thể cụ thể hoặc chung chung, miễn là chúng mang tính mô tả