SCSS Style Guide

1. SCSS Style Guide.markdown

SCSS Style Guide

File Structure

This is an example of a component named quote.

app/assets/stylesheets/
├── application.scss
|
└── edge
    ├── components
    |   └── _quote.scss
    ├── global
    ├── desktop-application.scss
    └── mobile-application.scss

Naming Convention

Component class names should follow Harry Robert's improved version of BEM methodology.

//block

.block {

}

.block--modifier {

}

.block__element {

}

.block__element--modifier {

}

Elements should NOT be nested inside of the Block.

//block

.block {

    .block__element {
        //This selector is too specific.
        //Don't nest elements inside of blocks.
    }
}

Environmental modifiers should be kept with the element declaration.

.block__element {

    .block--modifier & {
        //This keeps element styles all together.
    }
}

SCSS Example

The component file name should start with an underscore and be the same as the component class name replacing hyphens with underscores.

Try and keep the block level name short and avoid multiple word names if possible.

Modifiers should describe the function of the modification rather than how it looks. For instance, the example below uses --reveiew instead of --border-dashed;

• Block level classname: quote
• Filename: _quote.scss

The first line of the file should be a comment containing the component name.

CSS Properties should be grouped by type (Positioning, Display & Box Model, Color, Text, Other).

//quote

.quote {
  color: $black;
  background-color: $white;
  font-family: $main-font;
  font-size: 24px;
  text-align: center;
  min-height: 100px;
  overflow: hidden;
  position: relative;
  margin: 20px;
  padding: 5px;
  border: 1px solid $gray-brand;
  box-shadow: 0 0 6px $gray-brand;
}

.quote--review {
  border-style: dashed;
}

.quote--testimonial {
  color: $white;
  background-color: $gray-brand;
}

.quote__citation {
  color: $gray-brand;
  font-size: 16px;
  font-style: italic;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 10px;

  .quote--testimonial & {
    background-color: $light-blue-brand;
  }
}

.quote__citation--tutor {
  color: $blue-brand;
}

HTML Markup Example

<div class="quote">
  quote
</div>

<div class="quote quote--review">
  quote quote--review
</div>

<div class="quote quote--review">
  quote quote--review
  <div class="quote__citation">
    quote__citation
  </div>
</div>

<div class="quote quote--review">
  quote quote--review
  <div class="quote__citation quote__citation--tutor">
    quote__citation quote__citation--tutor
  </div>
</div>

<div class="quote quote--testimonial">
  quote quote--testimonial
  <div class="quote__citation quote__citation--tutor">
    quote__citation quote__citation--tutor
  </div>
</div>

Preview

View Pen on CodePen