Crazy idea: using custom HTML tag names for UI controls

Now that I have a break from my last job, I’ve been working feverishly on my new JavaScript app framework. Called Jo, one of the themes of the architecture is keeping the code simple by leveraging advanced CSS (finally) which is common among most modern browsers.

One of the issues I’ve run into with this approach in the past is the CSS gets thick with, basically, lots of div tags with classnames like “menubar” and “group”. I found this can make for some difficult maintenance, especially when working on cross-platform apps.

Worse, one of the first real apps I’m building with the new framework includes a searchable, indexed set of its own documentation. Cute thought, but hurdle one was: how the heck do I pull in HTML doc files with their interesting (and possibly themed) CSS without creating odd interference with my UI controls?

After some vexing time fiddling, I came to the conclusion that I didn’t want to have to fiddle. I wanted to be able to pull in any content-oriented CSS without stomping on my UI widgets. Since the framework is geared for desktop widgets and mobile devices, using iframes was out of the question (besides, they suck).

I remembered some time ago that I experimented with using made-up tag names and applying CSS to them. Guess what? It works.

<div class="stack">  
    <div class="card">
        <h2>Hello World!</h2>


        <jotitle>Hello World!</jotitle>

and the corresponding CSS is very easy to setup. Keep in mind that the framework is designed to create DOM elements as-needed, so this is all happening behind the scenes. No human is expected to actually code to these funky tags.

After another wave of refactoring, I’m pleased to say that it’s working nicely. I can apply pretty much any CSS I want, in this case to display documents with their own styling, without breaking any of my UI look and feel. Well, except the body tag; I mean, that affects everything. For now, I’m just splitting the body CSS into a separate file for my standalone documentation, and my app just pulls in the rest of the CSS instead.

I’ll be rambling more on this subject as Jo comes together, but so far it’s going very well. I’m also doing a few other crazy things which makes an older part of my web developer brain twitch, but what’s the point of making a new framework if I’m not experimenting?

Endorse davebalmer on Coderwall submit to reddit
comments powered by Disqus