Of course it doesn't, that's how "!important" works http://gyazo.com/ecf82b34f7e3e4a868ede58cb2979e4e

We've come across this same issue in our app, where we use the flex-box model extensively. Flex-box requires us to define display: box !important rules to make sure that lower priority display rules don't mess up the layout.

We're also using sortable and draggable from jQueryUI, which in turn uses jQuery.hide() to temporarily hide dragged elements, so we had to patch the jQuery.hide() function to use "display: none !important" for this (see code snippet below).

Do you see any potential problems with adding the fix to the codebase? Do you think it can hurt many users relying on this undocumented side-effect?

	// Set the display of most of the elements in a second loop
	// to avoid the constant reflow
	for ( index = 0; index < length; index++ ) {
		elem = elements[ index ];
		if ( !elem.style ) {
			continue;
		}
		if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
			// fix for hiding "display: xxx !important" elements
			if ( show ) {
				elem.style.removeProperty( "display" );
				if ( values[ index ] ) {
					elem.style.setProperty( "display", values[ index ] );
				}
			} else {
				elem.style.setProperty( "display", "none", "important" );
			}
		}
	}

Cheers,

Gabor

The best thing to do is not use .show() or .hide() at all. There are too many special cases to consider in order to get it right, and no amount of code will end up doing the expected thing. Just use a class name and .addClass() or .removeClass().