A better way of hiding and revealing markup elements?

Prototype.js uses direct manipulation of the style of an element instead of relying on CSS. For instance to hide and show an element they do the following (disclaimer, this is not actual prototype code, I merely interpreted it from memory):

function Element.hide(elmt) {
    elmnt.style.display = 'none';
}

function Element.show(elmt) {
    elmnt.style.display = '';
}

This works most of the time, but I think this approach is flawed in the sense that it steps over the ideas of CSS. Why don't they have a prototype.css which does the following:

.hidden {
    display : none;
}

and in the prototype.js they could do the following:

function Element.hide(elmt) {
    elmt.addClassName('hidden');
}

function Element.show(elmt) {
    elmt.removeClassName('hidden');
}

This is cross browser compatible, and doesn't mess with the default value of the display property. I'm not sure if setting element.style.display=''; always reverts the display property to the correct value for the element in question. But the CSS way sure feels a lot better.

I can only see the implication of deminished performance for showing and hiding elements, but I doubt you'd notice it.