CODEWITHSUNDEEP
htmlsemantic-markup
Artem Svirskyi
Artem Svirskyi

Reputation: 7839

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>

?

Upvotes: 0

Views: 2655

Answers (2)

Shail
Shail

Reputation: 3649

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 .

Upvotes: 2

Vinod Jayachandran
Vinod Jayachandran

Reputation: 3898

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; }

Upvotes: 0

Related Questions