Update html5 markup with semantic classes about thematic HOT 7 CLOSED

Hi Middlesister,

I'm not sure this is a good idea. For blocks which are supposed to be unique inside a page, IDs are the right way to go in terms of CSS best practices. The only reason to prefer a class over an ID is when you need several occurrences of a block in your page, and I don't think there is ever going to be more than one occurrence of any of the blocks listed above (wrapper, header, blog title, blog description...). You can rename them if you like, but please leave them as IDs, as this allows for better CSS specificity.

Looking at what we have right now in terms of asides: both primary and secondary asides share a common "aside" class, and they each have their own "primary" and "secondary" ids, allowing specific styling of each block. This is perfectly fine. If you were to convert the "primary" and "secondary" ids to classes, this would negate the need for a common "aside" class, but it would also force you to declare all common styles twice, once for primary and once for secondary.

TL;DR: IMHO, it's OK to rename ids, but not to switch them to classes.

What do you think?

from thematic.

#wrapper    -> .site-wrapper
#header     -> .site-header
      #blog-title    -> .site-title
      #blog-description -> .tagline
#main        -> .site-main
      #container    -> .container-content
           #content    -> .site-content
           #primary    -> .primary-aside
           #secondary -> .secondary-aside
#footer       -> .site-footer

I guess I would maybe suggest taking a look at #main and #container, it seems they break out of the naming of other things and may be tougher to remember, above to me makes a tiny bit more sense from the naming aspect, but only because it would be easier to memorize, but I am not feeling great about the #container naming I selected.

Also @polnoft I think @middlesister is just suggesting adding classes to these elements, not replacing the ID's. Honestly in a dream build of Thematic, I would prefer no ID's at all. @polnoft you mentioned "IDs are the right way to go in terms of CSS best practices", this is actually not true. A lot of really good front-end developers now only style with classes, ideally you want the least amount of specificity you can get away with to make the code (css) as flexible as possible.

from thematic.

@scottnix I've searched a little about "only styling with classes" and found this post quite interesting: http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/
In the light of that article, I can see what you're talking about, but I'm still not sure it's a good idea to remove all ids everywhere. I guess I can agree with you that adding classes to existing ids would be fine, but that is not how I understand the title of this issue: "Update html5 markup with classes instead of ID's" reads to me as actually replacing all ids by classes.
What would 2013 do? ;) It seems like 2013 is still using quite a good deal of IDs, but they have used classes for site-title and site-description.

from thematic.

@scottnix is right. I intended only to add classes and not to remove the ID's in the html markup. The replacing part meant that we will replace the use of ID's with classes in the css files, not removing them from the template files.

In part this is because some of these elements need a semantic update. A single #header does not make sense, since there is a site header but an <article> can also have a <header> element. Same goes for footer. But if we change existing ID's, a lot of sites will break no matter if they use html5 or not.

As far as classes-only goes here's another one for you :) http://oli.jp/2011/ids/
I've seen arguments going against this too, so in the end it's probably a matter of preference. Where I prefer the classes approach, obviously :)

from thematic.

@scottnix I agree .site-mainis more consistent. How about .content-wrapperfor #container? We already have a site-wrapper and that is essentially what it is.

from thematic.

If you're just going to add classes that's totally fine! It leaves each of us free to use whichever hooks we like.

As for semantics, I agree names need to change, but IDs don't necessarily have to go: you can use #site-header because it'll always be unique, but of course you need a .article-header class because article headers can occur more than once in a document.

Thanks for the link, interesting read!

from thematic.

@middlesister Yeah, .content-wrapper sounds much better. 👍

from thematic.