Same class names for different sections

问题

Im writing a markup for Corpora - A Business Theme

And have divided it into main sections in this way:

<header>
    <div class="roof"></div>
    <nav></nav>
    <div class="slides"></div>
</header>
<div class="content">
    <div class="roof"></div>
    <aside></aside>
    <div class="main"></div>
</div>
<footer>
    <div class="roof"></div>
    <div class="credit"></div>
</footer>

Is that okay to name different sections of the page with the same class name .roof?
[Edit] So, considering my .roof's have different styling I have to write

<header>
    <div class="roofHeader"></div>
    <nav></nav>
    <div class="slides"></div>
</header>
<div class="content">
    <div class="roofContent"></div>
    <aside></aside>
    <div class="main"></div>
</div>
<footer>
    <div class="roofFooter"></div>
    <div class="credit"></div>
</footer>

回答1:

No issues naming different section with same Name like in your example(roof) until you want them to style them the same way or make them look the same way .

for example

<header>
<div class="roof"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roof"></div>
<aside></aside>
<div class="main"></div>

IN the above code the div in the header section will look exactly the same as a div in the content section .

To add more into this - If you are writing a markup for a theme - The best practice would be to -

write global style classes
section specific style classes

for example :- Section specific styling .header{ width:100%; font-family:Ariel; font-size:12px; } Global styling .float-right{ float:right; }

Now the .header class will be used specific for the header section .And it will provide us with maximun control to change anything in there and wont effect other section until and unless we use it somewhere else in our markup .

The .float-right class can be used anywhere in the html divs or section which you want to floated to the right side .

回答2:

Semantically it's totally fine.

For 2 or more sections, if you want to apply same Style sheets, then all the sections can have the same class name and style sheets can be defined for that particular class.

For example

.className{ property:value; }

来源：https://stackoverflow.com/questions/14893668/same-class-names-for-different-sections

标签

html

html5

semantic-markup