As a general rule, if you want your markup to be semantic, you should be using classes, IDs and document structure to describe the content as clearly as possible, to whatever level is required to achieve the styling you need. Don't just add classes and IDs with the motivation "I need something to hook a CSS selector to", try thinking about what it is you want to style and use your tools to describe the thing.
Pragmatic design means you will have to be non-semantic to support particular browsers, particularly those that can't take advantage of the more advanced selectors, but you should only append these as required, if you can't achieve your desired design easily another way.
For your scenario, I would question whether
main is a very good class name. Classes are intended to classify something, such that several instances of that thing can appear in a document (and be styled in the same way). If you intend to have several things in the page classified as
main, it doesn't add a great deal of semantic value - I can't understand what that element really contains, other than that it's probably more important than non-main elements.
If you are trying to say "this is the primary content of the page", you should instead use an
id. Use of an ID implies "there is only one of these per page", which gives you faster-performing scripts and the ability to reference the element with anchors (
Additionally, if the
section elements are being given the
main class because they're all related, you could try representing this relationship more strongly by nesting them inside a parent element and applying an ID to that element, e.g:
As an aside, the way you've listed
footer makes me wonder if you're using it correctly.
The HTML5 specification says:
section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content, typically with a heading.
It specifically warns:
section element is not a generic container element. When an
element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the
div element instead. A
general rule is that the section element is appropriate only if the
element’s contents would be listed explicitly in the document’s
So, the idea of a "main" section probably isn't right. Sections are meant to be ways partition a large article into headed-sections, in very much the way a Wikipedia article is laid out. You could easily say you have a "main" article, but a "main" section doesn't make as much sense.