Class Presentation
Eric Meyer’s post Class Presentation has started an interesting discussion on how to keep class names non-presentational.
As an example Eric mentions class names for images, something I took some time to think about while preparing for the recent redesign of this site. I used to have class names like bordered and padded, which didn’t feel quite right.
I’m not so sure what I replaced them with is a whole lot better, but at least I started thinking about it. I use flow for images that are supposed to let text flow around them, and fullwidth for those images that should not. Since I want only some images to have a decoration (border and padding) I use an additional class name, dec (as in “decorated”), for those images.
Perfect? Probably not. Less presentational than bordered and padded? I think so.
- Previous post: More Nifty Corners
- Next post: AJAX and Accessibility
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
For me, it is very hard to give a perfect name for a class. There is no standards, no convention. I see that people use masthead, footer etc. for id but other than that everybody uses something different for their class names.
When I try to name my classes, I ask myself "if I have to change the CSS property of a class in the future, will the class name lose its meaning?" If my answer is YES, I don't use that class name.
In your example border or decorated, the element might not be special or visual or decorated or your image might not have a border in the future.
Isn't CSS meant to be about presentation? Certainly, one ought to use the naming scheme one likes best, but other than that, is there a point in a "standard" on the matter?
Why would any visitor, or even crawler, care that I named one of my classes "gabriel"? It's not an id, after all.
When I name classes, I usually come up with some practical stuff. For example, I just recently did this for a project:
[div id="error" class="true"] [div id="error" class="false"]
and then in the css I did
error.true { display:block; color#F00; } error.false { display:none; }This way, I could use javascript to just "turn on" the error message block and fill the placeholder with error messaging.
Since border or no border is a presentational issue and does not tell the user of the site anything important I do not understand the fuss about class names like border. I prefer to use image class names that makes sence to me when I am koding - often: left (for flow left), right (for flow right), leftborder (flow left with border) etc. Makes it easy to remember, quick to use and doesn´t confuse those who look under the hood...
Gabriel, Björn: CSS is about presentation, class names aren't necessarily. They are part of the HTML and should make some kind of sense even if you decide to change the CSS.
If you use the class name "border" for all images that you want to have a border, then redesign and don't want those images to have a border anymore, that would leave the markup a bit confusing. Unless you change that too of course, which is what you ideally shouldn't have to.
This is not really a huge problem, but it's an interesting thing to think about.
I think it is in the choice of the developer to choose whatever names they think are more appropriate since there are no standards, i keep using the same ones so i can easily recognise them. the same as jonathan mentioned above i use _on or _off for what i want to show or not.
Petros: Yes, of course. You'll be happier down the line if you use non-presentational class names though.
Sorry, comments are closed for this post.