將CSS中的樣式添加到HTML 5的語義元素是否正確？

是否正確，將樣式添加到html 5語義（導航，頁眉，頁腳等），就像我們將它們添加到div一樣？要使用它們而不是常規的div？將CSS中的樣式添加到HTML 5的語義元素是否正確？

有一次，我聽到了一個我尊重的人，我們不應該爲html 5語義元素添加任何樣式 - 只有在真的需要時添加一點，但沒有多少樣式適用於此元素。他對嗎？

例如

<nav> 
    <ul> 
     ................ 
    <ul> 
</nav> 



nav { 
    background-color: ..... 
    width: .... 
    height: ...... 
    margin: ..... 
    color: ...... 
    padding: ...... 
}

代替

<nav> 
    <div id="nav"> 
     <ul> 
      ................ 
     <ul> 
    </div> 
</nav> 



#nav { 
    background-color: ..... 
    width: .... 
    height: ...... 
    margin: ..... 
    color: ...... 
    padding: ...... 
}

我們應該怎麼做是正確的？這是什麼編碼的正確方法？什麼是完美的處理方式？

來源

2017-05-26 Adrianno Barello

我同意。避免將樣式添加到語義元素。這是因爲當我們談論事物的「外觀」時，這些元素並沒有增加任何新內容。

請記住，你想避免冗餘。如果你需要一個塊元素，你正在考慮'看'，所以使用一個div和樣式。然後立即在該div內添加您的語義元素，如果您願意。將語義元素儘可能隱藏在CSS中，甚至從選擇器中隱藏，無論是在CSS中還是在JavaScript中。但是，添加標記這些語義元素的自定義類很好的清晰。因此，而不是：

div > * h1,

你會這樣寫：

div > .semanticElement h1.

這應該是更好的清晰度，同時避免引用語義元素。

如果上述某些原因不明確，可以這樣想。一個元素的語義變化，現在突然間，我也必須改變CSS和JavaScript，這是荒謬的。

來源

2017-11-06 20:12:51

從你的風格中分離結構/內容（你的html代碼）的想法給了你這種能力，並且實際上在這個方向上推動你。

該結構使多個設備能夠更好地理解您的內容，以便爲用戶提供更好的體驗。例如 - 如果您的菜單隻使用ul > li結構，則某些非常規瀏覽器的設備將無法完全理解這是您網站的菜單，而使用nav > ul > li則完全可以。

樣式只告訴設備應該如何顯示它們 - 並且您應該使用它以便爲用戶提供更好的體驗。

語義元素有助於我們分開頁面的結構，例如：

來源

2017-05-26 11:23:52 Dekel

嗯，HTML5語義（NAV，頁眉，頁腳等）的建立是爲了幫助我們給有意義的和自我描述的名字到我們網頁的部分。他們預計是獨一無二的。

因此，引進這些語義之前，切片，做這種方式：

<div id="main-section"> 
    your content 
</div> 
<div id="sidebar"> 
    your sidebar content 
</div>

HTML5語義理應從我們保存的情況類似上面同時還描述。

樣式被添加到像上面那樣的部分，我不明白爲什麼我們現在不能做同樣的事情。對於向HTML5語義添加樣式並沒有任何規則，但確保首先將HTML5語義用於唯一元素。

來源

2017-05-26 11:27:46 Omeiza

將CSS中的樣式添加到HTML 5的語義元素是否正確？

回答

相關問題