dave-hunt
1/3/2018 - 9:30 PM

Here are some helpful guidelines to making sure that your SCSS file stays consistent with other CT projects.

Here are some helpful guidelines to making sure that your SCSS file stays consistent with other CT projects.

CT SCSS Structures and Practises

Here are some helpful guidelines to make sure that your SCSS file stays consistent with CT standards.


SCSS Structure

SCSS should be styled in a consistent order. To keep things consistent within CT dev projects, please keep your SCSS in the following structural order per styled element:

Extends
Includes
General styles
Hover/Active/Focus states
Pseudo elements
Nested elements

Example:
.class-name {
  @extend %module;
  @include transition(all 0.3s ease);
  background: $pink;
  &:hover {
    background: $dark-pink;
  }
  &:before {
    content: "";
    display: inline-block;
  }
  > h3 {
    ...
  }
}


Create Smaller SCSS files and import them into app.scss at the top of file

Fonts, header styles, footer styles, and any other types of styles that can be contained should be in their own stylesheet to keep the project organized. When importing into app.scss please add a comment at the top to state what type of import you are adding to the document.

Example:
/* Vendor Dependencies */
@import "animate";

/* Authored Dependencies */
@import "global/colors";
@import "global/mixins";

/* Patterns */
@import "global/tabs";
@import "global/modals";

/* Sections */
@import "global/header";
@import "global/footer";


Make all Colours Into Variables

To save from having to remember all of the hex codes, turn hex codes into variables with names that make sense.

Example:
$white: #fff;
$black: #000;


Limit Nested Elements

Try to limit nested elements to 3 levels. Anything after that gets too specific.


Use BEM When Naming Classes

B: Block
E: Element
M: Modifier

Block
A standalone entity that is meaningful on its own.

Examples:
.header, .container, .menu, .checkbox

Element
Parts of a block and have no standalone meaning. They are semantically tied to its block.

Examples:
.header__title, .container__section, .menu__item, .checkbox__caption

Modifier
Flags on blocks or elements. Use them to change appearance or behavior.

Examples:
.header__title--small, .container__section--half-width, .menu__item--pink, .checkbox__caption--bold