css中的嵌套ID是否合適？

我一直在試圖就這個問題得到我自己的意見，但不能，所以決定問。css中的嵌套ID是否合適？

儘管似乎衆所周知的是，html中的id是爲了表示頁面上的獨特元素而創建的，但我的經驗是，頁面上獨特元素的數量通常相當大，特別是在自定義表單中。而且，頁面上的很多獨特元素都是嵌套的。

讓我們只是一個簡單的結構是這樣的：

#content 
    form#search-filters 
    #datepicker 
    #search-results

當談到造型的代碼，這個和平，你在一般的兩種方法（我使用SCSS等等都是例子）：

分層組織它，例如

 
#content { 
    columns(8, 12); 
    #search-filters { 
    @include search-filters; 
     etc.

圍棋與普通聲明

 
#content { 
    columns(8, 12); 
} 
#search-fiters { 
    @include search-filters;

而且從我的觀點是該死的冷卻器，有它的第一種方式，而這在某種程度上對所有的邏輯。

這個問題甚至值得用上面例子給出的＃search-filters塊的內容。比方說，您已經使用了一些Rails腳手架，這些腳手架爲託管過濾器的表單的每個元素生成了id，並且您還想引用該id來提供樣式。您知道該元素是唯一的，並且它將以任何擴展搜索過濾器mixin的形式是唯一的。所以你希望它有ID。但是你必須給它一個類，使它在邏輯上一致。

您對這個問題有什麼看法？

P.S.我試圖瞭解是否有這兩種情況下，一些業績差的規範，但它並沒有說什麼： http://www.w3.org/TR/css3-selectors/#class-html

來源

2011-06-22 lyuba

在通用規格中不會找到性能指標。這些東西依賴於實現。 – Alohci

這是一篇有趣的相關文章http://oli.jp/2011/ids/ – lyuba

您通常希望擁有未嵌套的ID和類選擇器，因爲這會爲您提供最佳的呈現性能。您可以在Google的Optimize browser rendering文章中詳細閱讀。

此外，沒有嵌套的CSS選擇器會降低specificity，並允許您更輕鬆地覆蓋特定情況。

對於簡單的網站，有一個可管理的風格量這可能無關緊要，尤其是如果你也處理其他速度方面的權利，如put styles before scripts。在這種情況下，我更喜歡嵌套樣式以提高可讀性。

來源

2011-06-22 13:38:59 Netzpirat

這是一篇有趣的文章！然而，從我以前聽說過，如果瀏覽器發現具有所需id的元素 - 搜索結束。所以這是真的#content＃specific-id不會有什麼區別，因爲搜索將停止在＃specific-id上。我現在試圖找到一些證據信息，但目前不能。 – lyuba

不，CSS引擎在查找'＃specific-id'後繼續向左搜索。當'＃specific-id'沒有嵌套在＃內容中時，則規則不匹配。這在[Mozilla開發者網絡]（https://developer.mozilla.org/en/Writing_Efficient_CSS#How_the_Style_System_Matches_Rules）中有詳細描述，你可以用一個簡單的例子來驗證它：'

Test

' – Netzpirat

我不認爲嵌套的ID選擇將CSS樣式應用於從快瀏覽器渲染的角度來看。

另外，由於您已經擁有該ID，因此只使用該ID將使您的CSS更易於閱讀，而不是具有長選擇器鏈。

如果你打算引用不同的樣式到相同的元素，如果元素應該改變它在頁面上的位置，或者可能被移除，然後在另一個位置重新創建（因此需要不同的選擇器），它是不同的。在這種情況下，也許你需要嵌套選擇器，否則我不認爲需要這樣做。

來源

2011-06-22 13:21:30

css中的嵌套ID是否合適？

回答

相關問題