Search code examples
cssyui3yui-gridsgrid-system

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

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

Solution

  • 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