Component CSS Style Guide
CSS classes in interkit components should follow this style:
- There are 2 addressing schemes
- one for internal use for the component editor
- one for external use to write optional stylesheets for existing components
internal classes
you are free to use internal classes utilising svelte’s scoped css. Example:
<script>
// file name: MyComponent.svelte
export let type = "default"
export let selected = true
</script>
<div
class="container ${type}"
class:selected
>
<span class="item">
</span>
</div>
<style>
.container {}
.container.selected {}
.container.default {}
.item {}
</style>
External classes
External classes roughly follow the BEM system
- the component container should have a class that is the component name, for example
MyContainer
- classes of children should be prefixed with the component name and
__
, for exampleMyContainer__MyChild
- Variations should be prefixed with
--
Example:
<script>
// file name: MyComponent.svelte
export let type = "default"
export let selected = true
</script>
<div
class="MyComponent MyComponent--${type}"
class:MyComponent--selected={selected}
>
<span class="MyComponent__item">
</span>
</div>
External stylesheet example:
#Theming .MyComponent {}
#Theming .MyComponent--selected {}
#Theming .MyComponent--default {}
#Theming .MyComponent__item {}
Combination
You may combine the internal and external style
<script>
// file name: MyComponent.svelte
export let type = "default"
export let selected = true
</script>
<div
class="MyComponent MyComponent--${type} container ${type}"
class:selected
class:MyComponent--selected={selected}
>
<span class="item MyComponent__item">
</span>
</div>