HTML5元素應該有class？es嗎？

-1

我搜索eveywhere找到一個「答案」，但無法找到一個關於這場辯論。我知道這個問題上不存在「這是正確的」或「這是錯誤的」，但我想聽聽可能是什麼「正確的」。HTML5元素應該有class？es嗎？

我有一個關於HTML5元素和CSS（造型）的問題。

那麼什麼，我想知道的一個例子是「更」右：

<header> 
    <div class="some-element-inside">...</div> 
</header>

或

<header class="header"> 
    <div class="some-element-inside">...</div> 
</header>

然後設置其樣式爲：

header .some-element-inside { }

或

.header .some-element-inside { }

或

header.header .some-element-inside { }

我真的想聽聽你的意見，我們在這裏談論的一個簡單的網站與正常頭設計沒有什麼複雜的。

我個人比較喜歡帶類的HTML5元素。

謝謝！

來源

2015-04-02 power2b

正如你所說 - 這是偏好。就我所知，使用其中任何一個都沒有問題。 *個人*，我會與第一個去，因爲我有一個奇怪的癡迷保持我的HTML儘可能乾淨。 – Scott 2015-04-02 19:11:06

直接在標籤上造型會限制其靈活性。如果你想在'header'和'div'上使用相同的樣式怎麼辦？在我看來，所有風格都是相關的。您還應該研究通用架構的OOCSS和BEM方法。 – 2015-04-02 19:13:02

bootstrap使兩者都可用。如果他們正在修改h4的樣式，他們會爲h4和.h4執行這種操作 - 如果您與h4元素髮生衝突，則可以使用該類來回退和使用該類。他們然後將它們設置爲h4，.h4 – ferr 2015-04-02 19:14:24

selector.class被許多人認爲是壞習慣。剩下的兩個，我會去.class，因爲<header>標記的目的不僅是頁面的標題。它也可以是其他元素的標題。您的頁面現在只能有一個標題，但稍後它可能會有更多。一般來說，應用element選擇器應該適用於所有此類型的未來元素和.class選擇器應該適用於選定的元素。

來源

2015-04-02 19:14:54

爲什麼在沒有需要的時候添加一個類？

<header> 
     <nav> 
      <ul> 
       <li>Text 1</li> 
       <li>Text 2</li> 
       <li>Text 3</li> 
      </ul> 
     </nav> 
</header>

在這個例子中，不需要添加一個類。

的CSS將與descendant selectors：

header {} 
header nav {} 
header nav ul {} 
header nav ul li {}

即使當你需要添加一個風格，讓我們在第二個列表標籤說，你可以這樣做，不添加類：

header nav ul li:nth-child(2) {}

所以語義上的方法是保持類的必要性。當你有幾個選擇器，並且你不能從他們的父母瞄準他們時，請使用選擇器。

來源

2015-04-02 19:15:03 Nima

我以某種方式對文件大小達成一致，但是您會應用哪些CSS？例如，您在'標題'標籤內有導航。它會像'標題導航'或風格的導航本身'導航'？ – power2b 2015-04-02 19:18:25

剛剛更新了答案。我通常會與層次結構一起去。 – Nima 2015-04-02 19:26:21

我仍然「教會」不使用CSS文件中的HTML5元素，而不給它一個類。我不知道爲什麼，但我見過很多專業網站這樣做（給HTML5元素一個類）。不知何故，我發現它很噁心，哈哈。告訴我更多。 – power2b 2015-04-02 19:26:36

在動態網站中總會有一個情況，一個頁面由於頁面的內容或意圖而需要與大多數不同的外觀。在這些情況下，動態生成的頁面可以插入一個類來應用額外的CSS。

此外，還有一種概念將應用一類樣式到那些將被應用在頁面上的其他HTML5元素。

CSS：

header { 
    color: #0f0f0f; 
} 

.wrapper { 
    color: #c9c9ff; 
} 

.content { 
    font-size: 2px; 
}

HTML：

<header class="content">This is font 2px</header> 
<div class="wrapper"> 
    <div class="content">This is font 2px</div> 
</div>

最後，這其實就是你自己的喜好如何做的風格。我希望這有幫助。 ^^

來源

2015-04-02 19:17:20

HTML5元素應該有class？es嗎？

回答

相關問題