2010-01-02 105 views
3

如果有人讓我知道,我沒有在這裏看到關於它的任何內容。CSS選擇器樣式

這是我寫的一個CSS選擇器的例子。

div#container div#h h1 { /* styles */ } 
div#container div#h ul#navi { /* styles */ } 
div#container div#h ul#navi li.selected { /* styles */ } 

我寫了所有我喜歡的CSS。這使我可以避免讓樣式浮動,並且我可以在技術上輕鬆地重用相同的類名。例如,我可能會在整個網站的多個元素上使用.selected。

我還指定類/ id之前的元素類型(div,ul等),除非該樣式用於多個元素。我還在id之前指定了元素,即使只有一個id,因爲它可以讓我在閱讀CSS時輕鬆地知道元素。例如,我會馬上知道em#示例最可能具有斜體的字體風格。

這不是關於CSS格式化的問題,而是關於編寫選擇器的問題。

我很想聽聽關於這種方法的意見,因爲我已經使用了好幾年了,而且我正在重新評估我的傾向。

雖然它有點偏離主題,我也寫這樣的選擇器庫的選擇器(例如jQuery)。儘管我還沒有研究過jQuery的內部,看看用ID指定元素是否存在性能問題。

回答

2

我認爲這取決於選擇器的用途。

幾乎每個網站都有一個或幾個樣式表,用於「皮膚」網站 - 字體,文本顏色,鏈接顏色/懸停,行間距等,您不希望這些選擇器非常具體。同樣,如果你有一個組件或元素在許多頁面中被重用,並且總是需要看起來一樣 - 比如讓我們在這裏說標籤 - 那麼如果你使用基於ID的選擇器將會是一個痛苦的維護。

我總是在選擇器中使用ID,如果它指向特定頁面上的特定元素。沒有什麼比試圖弄清楚爲什麼你的規則似乎無法工作是因爲與其他規則相沖突,如果所有事情都是類,就會發生很多事情。另一方面,我認爲嵌套ID(#container #h)是多餘的,因爲ID的目的是唯一的。如果在同一頁面上有多個具有相同ID的元素,那麼最終會出現各種問題。

當你的選擇器提供一些被表示的「結構」時,它確實使CSS更容易理解,但說實話,我認爲這與分離問題的想法背道而馳。出於完全合法的原因,#navi可能會移出#h,現在有人必須更新#navi的樣式表,即使它沒有任何變化。

Darrell指出,有點主觀,但這是我的兩美分。

+0

好點。 ID的東西有點棘手。如果我想讓該ID專門存在,我只會爲父選擇器設置一個ID。現在我可以簡單地使用#id,但是我仍然將它放在頭文件(這將是父代)的組中的CSS文件中。所以如果有人想移動它,他們很可能會移動這條線,所以爲什麼不重新改寫選擇器?如果您想要ID可移動,請不要指定父母。因爲這個問題是主觀的,所以我會解決這個問題。謝謝! – William 2010-01-02 20:20:04

1

雖然這個問題有點主觀,但我不得不說我贊同你的想法。我認爲在閱讀代碼時選擇器更清晰之前定義元素並且不太容易出錯。

+0

雖然格式確實與格式有關,但可能存在一些實際問題。例如,有些人可能會覺得,它不允許您輕鬆地使用從一個元素到另一個元素的樣式,而無需修改CSS文件。這是我正在尋找的東西。很高興聽到你的同意。 :) – William 2010-01-02 19:34:25