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:

<

Solution 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><divclass="roof"></div><nav></nav><divclass="slides"></div></header><divclass="content"><divclass="roof"></div><aside></aside><divclass="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 .

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