Advanced CSS – Class Is Out – Avoiding Classes By Using Formatting Tags For Structure
Nothing makes me cringe more than when I see other programmers use a class declaration for every XHTML tag in their programming. Using too many CSS class declarations can result in:
- Bloated page downloads for the user
- Bloated CSS file downloads for the user
- Difficulty in editing CSS files due to so many classes for the programmer
- Using meaningless class names to try to save space
There's a more efficient way to code your pages without using a lot of classes: use formatting tags. A CSS purist would say that all formatting should take place in the CSS file, so we'll have that covered. Also, we'll put to use some tags that we probably wouldn't use otherwise.
The Code
Here's the CSS code I'll use:
strong, font, em, big, small, i { display:block; font-weight:normal; font-style:normal; margin:0; padding:5px; font-size:11px; }
strong { width:700px; margin:10px auto; }
font { height:100px; background:pink; }
em { width:150px; height:300px; float:left; background:lightblue; }
big { width:400px; height:300px; float:left; background:lightgreen; }
small { width:120px; height:300px; float:left; background:lightyellow; }
i { background:#fffea1; height:100px; clear:both; }Here's the XHTML structure I'll use withing the page:
<strong>
<font>
{ This is the header }
</font>
<em>
{ This is the navigation bar }
</em>
<big>
{ This is the content pane }
</big>
<small>
{ This is the sidebar }
</small>
<em>
{ This is the footer }
</em>
</strong>The Issues
While the above works, many would argue that the above is bad practice because:
- It may bring page validation issues
- Code may be more difficult to maintain because the programmer wouldn't remember how he/she is using each tag
- Some programmers may prefer using formatting tags for formatting.
I would have no issue using the code above. The worst issue I can identify from the list is that the page may not validate, but page validation often isn't necessary as long as the page functions as it should.
What are your thoughts? Have you ever used this type of formatting? Do you take issue with the above code?
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
That’s crazy. Why would you choose to do it that way?
I’d agree with the bad practice issue, those tags aren’t intended to be used in that way. What happens if you want to make some text slightly bigger in one of your blocks? Use BIG? Ooops, that makes it into the content pane. Use SMALL? Oops, you’ve just made it into the sidebar.
It’s a dumb idea, sorry.
I have to disagree with Tufty. From a scalability standpoint, if the base html elements area already formatted (with out the use of explicit classes and ids) then development goes much faster for future add-ons. This is not to say that id’s or classes have been replaced, as in the situation above.
I have tried both ways, and I side with this method for simplicity.
Crazy would be a bit much Tufty. Unusual? Maybe. I don’t use any of those tags in my programming and I have ~100 customers. “Just a bit bigger” doesn’t sound very standardized/organized to me, I’d probably use special formatting on an “h{x}” tag or a “span” tag. All formatting should be done in the CSS so the tags I used above shouldn’t be used.
Not a dumb idea at all, just different.
Ok, maybe my initial reaction was a little harsh. That said, I pride myself on producing semantic standards-complaint websites, and I think I _mostly_ achieve that.
I can see what you’re attempting to do here, and from a given viewpoint, it makes sense. But I think I’ll still stick to my method of DIVs with IDs for picking out content block, using classes for grouping related styles, and using the other tags where they make sense to me.
But there’s no “One Right Way” to build your websites, and if this technique works for you, why not.
I knew you’d come around Tufty.
I don’t use this system of programming either, but it’s an idea worth exploring. If you have a large website and you’re needing to save bandwidth, this could save you a lot. One line of longer CSS so that you can use short tags on every page — could save a lot of money.
Thank you for sharing your thoughts!
The idea is interesting, but semantically it is incorrect and there can be no further discussion on that.
Also you’re using the font tag which is deprecated in XHTML 1.0 so I’m not even sure it’s totally valid.
Using div tags with a semantic id is the way to go to mark out _divisions_ in content such as header, navigation and sidebar.
Thank you for commenting Alex! With regards to the font tag, I could just as easily use a different tag.
I wouldn’t use this for a business project either. Personal-wise, possibly.
david, you said “All formatting should be done in the CSS so the tags I used above shouldn’t be used.”
The problem with this statemend: the tags you are using ar not “formating” tags, these are semantic tags… It’s about the meaning of the given text, not style. When i use EM, i’d like to differentiate something in the text, because it has a special meaning… (That’s exactly why its now EM and not I, EM stands for emphasized, that describes the meaning, instead of I like italic, which described the look of the text). XHTML should always describe the meaning and structure of a text. Isn’t this why we use CSS to separate semantic from style? And a text itself again is only the visualisation of what mostly is spoken word. When i say something loud, i’d represent it as text with bold or uppercase letters. In HTML, the analogy to “loud” is “strong”. Using this for visually arranging pages is in my opinion like using tables for the same purpose. And that discussion the web already had. I guess, HMLT5 is what you are looking for ;-)
This is how we used to do it in HTML4!
I’d say that any tag used within the tag that is not a container of some kind should be deprecated.
I agree with Tufty, it might be different, but it’s still a dumb idea
@davidwalsh83: You’re missing the point of CSS entirely. First, you’re using semantic tags (EM and STRONG) in a non-semantic fashion. EM indicates — sematically — emphasis, and STRONG indicates a more pronounced rendering, so that different user-agents can render emphasis and “boldface” how they please.
Secondly, by using elements that may be treated differently by different user-agents (i.e. screen-readers), you’re using CSS to REDUCE usability and accessibility of your pages.
Thirdly, you’re confusing the structure of your page for non-CSS user-agents by using span-level tags to simulate block-level elements.
All in all, this cure is worse than any disease it was intended to oppose. The true cure for classing every last element is proper use of cascading and child selectors. One should need few classes applied to parent elements, whose children can then be referred to as such.