Class Presentation
Published 19 years, 2 weeks pastA little while back, I made a joke about presentational class names. As it happened, there was a second joke hidden within the joke—as is so often the case with me—and I was delighted to see that one of my readers caught it.
But is there a reasonable alternative? I’ve long been using the class value border to indicate when I want to put a border around a picture. This is, to me, one of those gray-area situations that’s very hard to resolve. I can claim that border is not very presentational: it doesn’t say anything about the specific appearance of the border, only that there should be one. I could also argue that it’s entirely too presentational: from a semantic point of view, what does it matter if the picture is bordered or not? It doesn’t, so the class name is unacceptable.
And yet, it does matter. Visually, some images need to have borders, while others need to lack a border. I can’t invent a new element or attribute to express the difference (not without writing my own DTD, anyway). Technologically, class values are the only place I can make the distinction.
There are some other sort-of-presentational class names hanging around my site, too. standalone is used when an image, or set of images, stands on its own, as opposed to illustrative images that are floated. The intent is presentational, though again, standalone doesn’t say exactly how the images stand alone. It just says that they do.
I’ve yet to come up with a good semantic way of saying “this image needs to have something that visually separates it from the rest of the page”. I’ve kicked around ideas for other values, like framed or separated, but these fall into the same gray area… probably because the intent is basically presentational. I’ve abstracted the presentationalism of the intent, but it’s still there.
So, anyone have a better class name, or even a better approach to drawing the distinction? And before anyone tells me to quit worrying about this, I’m not worrying—I’m playing. It’s like doing a crossword, or working on a logic puzzle. Usually I just do this stuff in my head, but in this case I’m fairly stumped, and could use some help.
Comments (40)
eric, what about alternate (for standalone) and visual (for border), although visual still indicates some presentationalism, but alot more generic than border
The problem is that the reason you’ve given for this seperation is entirely presentational:
So any attempt at attaching any form of semantics will fail. You can’t just make up a semantic name for it unless there is a non-presentational reason for the difference in presentation.
Why not give the standalone images a class of “important” or “special”?
Ignoring the border itself for a moment, the problem you’re trying to solve is assigning different presentational styles to an image which depend on the content of the image. The classname should therefore describe the qualities of the image that the styles would need to know about.
I’m guessing you currently apply borders to images that are bright, or low contrast. So make classes out of those adjectives, and apply them to images when they apply. The classnames will describe content, and if you dramatically alter the look of the site later (say changing the background color from white to something darker) you have the option of changing which images get borders.
The choice of whether to make matching opposite classes (“highcontrast” and “dark”, respectively) depends on whether the relationship is either-or, or if there is some middle ground.
Lachlan Hunt summed this up very well.
Personally I don’t think it’s a big problem. If it’s the most appropriate choice, then go with it. Something like “important” could work, but is the border necessarily indicating importance? Something like “special” or “alternate” could work, but what if you have a type of image that’s special in a different way? You could end up with alternate, alternate2, alternate3… Which just seems like a terrible way to do it. I think these suggestions are good in some cases, but not all cases.
Something else to consider is if you’re ever likely to change that border class to anything other than a border. Sure, you might change the color, but chances are if you change the style it will still be some kind of border. Border is clear and to the point, but still general enough that you can change a lot of things without making the class name meaningless.
No, the standalone (not-floated) images would be getting the “important” class, not the bordered ones.
First of all, I don’t like “alternate” because it references the style, not the image, and gets easily mixed up with alt tags and such.
Second, when you give an image a class of “special” or “important”, the classname is an adjective or quality that describes the image. What the heck is a “special2”? Why not use the classname to describe how the image is different? That’s why I suggested “bright”, because the brightness of an image is an important criteria when figuring out what to do with it.
Using “border” is bad, though, because “border” does not describe the image; it describes what you want the stylesheet to do to the image.
Admittedly, using useless or misleading classnames isn’t on the same level of evil as misusing tags, since it doesn’t present an accessibility problem. Screenreaders don’t pronounce classnames, and non-CSS-aware browsers couldn’t care less. This is solely a maintainance issue, so in five years when you’re wondering why only images without the “border” class get borders, you don’t go insane. Also, it saves you the embarrassment of someone looking at your code and laughing.
1) Open up Photoshop
2) Open the image that you wish to have a border
3) Add a border
4) Save the image
5) Close Photoshop
I was just giving an example, not refuting your specific suggestion. The same argument could apply though… are the “standalone” images necessarily more important? Tough to know without a lot of examples, but that may not always be true. An image might be very wide and skinny; something that has to be on its own line, but isn’t very important.
I think there are potential pitfalls with any solution, because the reasons you present something a certain way can’t always be summed up in a single word. What if you decide to use “bright” for images with no borders… but then a few months later you find yourself with a bright image that you want a border around? I’m not saying it’s a bad suggestion, just that it could be a problem as well.
You could use multiple classes to describe the images in better detail, which would solve the original problem, but if you’re doing that just to decide which images get borders, that sounds messy and difficult to maintain. You could give each image a unique ID but that seems excessive as well. Something that could possibly work well is to use classes like “light” or “dark” and then give IDs to the exceptions. I would still lean toward just using “border” though, because consistency can make things easier to maintain.
I don’t see wanting to switch the borders in 5 years as a significant issue myself… That’s what a good text editor is for. Changing the class names can most likely be done quickly and without much difficulty.
(On a side note, I don’t think I’ve ever actually used border as a class myself! I could certainly see a case for it though, particularly on a site where a large number of images are presented in a variety of ways.)
any suggestions above such as “light”, “dark”, “bright” still have presentational connotations.
to be honest, the problem here seems to be twofold…finding a class name that’s both:
– non presentational (the name does not even hint at any way it displays)
– semantically relevant (it has a meaning that can be understood logically by anybody)
the first one is a given…it’s the second one that’s causing the rub. maybe a bit over the top, but how about being very explicit (and, admittedly, verbose) about it?
– image_is_the_content
– image_accompanies_other_content
ok, now that i’ve written it out, it does look rather silly…but you hopefully catch my drift. don’t get too bogged down with trying to find *THE ONE* unequivocal way to call the class, as i’d argue that it would be impossible.
Here is my 10c,
Ask yourself ‘why’ a particular image needs a border. For example on an e-commerce store, some products are ‘special’ in some way (featured, sale, free etc.)
Taking this logic, is is not better to name your class as to the ‘content’ or ‘context’? So, perhaps (following this example) class=”special sale free” ?
While they are certainly presentional, those suggestions were intended to describe characteristics of the image itself, not the way the image is being presented with the stylesheet. The difference is that
class="light"applied to a lightly coloured image is still relevant even if the stylesheet changes, whereasclass="border"is not if the new stylesheet decides that such images should not have a border.Have you thought of
strongemphasis? It’s generally used to draw attention to key words and phrases, so why not images too?How about imageHolder/image_holder.
All it says is that it “holds” an image, which is structural and not presentational.
Or “wrapper” is another good word.
As for the inline and border images: featureImage and structuralImage??
While there might not be a right way to do it, there are definitely wrong ways.
Well, why are you adding a border to an image?
Once you can answer that question – why are you doing something, what is the purpose of it; rather than what you are doing – then I think you will get a reasonable answer.
I would go for something like “standout” – I want to make the image “stand out” from the surrounding text.
The second part – you have two categories of images, one that is illustrative and floats within the text that it relates to, the other that stands alone within the document. So, what about two classes, “illustrative” and “standalone”?
Look at it from the other direction.
Basically, you want the images on your pages to have borders. The exceptions are the images that form part of the layout.
Is that a good summary of the situation? If so, then simply use the rule
img { border: ...; }and reset the borders on the images that you do know about. There’s no need for a class.First of all, I was wondering why I had entries in my logs from that referrer after all this time. Second, I completely agree on this “grey area” point in principle. I consider it like <b> (which I personally believe has the same semantic equivalence as <strong>, — very little)… at the lowest level, there are times when presentation fails to have a semantic or meaningful translation, and it seems to me it forces the issue to pretend meaning exists when it does not.
The key is to have the discipline to make sure that semantic or meaningful alternatives are exhausted before allowing yourself to use a meaningless tag (<b>) or class name (“border”). For instance, consider the case where you’re posting some images and for whatever reason cannot retouch them in any way. Some of them have borders within the actual image, others do not, and you want them all to have a uniform appearance. At this point, there is nothing wrong with a
.bodrderclass, is there?In fact, by giving the class an entirely presentational name, you are essentially stating that there is no meaning or interpretation that can be inferred from the class. In other words, that image “a” and image “b” are not different in any meaningful way aside from the content of the images themselves.
As long as the class is describing whether a border is present in the image, there really isn’t any problem, though I’d call it “prebordered” or something to avoid confusion.
I agree that having a class named border is somewhat unintuitive, but I also agree that it’s a grey area. I personally use a lot of descendant selectors, but in the case of an individual image, something different needs to be specified. Of course, this could also be solved within WordPress (figuring out a way to incorporate categories as classes to be used in individual posts), if stand alone image posts were all in the same category (picture-of-the-day or something like that). Perhaps something like this (within the WP loop, of course):
class="<?php the_category() ?>"The only problem I could see would occur in browsers that don’t support multiple classes or have buggy support for multiple classes. That way you could still use descendant selectors and keep presentational markup to a minimum.
I agree with Malarkey above – the process of thinking about “why” is an interesting challenge (it doesn’t always bear fruit, I’ve found, but it usually does. Practice needed.).
On a band site I run for my brother, we have a number of picture types which needed borders. Almost always, photographs need a border. Thus, a class of “photograph” was fairly obvious. Album Art got a class too since I have a different border style for that.
On a small scale site like that, it’s easy to get away with just those. If I were to give my brother a blog, leaving him free to post images in his content which didn’t match being a photograph or coverart, I’d be stuffed, though. No way could I possibly think of useful class names for every type of bordered image I might like: “Illustration”, “Screenshot”, “Cartoon”.. etc. The possibilities are fairly endless. I’d end up with more classes than he’d ever use (or be able to remember to use).
My inclination (at least in my this case) is to have all images within the blog content bordered by default and leave them without a class name at all. Much like you, I like to have floated images that accompany the topic of a post sometimes (where borders are less desirable) and it is these images alone which I would apply a class to.
At this point, I’ve run out of example since I’ve not chosen any class names for my brother’s blog. At the moment at least, I think of a floated image at the top of an article as a “topic” image or even “headline” image. Either of those seems pretty appropriate.
This whole business is only going to get harder as we all start paying more attention to using the same classes in aural stylesheets, of course. I think a lot of people are going to hit their heads on their desks as they find some semi-semantic naming conventions don’t hold up any more.
Eric,
I guess this is also a size dilemna. If you want your content to stay up indefinetely then this becomes an issue. As we all know, I may want a border on the image now, but two years from now I may want the image to not have a border. I would assume this is part of the bigger picture here.It may be good to pick a class name that has something specific to do with the picture content, but if its that specific it may warrant its own ID.
That being said, imagine if you wanted to keep everything in a separate css file. Image how big your file would get if you are constantly referring to something specifically. Yeah, inline style may not be a good idea, but it makes me take a second look.
Just thinking here…Could you give those images that you want to have this special look an attribute value different from the rest and then refer to those images with that attribute in your css? Or maybe assign a specific class number for borders. Like class 004555 and then have 004555 border: 1px solid black in your css. assign that class to things you want to have a border, knowing that you could always change the 004555 values in your css. Just a thought.
I think stuff like this is a personal maintenance issue, and I think once you have to ask the general public for an answer, you’ve thought about it too much. :)
Designing your own site is a funny thing. If you’re designing for someone else, you keep your ideas simple enough that folks other than you can get them.
With your own site, though, you can get all introspective and nitpicky, and try to figure out exactly what’s telling your brain whether to use borders. Add in a moderate case of ADD and you end up with a site like mine that’s never finished enough to actually add content to. :P
I have a similar problem with images but I tend to use
class="right"orclass="left"to identify their float properties. I may also add border, margin, and other CSS and while those aren’t described, most certainly the float properties have been. I’ve simply accepted this as a weak point in my pages but given the current discussion, I might give it second thought.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. foridbut 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 visual or special might not be special or visual or your image might not have a border in the future.
My site is in no matter perfect (I mix too much as well), but I’ve begun an XML-Like approach to handling the problem. Basicly, where I would give an element (or set of elements) a tag in xml, I give them a class in xhtml. This doesnt really flow into my blog, but it could.
For example, my projects are as follows:
<div class=”projects”>
<div class=”project”>
<div class=”screenshots”><a href=”linked to larger”><img src=”thumb”/></a><img src=”not linked”/></div>
<div class=”title”>Project Title</div>
<div class=”content”></div>
</div>
</div>
So in this case, I always float my screenshots to the right, while I would (if I had any), probably put an img inside of the content as a standalone image.
Then using CSS I can format this page as needed for whichever design I am using. The only fallback right now is that I have title after my screenshots because I want them to have the same y value.
Anyways, its far from ideal, but it forks for me right now.
‘Border’ is an actual CSS attribute/property that is used to describe the style of the border to be placed around something. With that in mind I would recommend CSS attribute/property names never be used as id or class names. Instead use class names like; photo, screen_capture, drawing, diagram, slide or scanned_image. Those define the image that you are displaying. Styling those names will keep things consistent rather than treating images differently based on their lightness, darkness or content. No longer are you using the class name to say how something is styled but what it is that you are styling.
It seems that illustrative images are the exception here. How about
class="illustrative"for the floated images, and leave the standalone images unclassed?First, glad to see that other folks have the same naming trouble that I tend to have. ;)
I think that Tom, up there in comment 11, has a good solution. Why create a new class name when there’s a tag that does what you want: the strong or em tag would work well in a situation like this, it seems. You really are adding some emphasis to an item, in this case a border. Very appropriate for the task at hand.
But images are presentational, right? So what’s wrong with defining their presentational context (I mean, it’s not like you’re saying class=”thickgreenborder”) along with semantic context. It’s essentially the same idea as comment 6, but more flexible.
I agree, it’s going to always difficult to apply semantic classification to an image, because it’s not something humans do very often — whereas semantic classification is a natural way to structure language/text.
Some images are indeed presentational (backgrounds, borders, banner logos), but these shouldn’t even have tags; they should be added in later with CSS image replacement or DOM scripting.
Anything that does get an img tag is content, like text, and the classname applied to that tag should describe something meaningful about the content of the image, just like the classname of a span describes the text content inside it.
Because the presentational context could change down the line, and suddenly you have a bunch of images with “border” classes which aren’t bordered, and a bunch of images without that class which are.
So you’re saying that as long as we use vague presentational classnames, it makes it all better?
Classnames describe content; they do not describe what we want to have happen to the content later.
I figured Eric would have chimed in by now.
Maybe he’s just testing us :D
If
imgis a block element, and the purpose of the border is to emphasise or draw the eye to the image, how aboutclass="blockemphasis"? Or alternatively forget aboutclassand place youimgwithinem?Just determine the function of the element you need a class or ID for, and if it becomes too special (for example, you might need it for some other elements, too), choose a more generic name (this demands some foresight). Of course generalizing, but almost always sufficient.
– Jens
Eric,
Without knowing under what circumstances you choose to “border” your imags, one can’t really address the question.
Yes, the class of “border” is not correct, as at some point in the future you could decide that these images should not be bordered.
Even another class name that is presentational, but not as specific as “border” could work for you here.
<img class=”slickLookingImage”> or something of the sort. :-)
I like your comment, Eric, where you warn off those who would tell you not to worry about this. That you enjoy pondering such quandries. Well, let’s take it a bit further. I like enclosing especially spectacular bits of text with tildes and other typographical bric-a-brac. Should such bracketing elements be set off with a css selector? How about some block-quoted ascii-art?
.art { // here we present the presentation....
font:: monospace;
padding: 10px;
}
It’s amusing to see this discussion enter the realm of Austin’s demarcation of the “performative.” Eric, you should check out Derrida’s “Limited Inc.” for an amusing consideration of the philosophical ground on which you are starting to tread. CSS designers aren’t the first to become pleasantly (if maddeningly) distracted with this question…..
In some cases, you just need two or three different styles, and the reason for styling differently may be tricky to describe in a class name, so why not give them generic but meaningless names? On a business site where I need two different styles for tables (yes, tabular data) and am faced with a similar naming issue, I’ve sometimes resorted to simply:
.tablestyle1and.tablestyle2or
table.style1andtable.style2I avoid such names where possible, but there are some cases where nothing else seems particularly better. Eric’s example may or may not have more meaningful solution than this. If you want to change one class of styles later, you can do so without it being misnamed. A disadvantage is that you sometimes forget which style is which and have to refer to the style sheet.
Such naming and process is similar to what I’ve done when working on technical documents in FrameMaker where my template has a couple table styles named generically, and this seems like a reasonable test or comparison. I think it’s interesting to imagine what you would do if you were using the Styles feature while working in (for example) InDesign or another DTP program.
I have a couple potential solutions, one of which is to use Javascript to add presentational classNames so they stay out of the document…
I’d have to second the idea of enclosing the
imgs insideems and/orstrongs, if they’re meant to be emphasized. If not, well, then I think you’re stuck with purely presentational classes for them.I like using ‘standalone’ for an image as Eric describes. In my mind it is structural rather than presentational — it says that the image sits apart (or “stands alone”) from the rest of the content just like ‘entry’ is used to single out individual blog entries. I use ‘standalone’ myself and intend to continue using it.
I don’t know what to do for ‘border’ though.
A problem I have is what class names to give to other images like the ones floated within an article, or photos of the author, etc. Two people above suggested ‘illustrative’ for the former. Maybe that’s good, I don’t know. It assumes all such images would always be floated right, or always floated left. What if I want variety like in a newspaper? Speaking of that, I wonder what class names / naming conventions are used by printers. We’ve already adopted their use of ‘masthead’ — maybe they have some other good ideas we can use.
I wish I had more ideas on this because, in this blog topic at least, there isn’t a clear naming convention yet. I’ll have to go see how Eric names his floated images. ;-)