Architecture and components styles

CSS / SCSS

In component

style.component.scss

SASS

  • article
  • base
  • elements
  • layout
  • modules
  • panels
  • states
  • theme
  • utilities

Architecture

(m-btn)

module

(m-screening-package)

module

(m-steps)

module

* move in to component

(panel-on-boarding)

panel

(l-on-boarding)

layout

Architecture

Separate modules by roles and features.

Architecture

  • use @import for "variables", "z-index" etc.
  • use class or tag name to isolate styles.

Style components

 

levels deep -

- words to describe a class

Avoid using more than 3...

Good / Bad practice

 
 
color: $color-primary;
color: $color-master-dark;
color: lighten($color-info, 3%);
color: $color-master-light;
color: $color-white;

Always use a default variable for colors!!!

Good / Bad practice

 

Thanks!