3

I am a web developer for almost 2 years now and I am still learning new things every day, but since my knowledge gets bigger, I came across some fundamental question and couldnt find a good discussion about it.

How do you name your DIVs, IDs, Classes? Do you give them specific content related names? (i.e. <div id="google_map">)

Or do you name them related to their position on the site? (i.e. <div id="content_top_bar">)

And do you do this in your .css the same way?

I hope you get what i am trying to find out. I guess there is no "true" answer anyways, but I would like to know some opinions, so that I can decide what option to take and keep working with it in the future.

5 Answers 5

6

HTML should be used as semantically as possible, so your classes and IDs should be named for their content, not for their style, or their position within the site (these things should be able to change without effecting your HTML.

For example, if you name a <div id="left-sidebar"> and then later decide you'd like to move that element, the id no longer would semantically represent the element. Conversely, if you named a <div id="navigation"> or <div id="article"> they would still represent the element, regardless of their placement or styling on the page.

2
  • Thanks Dan! You made Blindy point even more clear and i will def. try to use these "rules" in the future. do you mind taking a look at the question in response to Blindys answer too :)?
    – r0skar
    Commented May 31, 2011 at 14:52
  • @Andrej - I think Blindy and I are essentially saying the same thing. There is always a certain amount of personal style that exists in your code. You need to find a good mix of your personal preferences and good semantics. Ultimately your goal is to keep your code clean, and make sense to another developer that might be reading it. You want try to keep your content (html) and your layout (css) as separate as possible. How you go about that could happen in a hundred different (but totally acceptable) ways.
    – Dan
    Commented May 31, 2011 at 17:32
3

I would name objects based on their content (whether logical of physical). You care what an object is not where it's at.

The exception to the above rule is when the object forms the layout of the page, but in that case it shouldn't really have a name anyway, unless you intend to manipulate the structure of the page to move stuff around at run-time (which is fine, just rare).

Also I find myself not naming a lot of objects anyway, but assigning them classes, especially for related objects that I have to manipulate together. It makes working with them through jQuery (or whatever framework you choose) a lot easier.

4
  • This makes sense. Especially that I already know where an object is by simply looking at the page/code. One more thing: Lets say I have links in my #content and also in my #menu, but I would like to style them totaly different. Would you create 2 classes (a.content_link, a.menu_link) for each link type? Or would you set link styles for each div (#content a, #menu a)? And would you place them with #menu and #content or with the "a" tags in your .css?
    – r0skar
    Commented May 31, 2011 at 14:43
  • sry for the bad format, I cant figure out the linebreak with this mini-Markdown formatting :)
    – r0skar
    Commented May 31, 2011 at 14:45
  • 1
    Well a menu link is semantically speaking a menu item, so I'd call it .menuitem, whereas your content links are normal links inside html, so I'd style them as .content a (note that I consider content a class since it's used to define how your content looks, you shouldn't care about the content enough to actually name it).
    – Blindy
    Commented May 31, 2011 at 15:59
  • Hi. Thanks for your time to reply! p.s. i did use the ID for example only - in my sites i would of course "use them as class"
    – r0skar
    Commented May 31, 2011 at 20:11
2

I think there is a definite answer to this question: Whatever works best for you :)

Some things to consider:

  • Are you the only one writing in the codefiles or not?
  • What's the structure of your site and is it static or dynamic?

Depending on these you may opt to choose english names or your own language, or you may opt to name a div "content" rather than for instance "div_homepage".

Hope that was helpful :)

1
  • Hi NwN! it was indeed helpful, because I am working alone at this moment and didnt even consider that it maybe difficult for some1 else to easily understand the code format while it is easy for me. Will keep that in mind!
    – r0skar
    Commented May 31, 2011 at 14:48
1

Since HTML is for content, your naming should refer to content.

0

Depending on what the html element represents:

  • The element is part of the layout, name it to something that represents that part of the layout. example: 'footer_top_bar'

  • The element is used for specific content, name it to something that represents the content. example: 'comment', 'navigation', 'breadcrumbs'.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.