Good CSS id naming conventions that work across several pages? Should I prefix names based on the page name?

Question

I've got into the habit of naming sections of my home page in the format of "header", "main", "sidebar", "footer" etc because this is what is advised when I've done research. I also have other names for divs/images/text that appear on all pages but in a different location but with the same or similar content - "sidebar" being one of them.

The trouble comes once I begin creating the other pages of the site. I wanted my main content to be in a different location to where it appears on the home page but I cannot change the location of "main" in my css file otherwise it would also change the location on my home page.

What is the best way of naming my content areas in this type of situation? Would it be best for me to prefix the names of divs etc for the homepage with something such as "main-homepage" or "homepage-main" so that managing all of my content areas and styles makes sense to me/others and avoids me accidentally changing content that I do not wish to change?

It seems that following the commonly used naming conventions advised in online guides would only work if the content was located in the same place site-wide, or am I missing something here?

Thanks

Answer 1

Don't fight good css by naming classes prefixed with page names. A few special cases is OK (Do what you said - prefix the name with 'home' for example) but routinely naming classes that way adds work for you.





Unless your homepage is COMPLETELY different to the rest of the site, you can use the cascade (that's the 'C' in CSS):





- Specify everything you need to in your external stylesheet, then,



- On the homepage, use on-page (embedded) tags in the head, which override the external stylesheet.



- If absolutely necessary, Inline styles (specified within html tags) override both embedded and external.







If you just need the main-content div to take different positioning css, put style tags in the head on that page and set the position there.





To use a different stylesheet is an extreme solution - you're homepage would really have to be *completely* different for that to be a good idea. And you'd be making extra work for yourself later on when it's time for a change.



You could link to two stylesheets - the main one and the homepage specific one but you'd come up against confusing priorities - Not knowing which sheet is actually making a difference. The cascade is better.

Answer 2

You are correct in everything you say. And yes, just make it differently named, such as "homepagecontent" and "pagecontent". Another note would be that if your homepage is completely different from your other pages, you can just make a separate CSS file for the homepage.



Another thing to note is the new HTML5 tags that will improve SEO (search engine optimisation). They are:

It is obvious what each of those are for, so I won't bother explaining. They function in the exact same way as

tags do - so there won't be any visual changes with them, but they will improve the ability for people to search for your website on a search engine.



Note that these are new, so older browsers will not use them properly, but it is worth taking a look at.

Answer 3

Paige Elise Paige Marie Paige Amelie Paige Renee Paige Hannah Paige Louise Paige Lauren Paige Louis sed Lowis Paige Taya mae Paige Maia Paige isabelle Paige Madison Paige Olivia Hope these help

Answer 4

One simple solution is to create a namespace for different page templates.



For example, setting a namespace for the body tag allows you to target the same structural elements on each page, but with different rules:

Styling both headers now becomes quite easy:



#header{ common rules for header}



.home #header { specific rules for header on home page}



.twoColumn #header { specific rules for header on two column interior page }



This allows you to hide, display, move the same structural elements on your pages, depending on the page type. Simple!



Btw, structurally it makes sense to use a class selector, rather than an id selector, to set the body (since more than one page will make use of the same overall page class. Using this technique also automatically takes care of specificity, and the more specific rules will overwrite the common rules)

Answer 5

Any consistent pattern is fine. For instance, "sidebar", "blueSidebar", and so on.