CSS breakthrough or CSS break? Single letter div tagging
The other day I was playing with some thoughts about my layouts, I started thinking 10 years or so back, when nested tables where all the rage before CSS became big. Upon thinking about this I realized that a lot of the things we are doing in CSS can be replicated with tables — some of which are still being used (for e-mail templates and things like that).
When I started to think about it, I was saying to myself, “The reason why I don’t like using tables is because I can call upon an ID for the CSS, which styles and puts that block into the right place.” It becomes a whole heck of a lot easier when you have an ID instead of just a table summary and a whole bunch of nesting. After thinking about that, I also started to think, “Well, how can we make this even more simple?”
The Discovery
Initially I wanted to decrease the amount of text on the actual layout. I want to make <div id=”div_id_here”></div> completely short! But how do I do that? So I started playing, and I think I may have either discovered a new way to shorten div id’s or maybe even break them completely. So I am calling upon my readers to help me either decide, did I discover something new? Or did I discover complete crap that just breaks all rules of CSS. You decide, but either way, I think this has some serious potential for play!
Basically, you are entering a single letter for the div id, but without the “#” symbol before the id. So #wrapper would then turn into w — that’s right, you read it correctly, just the letter “w.” That would represent the wrapper - which you would style the same in the CSS.
Something short in the CSS would look like this: “w {font-size:11pt;}”
Then to call upon that CSS you just put <w> and then to end it </w> — which essentially lets you know that wrapper is starting and wrapper is ending. The benefit to this is that you will no longer loose which ending div is the correct one, you are essentially adding an ID to the wrapping (or closing) div tag. I am sure you have asked yourself, “Is this the wrapper ending div tag?” Well now you won’t have to guess! That is some serious potential!
The downsides are simple, obviously you won’t be able to style spans or classes the same, or could you? I am not totally certain. Do you know of some serious down sides?
What do you CSS lovers out there think? Can you see the serious potential we have here? I have included a very small screen capture of how this works - you can obviously put the CSS inside of a .css file and import it into the html or php page (whatever page you want really). If I have discovered something new, which from some quick google searching it seems like it is an un-talked about subject, I want to call this breakthrough, “single letter div ID’s.”
Example of how it looks:
Jun 18th 2008
Very cool idea. The only downsides I see are 1) there are a lot of standard single letter tags already (like a, p, b). It might be hard to keep those straight. And 2) even though it’s nice and clean, it’s pretty much useless to anyone besides you who has to change or work with your code. Unless you include a legend or something, an outsider will have no idea what “e” is.
Jun 18th 2008
Hmm this is an interesting way of writing CSS but you would have to watch out for predefined HTML tags that already exist.
Jun 18th 2008
Yeah all very good points, but you could also make it and just change the w to wrapper — without the “#” of course. Let your imagination soar with it!
Jun 18th 2008
This could only work if HTML pages were treated as a complete meta-language, such as XML. In XML you can define nodes with anything as its name. HTML doesn’t work like that because pre-defined tags do certain things; bolds, is a list item and so on.
What you would need to do is much like a CSS file, import a schema file much like a DTD in XML. In that you could define what things represented a “div”, “table”, bold, etc. In fact, by doing this, it would then be possible to change what ANYTHINGs default markup was. Don’t like “”? well you can now have “” and so on.
The problem with that idea is that anyone that views your source would become lost, unless they were provided the DTD file, read it, and then understood what you did differently.
In the end, it’s possible to do what you’re saying, but it would completely obliterate standards, which is hard enough to police as is!
Jun 18th 2008
I’ve tried this for a specific project in which we had xhtml feeding into flash as xml. so, like xml, we decided to create our own tags so that it was usable in both formats and could maintain content in both mediums simultaneously. works well.
Jun 18th 2008
This is super interesting! I am going to start working on some things and see what I can do. I love simplifying code as much as possible to see what I can do with it. In the works.
Jun 18th 2008
Side note, you aren’t sanitizing your inputs!
Jun 18th 2008
Aside from the benefit of using a single character, I don’t think this idea will fly at all because now you’re creating even more HTML tags that have less meaning.
Jun 18th 2008
I just use HAML. It’s so much nicer than HTML. And as long as all the indentation is correct (well it has to be, for this to work at all), all the tags close themselves.
Jun 19th 2008
I’m almost certain that you haven’t discovered anything new. Whatever browser you tested this in probably understands XML, and this is perfeclty acceptable XML.
As for whether or not this would be cool, I promise you, it wouldn’t. Using non-standard tags means there is no semantic value unless you go through the trouble of putting together your own documentation for those tags. As long as we stick to a standard way of doing things, we can ensure that our documents will be usable by others.
Jun 19th 2008
Two words… Non Semantic. If you don’t mind your pages not validating, I’m sure this method would save you tons of time and would be fine to use on your personal site. If you tried this in a collaborative work environment, you’d have a lot of developers and designers screaming bloody murder unless you meticulously documented your methodology.
Jun 19th 2008
Don’t miss the point here though — in no way do I think it works perfectly. I only stated that it has tons of potential to work on!
Jun 19th 2008
I guess it is a bit interesting to hear that this actually works. Very well-spotted.
But as others say, it’s not semantic—and that rather kicks potential into the gutter. Using a single-letter
idwould be a bit silly, as you would be confused. “Does ‘w’ stand for ‘widget’, ‘wrapper’, or ‘weasel pictures’”—that kind of thing.I do believe that HTML 5 will actually allow this XML-like “create your own tags” malarkey. http://www.alistapart.com/articles/previewofhtml5/
Aug 16th 2008
That is essentially XML in functionality hehe. The problem is, you’ll be hitting the reserved tags like a{} for anchors, and overriding them!