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!
SASS - Architecture and component style
By TenantCloud
SASS - Architecture and component style
TenantCloud CSS/SCSS
