Tại sao tôi không nên sử dụng ID kiểu bằng cách sử dụng CSS?

Question

thể trùng lặp:
Why selecting by ID is not recommended in CSS?

Tôi đã đọc trong vô số chủ đề và bài viết mà tôi không bao giờ nên sử dụng "id" thuộc tính để cung cấp cho phong cách css nhưng các lớp học để thay thế.

Tôi biết các lớp học có thể sử dụng lại được, nhưng chỉ riêng điều đó thôi thì dường như không có lý lẽ đủ mạnh để không sử dụng chúng. Cuối cùng, ID là cần thiết cho javascript, vậy tại sao không tận dụng lợi thế của chúng, vì chúng không đi đâu cả?

Ai đó có thể giải thích cho tôi lý do cho những ý kiến ​​này không?

Answer 1

ID kiểu dáng đi ngược lại các nguyên tắc DRY và là điều cần tránh, nếu có ý nghĩa. Có những tình huống mà bạn cần phải tạo kiểu cho một đối tượng duy nhất và bạn biết rằng nó sẽ không bao giờ được chia sẻ với bất kỳ thứ gì khác trên trang vì vậy tôi nghĩ rằng không bao gồm không bao gồm ID phong cách là không trung thực, miễn là bạn biết chấp nhận làm những gì bạn cần làm để hoàn thành công việc.

Answer 2

Không có lý do cụ thể nào để tránh sử dụng bộ chọn ID. Đừng tin mọi thứ bạn đọc.

Điều đó nói rằng, nếu bạn tạo kiểu cho mọi thứ bằng ID, bạn sẽ mất đi những lợi ích của lớp học.

Answer 3

Tạo kiểu bằng id là OK, nhưng nói chung bạn chỉ nên sử dụng nó cho các trường hợp ngoại lệ nếu bạn muốn tối đa hóa các lớp học của mình có thể sử dụng lại được. Ví dụ:

<div id="myid" class="box"></div> 

.box { 
    padding:1em; 
    border:1px solid #ccc; 
    color:#222; 
} 
#myid { 
    padding:2em; 
} 

Nếu bạn đang tạo kiểu tóc chủ yếu bởi id, nó cho thấy bạn có thể viết CSS dư thừa và không biết tận dụng các lớp học và các thác đủ.

Answer 4

Nếu bạn đang tìm kiếm một quy tắc của ngón tay cái khi sử dụng ID, đây là một mà tôi đang theo: yếu tố

• Lên trên đó không bao giờ lặp đi lặp lại, chẳng hạn như #top Quay:

  ID , #wrapper, #footer, v.v.

• Các mục cần được xác định bằng tập lệnh bên ngoài hoặc tương tự.
• <a name="anchor_name" id="anchor_name"><a> trường hợp. Thực hành mã hóa tốt là cung cấp ID cho neo.