do you keep class/id on the same div or break them up?

Question

Since I couldn't find anything on yui3 documentation, I kindly ask your opinion on below. What is the best practice and why?

<div class="yui3-u-1-3" id="logo">
... content
</div>

or

<div class="yui3-u-1-3">
<div id="logo">
..... content
</div>
</div>

Regards, Castle

Answer 1

I consider best practice to use ID's on the purely layout specific HTML.

eg.

• #outer-container
• #wrapper
• #sidebar

Having said that if there is any chance, even a remote one that you may have multiple instances of these in your page, then play safe and use classes.

There are some performance benefits (although it's almost negligible now, with faster browser rendering engines and speeds):

• ID selectors are slightly faster in your CSS
• ID selectors are more efficient as hooks using JS

Read this great section from Jonathan Snook's SMACSS e-book: https://smacss.com/book/type-layout

Answer 2

I would rather use CLASS over ID until something explicit, have been using yui3 grid since last 2 years for now. so far going great..

<div class="yui3-u-1-3 logo">
content 
</div>

or

<div class="yui3-u-1-3">
 <h5 class="logo">logo goes here</h5>
</div>