I see this everywhere and I don’t know if its just me but when I see it it makes be want to vomit. I mean column is just as bad as naming something red, blue, etc. Perhaps its just me but this whole thing needs to have an axe put to it. Rather than column elements should be classified based on contextual purpose, not presentational purpose and column anything is presentational. Who else is disgusted that this “convention” has slipped through the cracks?
Hm, but a column is a column. I mean if you have an article and you have it split in three columns, how will you name them?
There is only left - middle - right…
Exactly, left, middle and right are presentational. What is more important is the information in those left, middle and right columns. For example, if there are are list of most recent articles in the right column than rather than naming the containing element using column a more purposeful name would be recent-articles. The slight problem that can occur is when the information in a section is dynamic, changes in some manor in that cases multiple CSS rules would be necessary to account for all content variations in place of a single column-* based rule.
Ah ok, that is what you mean. I was more thinking into CSS3 column article splitting - but if you don’t do it with CSS3 (with div’s).
You know what i mean? If you split an article in multi columns:
CSS3 - Columns
The advantages of CSS3 columns applies to continuous text. I am more or less referring to your standard layout patterns.
Yes I agree that you shouldn’t name classes/ids by referring to their position in the page as that may change later on and you would be stuck with something out of context.
or example, if there are are list of most recent articles in the right column than rather than naming the containing element using column a more purposeful name would be recent-articles.
That would be fine for classes identifying that type of element content which can be re-used cross site but it wouldn’t be much use for the main columns of a site. You may have a column called #recent-articles on the front page but on other pages there is likely to be different content there and not recent articles.
Therefore I would suggest that for structural elements that you use more structural names that don’t actually define what the content is so that you can have varying content in there.
e.g.For a three column site I usually do something like this
#header
#sidebar, #main, #sidebar2
#footer
However you could argue that sidebar is meaning that it should be at the side which means you can’t move content to the middle at a later date but I see sidebar as meaning it is sub to the main content and not relating to its position (much like aside in html5 I suppose). After all we all say #header and #footer and yet no one complains that you may want the content in the footer at the top of the page so I think some leeway is required.
You could of course be more generic then go along the lines of #subcontent1, #main, #subcontent2.
Therefore I make the distinction between structural elements which should say how important the content is in the page rather than what the content is.
For classes and individual elements then things like .recent-articles are fine.
I’ve found that whatever solution you go with there will always be times when it doesn’t work for the case in hand 
My pattern normally looks something like using negative margins to achieve “virtual columns” rather than tightly coupling the mark-up to a specific presentation. I guess that has something to do with it. I tend to use negative margins rather than the simple float left and right technique. I feel using negative margins is much more flexible and doesn’t make it necessary to wrap multiple elements to position them to the left, right, etc. With negative margins that can all be handles virtually without any type of “presentational” wrapper such as column or sidebar. Though I do use sidebar at times, I don’t think that is nearly as bad as column. I think of sidebar more like aside, as you just said.
<div id="container">
<div id ="masthead">
<p>My Site Logo/App/Name</p>
<!-- main nav and whatever other crap.. -->
</div>
<div id="content">
<dl id="recent-articles">
<dt>Recent Articles</dt>
<dd>
<ul>
<li>xxx</li>
<li>yyy</li>
<li>zzz</li>
</ul>
</dd>
</dl>
<div id="main-content">
<h1>Main Heading</h1>
<div>user generated body content blah blah blah...</div>
</div>
</div>
<div id="footer">
<!-- repeat links, copyright, site info, etc -->
<!-- throw this below container when dealing with a sticky footer -->
</div>
</div>
That was what I was referring to when I said it can require additional CSS. In most cases the content in the sidebar will change based on page, user, etc. So it requires a little foresight in regards to organizing the CSS rules best based on those dynamic changes in supporting content.
That said, how about rails? I have seen that used in places. Where something will be named rail instead of column. I think that is a little more “semantically” correct than column actually based on the definition of rail.
a steel bar or continuous line of bars laid on the ground as one of a pair forming a railroad track.
Column is based on vertical alignment where as rail is an association of items, not based on positioning.
Very true, but there are definite patterns in place that we reuse everywhere changing/rethinking time to time that aid in production of all associated assets and quality of a website/app, not to mention consistency. Its those patterns that I and I’m sure everyone time to time as mentioned enjoy looking at and thinking, how I can do this better, or maybe I’m thinking to into it.
One of those patterns that I got else where yet can’t remember is handling “presentational headings”. You know, those headings that are just there for mainly presentational purposes like Menu (even though the content is obviously a menu) or headings which aren’t really important to the document structure such as; Recent Articles in the above example. In those cases I generally turn to the definition list instead of using headings, because in most cases in regards to aside content those “headings” aren’t really that significant to the document structure and its always difficult to determine the “proper” consistent heading that should be used across a complex, dynamically driven site for aside/sidebar content such as; featured item, recent items, cart, etc, any widget/block that is continuous on almost all pages yet yes little significant to the main content on the page.