CSS has a well-supported :empty selector

All browsers + IE9 Show archive.org snapshot know the CSS :empty selector. It lets you hide an element when it has no content, i.e. not even white space.

(How to prevent whitespace in HAML) Show archive.org snapshot

For instance, you have a badge displaying the number of unread messages in a red bubble with white text:

Copy.unread-messages-bubble {
  background-color: red;
  border-radius: 10px;
  padding: 10px;
  color: white;
}

To hide that bubble entirely when there are no new messages:

Copy.unread-messages-bubble:empty {
  display: none;
}

Note that the element must be completely empty for :empty to match.
See DevDocs Show archive.org snapshot .