CSS

Reference selectors once

Each class should be referenced once. This makes it a lot easier to navigate for future maintenance, upgrades and fixes. Even though you can use less lines of code when you group selectors together, it's better to favor readability over efficiency.

// Do
.product--header {
  display: flex;
}

.product--footer {
  display: flex;
}

// Don't
.product--header,
.product--footer {
  display: flex;
}

Note

Always leave a space between the closing } of a selector and the beginning of another.

List selectors in sequential order

Order class names in the same order as they appear in the html. This makes it easier to navigate.

Data attributes and media queries

Use data attributes and media queries within the selector. Data attributes come first.

.product--header {
  text-align: left;

  .product--root[data-spacing='true'] & {
    padding: $spacing--block;

    @include mq--small {
      padding: 0;
    }
  }

  @include mq--small {
    text-align: center;
  }
}

You can combine data attributes like so:

.product--header {
  text-align: left;

  .product--root[data-spacing='true'][data-full-width='true'] & {
    max-width: none;
  }
}

Spacing: Padding & Margin

Troop uses a three-tiered spacing arrangment:

1. Section
   • Corresponds to the top-level of the section, use variable $spacing--6
2. Block
   • Nests inside a section, uses variable $spacing--block
3. Item
   • Nests inside a block, use variable $spacing--item

In general, avoid margins unless:

• They're used for centering
• Negative margins are needed for off-canvas items

With that said, use padding to accomplish the spacing structure mentioned above.

Borders & Lines

Use pseudo-elements where possible instead of the CSS border property, for example:

.selector-to-underline {
  &::after {
   content: '';
   display: block,
   width: 100%;
   height: 2px;
   color: grey;
  }
}

Rich Text Editor (RTE)

The RTE or 'what you see is what you get' (WYSIWYG) editor is used by shop owners to enter content such as blogs and product descriptions. If you want to style these areas add the class rte-content before adding custom styles.