Blah

<div class="Admin-dialog dialog dialog--large">
  <div class="dialog-header">
    <h2 class="dialog-title">
  </div>
</div>

<!--


In this instance, dialog is a component and Admin-dialog is a partial.
Components are camelCase. Submodules and subcomponents are indicated with a hyphen. Modifiers are marked with two hyphens.
A partial contains many components, and allows the author to add additional contextual styling to them based on their context.
If a component is styled to the look the same way in two different partials, it is broken off and refactored into the component as a modifier.
Why this is good:
- Responsive web development is far from ideal at the moment, especially due to the lack of element queries.
- Easy identify where to go for specific style changes. If you need to change the style in one specific place, create a partial and begin overriding rules.
- Solves the specificity problem.
- Create reusable stuff, but doesn't sacrifice design requirements.


Conventions:

.dialog would be located in the components folder.
.Admin-dialog falls under the admin namespace, therefore the SCSS file will be located at:

../scss/components/
../scss/partials/admin/dialog.scss

.tabs would be located in the components folder.
.Ticket-tabs falls under the ticket namespace.

../scss/components/tabs.scss
../scss/partials/ticket/tabs.scss

These namespaces are typically labelled after the controller. I.e. Views that fall under the knowledge_base_controller would in the knowledge-base namespace. And the class would be prefixed with KnowledgeBase. I.e. KnowledgeBase-buttonBar

../scss/components/button-bar.scss
../scss/partials/knowledge-base/button-bar.scss

The CSS would look something like this:

.dialog {
  padding: 16px 24px;

  &-header {
    .btn {
      float: right;
    }
  }

  &-title {
    font-size: 24px;
  }
}

// AdminDialog

.AdminDialog {
  .dialog {
    padding: 20px 28px;
  }

  .dialog-title {
    font-size: 32px;
  }
}

-->