2012-03-24 68 views
2

根據CSS原則時,我們要實現的款式可重用性,我們應該使用class屬性,當我們知道有在整個DOM結構中的獨特元素我們應該使用該元素的id屬性,然後指定樣式。差異屬性在HTML和CSS

但在這個時代的Web應用程序,DOM結構過於複雜且有重複id的可能性。最好的例子是#title。它的名字可以出現在文件的任何地方。現在最好的部分是,如果我使用#title.title定義樣式(假設它們已經出現不止一次且具有不同的父級),那麼CSS生成的樣式是相同的。這的jsfiddle將有助於你明白我的意思http://jsfiddle.net/dewbot/LGAQD/

我下的印象是一樣JS渲染,CSS解析器停止迭代時,發現第一#title但它不會發生這不斷重複,直到它到達EOF就像class 。所以這就產生了一個問題,爲什麼我們應該使用多個class而不是id

回答

4

所以出現這種情況,我們爲什麼要使用多個class,而不是id一個問題嗎?

Because the HTML spec says so,違反規則通常會導致代碼被破壞。

是否有意義由同一個ID識別多個元素?我想不是。這是什麼類的:分類類似的元素。

現在最好的部分是,如果我使用#title.title而定義樣式(假定他們已經出現了不止一次,並有不同的父)的CSS生成是相同的輸出。

這是自然的行爲,並且在這樣做本身任何瀏覽器不是一個錯誤。不過,這不是你應該依賴的那種行爲,因爲它處理不符合標準的標記,這通常是不好的。

我是根據印象,就像JS渲染,CSS解析器停止迭代時,發現第一#title但它不會發生這不斷重複,直到它到達EOF就像class

現在,這是錯誤的。 CSS解析器在每個元素的基礎上做匹配的選擇器:他們沒有遵循一條規則並遍歷DOM,將它應用於與它匹配的任何元素;相反,他們採取每個元素,並嘗試將其與儘可能多的規則進行匹配。以這種方式工作,解析器不知道 ID是否已在文檔的其他地方使用過,也不在意。它根據元素說的是簡單匹配This answer覆蓋更詳細。

只要元素具有特定的ID,它就必須匹配任何查找該特定ID的ID選擇器。因此,解析器希望將具有給定ID的任何和所有元素都匹配到單個ID選擇器,即使在HTML中,具有相同ID的多個元素也是不正確的。換句話說,CSS不強制HTML所需的唯一ID。 This answer解釋。

綜上所述,底線是:在一次時只爲一個元素分配ID,並使用類來分組多個相似的元素。 不要試圖變得聰明並遵守規則。

+0

_Does很有意義通過與我所說的複雜DOM結構相同的ID_來識別多個元素。如果一個元素的工作是作爲標題,那麼它將具有「標識」作爲「標題」。但@Anubhav在這裏指定的命名約定是我真正想要的。 反正那些鏈接是好讀。大幫助!謝謝 – 2012-03-24 08:24:45

+1

@dewbot:無論它是多麼複雜或使用什麼命名約定都無關緊要。它仍然是一個單一的DOM結構,並且規則說一個ID一次只能出現在單個文檔中一次**。這就是我所駕駛的。 – BoltClock 2012-03-24 08:25:47

4

我認爲你有CSS錯誤的解析。瀏覽器不會通過CSS文件行進行排序,並將樣式應用於HTML文件中的元素,反之亦然。瀏覽器解析HTML,並且每當它找到classid屬性時,它就會在CSS文件中查找它。 (這是非常簡單的,但它有助於明白)。

僅僅因爲瀏覽器正確地呈現它,如果你有多個id s並不意味着你應該這樣做。 standardclearly says表示id具有是唯一的。

1

你已經自己回答了。

CSS確實將它應用於所有可以找到的id s和class。但是,JS/jQuery將首先實現它。

所以,你的問題就變成了:

,我應該使用相同的id s到了JS操縱許多元素?答案:Baaaaa .... D決定

我是否應該將相同的id的許多元素用於CSS?答:還差,決定!但會實現你的規則

你還應該嘗試使用以分層方式應用的CSS和JS規則,這樣,你永遠不會出錯。像,#Heading div#Title{css rules here}$('#Heading div#Titles')...jQuery rules here

接下來的事情是嘗試以保守的方式實施ids。

然後,嘗試爲您的網站/應用中的元素提供唯一的ID,而不是單個頁面。這將爲您節省您在頁面中包含的多頁實用程序腳本。

例如:標題上的主頁頁面的頂部:#Home-Top-Heading

希望它能幫助。