Question

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>

?

Answer 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 –

1. write global style classes

2. 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 .