Nếu Bộ chọn CSS là #id, bạn có cần phải định phạm chúng không?

Question

Nếu tôi có một cấu trúc như thế này:

<div id="main"> 
    <div id="sidebar"> 
    <div id="tag-cloud"/> 
    </div> 
</div> 

... những gì đang thực hành tốt nhất cho css:

#main #sidebar #tag-cloud { ... } 
#tag-cloud { ... } 

Hoặc nếu id='main' là thay vì class='main', nó sẽ là tồi tệ hơn để phạm vi? Tôi chỉ tự hỏi, nếu bạn có id, bạn cần phải phạm vi ở tất cả?

Answer 1

Tùy thuộc. Hầu hết thời gian, bạn có thể nói:

#tag-cloud { ... } 

là tốt nhất (hiệu suất, xem bên dưới). Điều này:

#main #sidebar #tag-cloud { ... } 

chỉ thực hiện rất nhiều kiểm tra không cần thiết bị ràng buộc để thành công.

Trừ bạn muốn làm điều này:

#sidebar #tag-cloud { ... } 
#not-sidebar #tag-cloud { ... } 

trong trường hợp Phạm vi xác định một cái nhìn khác nhau tùy thuộc vào nơi #tag-cloud là. Tất nhiên, có thể chỉ có một #tag-cloud trong trang của bạn, nhưng CSS của bạn có thể xử lý cả hai trường hợp.

---

Kiểm tra CSS được thực hiện từ phải sang trái. Đây:

#main #sidebar #tag-cloud { ... } 

để đánh giá:. "Yếu tố với ID tag-cloud mà có một mẹ với ID sidebar mà có một mẹ với ID main Nếu đó là cách trang web của bạn trông nào, đó chỉ là một toàn bộ rất nhiều vô ích DOM traversal.

Không để nói về một thực tế rằng với quá cụ thể, xác định phạm vi thừa toàn bộ CSS phải thay đổi trong rất nhiều nơi nếu bạn sửa đổi cấu trúc trang web của bạn, mà bằng cách nào đó bất chấp mục đích này.

Answer 2

Thông thường, bạn không nên có xung đột ID trong tài liệu html của mình. Vì vậy, từ quan điểm đó, phạm vi trên ID là một sự lãng phí thời gian.

Tuy nhiên, nếu bạn không chính xác có nhiều phần tử có cùng id thì bạn có thể cần sử dụng phạm vi. Nhưng điều này dẫn đến html không hợp lệ và có thể gây ra các hậu quả không mong muốn khác và do đó nên tránh.

Answer 3

ID phải là duy nhất trong một tài liệu, trừ khi bạn vì một lý do chia sẻ chúng qua các trang, nơi #something có thể là một điều hoàn toàn khác nhau trong một container khác nhau trên một trang khác, tôi muốn chỉ cần sử dụng:

#tag-cloud { ... } 

Answer 4

Tôi không nghĩ rằng nó có ý nghĩa nhiều với id phạm vi, Tuy nhiên tôi thích có tất cả các bộ chọn khác của tôi được dò tìm đến một id.

Có thể bạn nên tự hỏi mình nếu bạn cần tất cả các id hoặc nếu một số phải có lớp học hoặc không có gì cả. Càng đơn giản càng đẹp.

Answer 5

ID nên là duy nhất, nên phạm vi nên không cần thiết.Một công cụ javascript tốt sẽ sử dụng các ID này làm khóa để tra cứu nhanh một phần tử bằng ID, do đó việc dò tìm sẽ thực sự làm chậm mọi thứ.

Nhưng, bạn có thể có tài liệu không hợp lệ với nhiều ID, trong trường hợp đó, phạm vi sẽ đảm bảo bạn không gặp phải nhiều yếu tố bất ngờ. Nhưng trong trường hợp này, bạn nên thực sự sửa chữa ID của bạn để thay thế.

Answer 6

Tôi luôn phạm vi. Bạn chỉ có thể có một trang tag-cloud trên trang này, nhưng bạn có thể có một khác nhau tag-cloud trên một khu vực khác trên trang web của bạn, yêu cầu một kiểu khác.

Cá nhân, tôi không bao giờ sử dụng ID trong CSS của mình. Chúng hạn chế và có thể gây ra vấn đề nếu trang web tĩnh của bạn được thay đổi thành một trang động, trong đó các ID được trả lại (ví dụ: ASP.NET).

Answer 7

Bạn đã tự mình nói: ID là duy nhất. Vì vậy, phạm vi chỉ thêm lộn xộn. Nhưng nếu chúng được cố ý có cho mục đích tài liệu thuần túy, tôi sẽ thay thế chúng bằng cách chỉ thụt lề các quy tắc.

Ví dụ: thay vì

#main { 
    /**/ 
} 

#main #sidebar { 
    /**/ 
} 

#main #sidebar #tag-cloud { 
    /**/ 
} 

làm

#main { 
    /**/ 
} 

    #sidebar { 
     /**/ 
    } 

     #tag-cloud { 
      /**/ 
     } 

Answer 8

thực hành tốt nhất của id là sử dụng như wrapper

<div id="main"><!--main wrapper--> 
    <div id="section"><!--section wrapper--> 
    <p>something</p> 
    </div> 
    <div id="sidebar"><!--sidebar wrapper--> 
    <div class="tag-cloud"> 
    </div> 

</div> 

tốt hơn bắt đầu của bạn với Id cuối cùng

#sidebar #tag-cloud { ... } 

AS trên công cụ báo lỗi tốc độ trang google, khuyên bạn nên sử dụng độ sâu ít hơn như bộ chọn css

Answer 9

Không, bạn không nên dùng id vì chúng phải là duy nhất trên mỗi trang. Nếu bạn có nhiều phần tử sử dụng cùng một ID, HTML của bạn sẽ không xác thực và nó sẽ gây ra sự cố khi cố truy cập DOM qua javascript.

Ví dụ, nếu bạn có nhiều của Id trên trang:

var myElements = document.getElementById('myduplicateid') 

Would return phần tử đầu tiên nó thấy phù hợp mà có thể không được kết quả mong muốn.

nếu bạn đang gặp vấn đề với đến với id cho các đối tượng similiarly nhóm, tôi khuyên bạn nên làm một cái gì đó như thế này (nút ví dụ đài phát thanh)

<input type = "radio" id = "my_radio:1" value = "1" name = "my_radio"> 
<input type = "radio" id = "my_radio:2" value = "2" name = "my_radio"> 

Trong javascript của bạn, sau đó bạn sẽ làm điều gì đó như thế này:

var my radio = document.getElementById('my_radio:1') 

Hoặc các bạn đang sử dụng jQuery, một cái gì đó như thế này:

var my radios = $('#my_radio\\:1') # Must escape colon with double slash since it's a special character in jQuery