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