樣式化HTML元素的正確方法

Question

我知道你可以這樣做：

<img style="position: absolute;" src="test.png" alt="Test image" width="50" height="50" />

我不使用第一種方法，因為我知道外部樣式表是為了從HTML代碼中分離CSS。 我喜歡這樣做。

<img id="foobar" src="test.png" alt="Test image" width="50" height="50" />

有時候我使用這種方法，但是當我看到一些像Facebook，Instagram或Twitter這樣的大型網站的專業HTML編碼時，我發現他們使用了很多容器div ，這讓我不確定我是做得對還是不。

<div id="foobar">
    <img src="test.png" alt="Test image" width="50" height="50" /> //use 'src' in place of 'sc'
</div>

我發現我大多使用這種方法出於某種原因我實際上並不知道。 但在這種情況下，我只是添加樣式到div而不是直接添加到img 。 或者當我這樣做時，我通過在CSS中使用#foobar img{ ... }選擇樣式來直接添加樣式到img元素。

<div id="foo">
    <img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>

通常我會這樣做，如果只需要一個容器來完成工作，我會在img上有一些樣式，而在div#foo元素上有一些樣式。

我知道可能有更多的方法，但主要是后兩種方法，我不太確定何時使用它們。 我知道還有其他HTML元素，但我只是用div和img進行演示。

話雖如此，我想知道每種方法的優點和缺點是什么，哪種方法應該是一種好的做法？

Answer 1

許多不必要的標簽會產生一個稱為“標簽湯”（ ref ）的問題。 這是手寫HTML中的一個問題; 您的目標是使用CSS樣式發揮最大潛力，並避免使用多余和無意義的標簽。

在“正確”創建文檔時，您應該從文檔大綱的角度出發。 想象一下，該頁面是一個報告，它將從上到下閱讀，並且左對齊且風格簡單。 您使用最少的標記設計此層次結構，充分利用標題，部分，文章和頁腳標記。 在“過去的日子”中，你會使用div代替。

接下來，應用樣式以影響外觀，包括文檔中元素相對於彼此的定位。 這是可以添加任何非語義div的地方，以便於在盒子模型中進行定位和組織。 同樣，您仍然嘗試將包裝或非語義標簽保持在最低限度。

考慮到所有這些因素，通常，大型網站不會由干凈且嚴格的語義文檔大綱組成。 通常，這些站點由代碼組裝，在整個頁面中構建動態內容。 在這些場景中，更多的非語義包裝標簽通常作為生成HTML片段的模塊化，自包含代碼的副產品。 此外，Web應用程序可能需要包裝標簽以幫助通過AJAX或其他JavaScript動作重繪動態內容。

CSS進入游戲的地方也是添加非語義包裝標簽的一個因素。 由於CSS的特殊性（ 魔術！ ），偶爾需要一些額外的“句柄”，你可以使用這些句柄來真正，特別地對特定的標簽組合。

外賣是編寫您可以在項目中管理的最干凈，最語義的代碼。 除了最小化和語義之外，本身並沒有“正確的方法”。

進一步閱讀

• 語義HTML - http://en.wikipedia.org/wiki/Semantic_HTML
• 語義HTML有多重要？ - http://www.vanseodesign.com/web-design/semantic-html/
• 關於HTML語義和前端架構 - http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
• “使用語義HTML有什么好處？” - 使用語義HTML有什么好處？
• CSS特異性：你應該知道的事情 - http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

在我看來，沒有絕對的答案。這取決於你的設計。

如果您的網站中有許多類似的部分要設置相同的樣式，則應使用div容器（或其他元素，如<nav>, <header>等...）。

這種方法的優點是你可以設置部分內的其他元素，而不給每個元素一個class屬性或id ，從而使代碼更清晰，更容易維護。

如果你想設置一個獨特的元素，我最好使用id屬性並將CSS添加到這個id。

請記住，id是唯一的，因此，如果在同一頁面中有兩個具有相同CSS的元素，則必須復制CSS代碼，這絕不是一個好主意。

Answer 3

使用樣式表的主要原因是能夠將其緩存在網站中，從而使初始加載后的加載時間更快。 你在html上看到一些帶有樣式的元素的原因可能是因為它是通過服務器端代碼或客戶端腳本注入的。 那些代碼部分對於FB開發人員來說實際上是不可見的，而他們只會看到幾行服務器代碼，所以在他們這一方面，無論是否在樣式表上或在HTML本身。

另一個原因可能是當許多類在彼此之上（嵌套類）完成太多樣式時，最終選項可能是在html元素本身上使用它，因為它占用最高優先級並覆蓋由類或任何類完成的任何樣式其他形式。

使用樣式的許多原因，但通常它更容易讓開發人員保持干凈的html / css /腳本，如果可能分離，但是當事情變得復雜時，有一段時間打破正常的做法實際上使它更容易...