How do you name your divisions?

HTML & CSS
1

I’m just wondering what everyones division-naming convention is for division id and class names. We all have our own way of naming things but obviously something that is relevant and generic (i.e. <p class=“highlighted”></p>) rather than something that is targeted (i.e. <p class=“yellowbackground”></p>) is recommended.

How do you name your divisions? Do you use camel casing (i.e. <div id=“mainSiteNav”></div>)? Do you use hyphens (i.e. <div id=“main-site-nav”></div>)? Or maybe you mix them both like Meitar Moscovitz suggests in his article How To Compose HTML ID and Class Names like a Rockstar?

And what do you actually name them? For my own sites it will usually be:

  • container / wrapper
  • header
  • nav
  • sidebar
  • content
  • footer

But after looking at the source code of so many Websites it’s clear that the majority of them name their footers division “footer” and their site navigation as “nav”, “sitenav”, or “navigation”. I’ll be sticking to “nav” because of the nav element in the HTML 5 specification. But what about your main Website container? In fact you might not know what I mean by container, maybe you choose something like:

  • container
  • wrapper
  • masthead
  • canvas
  • site
  • page
  • Something else…?

I’m trying to find a convention that I’m happy with and I’m confident that it is semantically correct. Does anyone have any recommendations or suggestions? What convention do you use and why?

I used to use camel casing such as <div id=“mainContainer”></div> but I try and style away from it now, maybe I should return to camel casing. What do you think?

Andrew Cooper

2

A header is different from a heading. A header is a section, a bit like a preface to the page - it will usually contain the site branding, logo, tagline and maybe the main <h1> heading but maybe not. A heading is a short phrase that relates to the content following it. That’s why HTML5 adds the <header> section element, so that the branding can be applied in a semantically appropriate way without mis-using <h*> elements.

“nav” or “navigation” is also absurdly vague, especially if you’re going to have a menu above the header, the main menu below the header, and a list of places to go in the sidebar. “Navigation” is also absurdly vague since every link on a website is “navigation”

What matters is what works for people. “nav” and “subnav” are perfectly good names that describe the principal and secondary navigation menus adequately. And menus are referred to as “navigation”, because that is their function, to allow people to navigate around the site.

3

I use camelCase rather than hyphens and I ensure that the naming conventions match what their meant to represent (I’m also a big fan of purpose built microformats).

As for CSS frameworks, they often just make me want to weep in terror, Stomme’s example isn’t even that much of an exaggeration. :smiley:

4

That’s a tip, sure. So is “a good way to improve your fitness is to lie on the sofa eating chips”, and it’s about as helpful :frowning:

There is no need to put unnecessary detail in your CSS. It adds bloat that you don’t need, it adds complexity that will confuse you, and it erodes the value of cascading style sheets.

If you put the full “path” in like that, it means that any time you move items around or change the structure, you’re going to have to rewrite the entire CSS, whereas if you’d just left it as #bread, it would have carried on working wherever in the page it was. And you’re also limiting the way styles can be used throughout the page and on different pages.

By including all that extraneous detail, you’re making your stylesheet hard to read, and it’s harder to pinpoint what each declaration does because there are so many unnecessary bits there.

And how could you use comments to “save filesize”? Unless you’ve got some kind of magic “negative weight” comment, adding comments will only make the files bigger…

5

I didn’t exaggerate it at all! I went to 960.gs and clicked on the first example site they had (media.twitter.com) and scrolled down a bit.

6

oh man, that is brutal LOL

7

That’s not OT Stomme - at least not IMHO… It shows EXACTLY the bad naming conventions I’m talking about - and we’re talking naming conventions.

CSS frameworks - defeating the point of using CSS in the first place since 1998.

8

A lot of the names people use are to me really REALLY too vague. Take ‘container’ or ‘wrapper’ - EVERY DIV on a page is usally some form of container or wrapper - the question becomes “containing or wrapping WHAT?”

This is why my outermost wrapping div is usally called #pageWrapper. ID since there’s only one and it’s a nice alias for “top of page” in URL’s, pageWrapper because it’s wrapping the whole page. Just as in double-nesting for content first layouts I’ll have #contentWrapper around Content and #columnWrapper around the columns. (though I’ll sometimes call that last one #fauxColumns)

“header” is one that bothers me no end as we have a perfectly good tags called ‘headings’ that usually are quite sufficient to the task. In 99% of layouts where people have that extra header div around the site name (h1), extra information (div) and menu (UL) it’s a completely unnecessary element and waste of markup. Why I’m none to happy with this ‘header’ tag bull in HTML 5. Just more bloated nesting for nothing.

“nav” or “navigation” is also absurdly vague, especially if you’re going to have a menu above the header, the main menu below the header, and a list of places to go in the sidebar. “Navigation” is also absurdly vague since every link on a website is “navigation”

It’s a menu - if it’s the MAIN menu, I call it #mainMenu – Who’d have thunk it? USUALLY that doesn’t even GO on a DIV, since there is very little you can apply to a DIV you cannot APPLY TO THE UL DIRECTLY! Perfectly good block level container you usually don’t need to waste time slapping another DIV around it for nothing… Every time I see this crap:


<div class="header">
	<div class="logo"><h1><img src="images/h1Logo.png" alt="" /></h1></div>
	<div class="nav">
		<ul class="navUl">
			<li class="navItem">
				<a class="navAnchor">Home</a>

I have the overwhelming urge to go on a shooting spree.

Though #sideBar, Content and #footer for me aren’t going anywhere. Those are consistent and meaningful enough - certainly better than the “leftColumn/rightColumn” bull or worse “column1” and “column2” on a two column layout… In that way I ‘kind of’ like HTML5’s “aside” tag, though that could imply a semantic meaning I don’t want on it. (you watch, people will start stuffing menu’s in “aside”)

Whenever this type of subject comes up I link to a page on the IBM developers site:
http://www.ibm.com/developerworks/linux/library/l-clear-code/

While it’s couched in C programming terminology, I suggest anyone who is out there writing code actually READ THAT! Especially the bit about comments with “and now we’re done!”…

Clear meaningful variable and function names (or in the case of HTML, semantic markup with meaningful classes or ID’s) can often make commenting redundant… so I try to use the most meaningful names on things I can.

At the same time, presentation has no place in your markup, so if you are using classes like “left”, “right”, “clear”, “redFont” or “smallText” you have pretty much missed the half the POINT of using CSS in the first place. This goes triple to the jokers out there who do things like class=“L T Cl B W512”

9
Off Topic:

why is there a 1 px "green left and right border on my nav, why its a mystery, please decypher.

Must be your browser, none of mine show any green : )

10
  • in names are a pain and never select fully in Dreamweaver. LOL

I’ll only use caps in my scripts and variables. I generally keep everything lowercase and try to name it in relation to where it’s used. i.e For a testimonials box I’d name the class testimonials and then hierarchical from there.

I do like to keep consistent as well with images.

icons_this
bgd_that

11

I went to an English Grammar School and came out with nothing, very ironic, and no joke either. Please look at this mystery while your here http://www.rbcreations.co.uk/ewto/main&#37;20nav.html , why is there a 1 px "green left and right border on my nav, why its a mystery, please decypher. I dont even have reference to green in my css. no reason it just appeared, I even started to think I was being hacked or there was ghosts in the machine! OOOOOOOOOOOO! please help, I think some of my previous post were too silly to answer, so I’m asking you directly Stomme. CHEERS MATE.

12
Off Topic:

This goes triple to the jokers out there who do things like class=“L T Cl B W512”

From media.twitter.com, who uses 960 grid:
<div id=“post-519” class=“hentry p1 post publish author-twitter-media category-uncategorized tag-howto tag-world-cup y2010 m05 d19 h01”>

Yup, that’s 12 classes and an id. Luvvit.

13

I tend to prefer camelCase myself.

14

Since I typically use x(ht)ml my CSS is typically considered “case sensitive” thus I tend to opt for lower-case - for obvious reasons.

15

I use .a_class_name but thats just an old habiit. Its whats easiest for other people to understand, not you, remember that. Regarding naming, just make them make as much sense as possible, even if it means adding a word, “once you copy and paste it , re-typing it isnt an issue”. Also another tip is to give the full path in your style sheets if you dont allready, div#page_container ul.shopping_list li#bread {} instead of #bread , if not the full path at least the understandable path, so its easier to read and understand, you could use comments to save filesize but then you would have to type descriptions for each style when there allready described in the path itself if the classes and id’s are named appropriatly.

16

All lowercase with hyphens, trying to use names that describe the purpose of the element (not only divisions) rather than the appearance.

17

I find it amazing you cant type an underscore but you manage to write you name, WOW. It like the Egytians building the pyramidS but having trouble with there garden retaining wall.
ha ha ha .

18

Lawlz! I CAN type them, but they require some finger gymnastics : )

Similarly, my keyboard often misses the 3# key for some reason (always has since I got it new), which is why I use classes for stuff like CSS hover maps or Gilder-Levin in menus, even though an ID makes more sense as each element is getting just one, special class. .h was easier to type than #h : )

Still, it IS amazing I’m able to spell my own name. I’ll bet back when they had me in special school as a kid, they never thought I’d go on to become a radiographer and then a web coder. Lawlz.

*edit the above isn’t a joke, I went to a special school as a kid. Several of my classmates had Downs and autism.

19

lowercase from unix love and camelCase when lowercasestartstogetreallystupid.

I don’t like having - in my names. It was once a way to target Opera who was unsure about - in names, plus I don’t like seeing them in my Javascript, even when properly quoted.
Under_scores_are_harder_to_type_for_me.