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?
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
i have looked at your idea, it is too good but there is one problem is remaining in this style. The problem is that we give our customer browser compatibility till i7 and it would not enough for clients satisfaction it will be better for those designers who want to upgrade themselves in their field
I’m fairly new to web design. I’ve taught myself how to code websites through forums, tutorials, online videos and post such as these.
In my opinion about the approach above, using formatting tags for structure is like using tables for structure.
Its not a totally bad idea but it isn’t standards compliant. 1. you have to format the format tags to work as block level tags such as div and span. 2. format tags should be used for formatting text not layout. 3. if page loading is a concern. structure your codes with standards compliant html and css codes.Media should be optimized for web. avoid hacks and when saving your files for upload dont use spaces. it just makes your file space bigger. There are better methods when faced with structuring a webpage.
As said above simplicity is the way to go. Use standard compliant code.For more advanced structure use flash or javascript.