Cả hai đều hoàn toàn hợp lệ và tùy chọn nào bạn sử dụng tùy thuộc vào việc bạn muốn làm.
Nếu bạn đang tạo một lớp chung mà bạn muốn để có thể sử dụng trong suốt toàn bộ trang web của bạn bất kể yếu tố và nơi phần tử là, bạn nên chỉ sử dụng .class
. Một ví dụ tốt cho điều này là một cái gì đó như .icon
mà bạn có thể muốn sử dụng trên các liên kết, danh sách các mục, tiêu đề, vv Và bạn muốn để có thể sử dụng chúng ở khắp mọi nơi.
Nếu bạn đang tạo một lớp dành riêng cho/chỉ hoạt động trên một phần tử kiểu nhất định, tốt nhất bạn cũng nên sử dụng phần tử trong bộ chọn.Một ví dụ về điều này sẽ là một danh sách dấu đầu dòng bạn muốn hiển thị trên một dòng, vì lớp này yêu cầu HTML phải là một <ul>
, bạn cũng nên chỉ định nó trong CSS; ul.inline
. Bằng cách này, bạn cũng có thể sử dụng tên lớp "nội tuyến" cho các phần tử khác, mà không có kiểu dáng ảnh hưởng đến cả hai.
Nếu bạn chỉ sử dụng lớp để chọn yếu tố nhưng không nên có bất kỳ kiểu dáng chung nào, bạn nên cụ thể. Ví dụ: bạn có thể muốn đoạn đầu tiên trong phần tử #blog-post
của mình lớn hơn, thì bạn nên chỉ định cả hai lớp #blog-post
và lớp; #blog-post p.first
(lưu ý rằng các loại lớp học này hiếm khi cần thiết nữa nhờ các bộ chọn nâng cao như :first-of-type
, h2 + p
v.v.).
Nói rằng ".link
là tốt nhất, a.link
là thứ hai tốt nhất và bộ chọn dài là xấu" chỉ là sai. Tất cả phụ thuộc vào tình hình.
Điều này có thể dẫn đến một trường hợp rất xấu của viêm ruột, mà IMO không đáng để cạo bỏ hàng nghìn giây mà thậm chí không cộng thêm thời gian để nhập một ký tự đơn lẻ. – BoltClock