CSS display none

Often so you can dynamically re-show it using Javascript. (The best way to do this is to have it visible by default then hide onload with javascript)

Sometimes so you can hide something in code outside of your control e.g. in CMS templates or in user stylesheets.

Those are two that I use most often...

Mainly for conditional display.

You might want to show some element only when some event occurs (say, a drop-down element in a navigation menu).

Or you might want to include text for screen readers or CSS-less browsers, in a manner analogous to the noscript tag. Screen reader behaviour is flaky, though.

Incidentally, I wonder if SEs still give any weight to text that isn't displayed. Probably not, or much less than normal text. Might be worth checking.

It's also useful in development since you can turn on or off displaying some elements easily, rather than deleting or commenting out large parts of HTML code.

He's a strange little character this display none!
So it's like not displaying something to then use JS or whatever to display it.
Seems like the wrong way to go about things to me.

Here is something don't display it but if X=Y display what was hidden.
Why not just if X=Y display this->

As for SE's, I presumed it wont affect keywords unless you display it, as it isn't in the HTML unless you "unhide" it, and then it's just the same as having something there all along.

You could use it to fix a lot of IE 6 bugs:

* html body { display: none; }

... On a more serious(?) note, here's a practical example:

CSS
p.ie-warning {
display: none;
_display: block;
}

HTML
<p class="ie-warning">Your web browser sucks!</p>

I'm working on a new drupal theme for my site and I use a logo instead of the h1 sitename, but I keep the h1 in the code and set it to display:none just in case someone wants to look at my site without the stylesheet.

~silverwing