Class names use underscores in css but dashes in HTML

[nfriedly]

Hi, I'm new to some of this stuff, but I'm trying to just use the default stylesheet and not having much luck. It gets included, but none of the rules apply. It seems that html is rendered with hyphens in the CSS classes (-), but the included stylesheet uses underscores (_):

<div class="ember-view flash-message-queue" id="ember391">  <ul class="ul">
      <li>
        <dl style="" class="ember-view flash-message flash-message-error visible" role="alert" id="ember445"><dt class="flash-message-icon-wrapper">
  <span class="icon-error" data-test="flash-icon"></span>

  <span data-test="flash-type" class="hidden">
    error
  </span>
</dt>

<dd data-test="flash-content" class="flash-message-content">
  There was an error logging you in: HTTP error 400 from /oauth/token - Missing parameters. "username" and "password" are required

  <!---->
</dd>


  <div class="flash-message-button-wrapper">
    <button data-test="flash-button" class="button">
      <span class="icon-close"></span>
      <span class="hidden">Close</span>
    </button>
  </div>
</dl>
      </li>
  </ul>

<!----></div>

.flash_message,
[class*="flash_message"],
.flash_message .content,
[class*="flash_message"] .content {
  width: 100%;
}

.flash_message,
[class*="flash_message"] {
  padding: 15px;
  margin: 0 0 15px 0;

  display: none;

  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  opacity: 0;
}

.flash_message.visible,
[class*="flash_message"].visible {
  display: table;
  border-collapse: collapse;
  max-width: 100%;

  opacity: 1;
}

.flash_message .icon_wrapper,
[class*="flash_message"] .icon_wrapper,
.flash_message .content,
[class*="flash_message"] .content,
.flash_message .button_wrapper,
[class*="flash_message"] .button_wrapper {
  display: table-cell;
  vertical-align: middle;
}

.flash_message .hidden,
[class*="flash_message"] .hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.flash_queue .ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

You can see my complete project at https://github.com/nfriedly/particle-webhook-manager - there really isn't much to it, though.