Stratajet CSS / SCSS Styleguide

1. Formatting
2. Commenting
3. ID Selectors
4. Class Names
5. PX EMS and REMS
6. Floats and Flexbox
7. Breakpoints
8. Nesting
9. Javascript Hooks
10. Styling Elements
11. Important
12. Namespacing

Formatting

• Use soft tabs (2 spaces) for indentation. This is the only way to guarantee code renders the same in any person’s environment.
• Put a space before the opening brace { in rule declarations
• In properties, put a space after, but not before, the : character
• Put closing braces } of rule declarations on a new line
• Put blank lines between rule declarations

Good

.st-avatar {
  border-radius: 50%;
  border: 2px solid white;
}
 
.st-one,
.st-selector,
.st-per-line {
  // ...
}

Bad

.st-avatar{
    border-radius:50%;
    border:2px solid white; }
.st-one, .st-selector, .st-per-line {
    // ...
}

Commenting

• Use single line comments (// in SCSS) instead of block comments
• Comments should be on their own line. Avoid end-of-line comments
• Sections should be separated with block comments in all caps, beginning with a #

//------------------------------------
//  #SECTION TITLE
//------------------------------------
 
.bd\(n\) {
  border: none;
  // this is what a comment should look like
}

ID Selectors

*Do not use ID selectors in any case unless it is the only way to style an element from a library

Class Names

• Prefer dashes over camelCasing in class names
• Class names must start with a prefix unless they are atomic or are generated by a JS library
• Class names can be done with BEM if necessary

Good

.st-btn--primary {
  background-color: blue;
  padding: 1em;
  color: white;
}

Bad

.stBtnPrimary {
  background-color: blue;
  padding: 1em;
  color: white;
}

PX, EMS and REMS

• In theory PX should never really be used except for declaring a base font size in n a html or body selector. Although this will become 100% for future sites
• PX may also be used to specify very small sizes, but this should only be done if the alternative is beyond 3 decimal places i.e. font-size: 0.125em
• EMS and REMS are the recommended units for Stratajet projects
• Use REMS for units you want to be affected by the global base site
• Use EMS for units you want to be affected by the size of the container they are in

While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size.

Floats or Flexbox

• Please avoid using floats at all in for any project. The presence of floats might usually be due to legacy code, or code brought in from external libraries

Breakpoints (Media Queries)

• Media queries should be written within the selector that they affect and not in an external media queries file in order to have everything in one place. In the future we might use a PostCSS process to separate all the media queries.
• For readability and reusability all media queries must be wrapped in a breakpoint Scss mixin.

@mixin breakpoint($point) {
  @if $point == lg-h {
    @media (min-height: 920px) { @content ; }
  }
}
 
.mdl-textfield__input {
  font-size: 13px;
  @include breakpoint(lg-h) {
    font-size: 16px;
  }
}

Nesting

• Do not nest more than 3 levels deep. This way css doesn't become too specific making it easier to use on other parts of the site.

.lt-page-container {
  .lt-content {
    .lt-profile {
      // STOP!
    }
  }
}

Javascript Hooks

• Where possible javascript hooks should be prefixed with js-. They should not be referenced in the css or scss file but should only used for js.

<button class="st-btn-primary js-request-to-book">
  Request to Book
</button>

Styling Elements

• Always style a class and if you must, an id. For the purpose of javascript libraries that are difficult to customise you are welcome to style an element in a class, but never an element on it's own outside the _base.scss file.

Bad

h3 {
  font-size: 1.2em;
  color: $white;
}

Good

.st-heading-3 {
  font-size: 1.2em;
  color: $white;
}

Important

• Due to the fact we are using external libraries like Material Design Lite, there is a possibility that !important will need to be used from time to time but please avoid it if you can.

Namespacing

Custom Components st- All custom basic components should be prefaced with st- which stands for Stratajet. An element with an st- prefix implies that ancillary classes can be removed and the element will be able to look as good as it does in the style guide. There should only be one st- class per element.

Layout tweaks lt- All tweaks to components or layout should start with lt-. I would advise against having more that one lt- class. Please try to use atomic classes for variations instead of adding another lt- class.

Javascript hooks js- If an element requires a class for javascript functionality it should be prefaced with js-. Please note these classes should not be styled.

Utility Classes atomic class names All smaller tweaks to elements should be added with atomic classes. Please don't have too many atomic classes per element ie more than ten. If you find yourself with that number of classes please make a layout tweak class.

<div class="st-dropdown-select c(white) pos(r) mt(1em)">
  ...
</div>