Unfinished. Need to be discussed.
The missing ITCSS Layer for Components is here. Instead of writing component stylesheets under assets/styles/,
the styles should be dropped in each individual component-folder in components/[MyComponent].
In favor of using Single File Components, place your styles in the styles block directly in your *.vue file.
If your styles or local settings are getting to long, don't hesitate making an import of local scss-files to the styles block.
<template />
<script>
export default {}
</script>
<style lang="scss">
//Setting Block
$my-super-component-font-color : $app-color-black;
//or Settings Import File
@import "MySuperComponent.settings";
//block
.c-my-super-component {
//element
@at-root #{&}__title {
color: $my-super-component-font-color;
}
//element
@at-root #{&}__copy {
color: $my-super-component-font-color;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# Example Component Directory
/components/
/ui/
/MySuperComponent/
MySuperComponent.vue
_MySuperComponent.scss (optional)
_MySuperComponent.settings.scss (optional)
1
2
3
4
5
6
2
3
4
5
6
# Naming Component Classes
Global Prefix (namespace c-)
c-[name-of-component]
//e.g. Component BaseAlert
.c-base-alert{}
1
2
3
4
2
3
4
# Naming Component (Local) Sass Vars/Tools
Please note here that there should be no $app prefix, because they are local.
$[name-of-component]-[cssproperty-pseudoclass-state-element-semantics]
//e.g. Component BaseAlert
$base-alert-font-color: $app-color-black;
1
2
3
4
5
2
3
4
5
Global App Settings & Tools are also available in your vue-components.