Styling components

Prerequiste reading

See Styling for general information about SALVO-TS's SCSS setup.

To help locate styles close to the components they apply to, you can place a component stylesheet next to your component like components/FooComponent.scss.

You should use BOM class naming with a .ComponentName__Object--modifier syntax. See the style guide for more examples.

Prefer component styles over global styles

Component styles help keep a single source for truth for how a component is styled. Avoid including styles for components in your global styles, which should be reserved for top-level concerns things like typography or third-party apps.

typescript
// src/components/FooComponent.ts
@Component
class FooComponent extends ThemeComponent {
// ...

typescript
// src/components/FooComponent.ts
@Component
class FooComponent extends ThemeComponent {
// ...

scss
// src/components/FooComponent.scss
.FooComponent {
    display: block;
    background: red;
    &__Form {
        // ...
    }
    &__Input {
        // ...
    }
    &--isError {
        // ...
    }
}

scss
// src/components/FooComponent.scss
.FooComponent {
    display: block;
    background: red;
    &__Form {
        // ...
    }
    &__Input {
        // ...
    }
    &--isError {
        // ...
    }
}

html
// Usage
<foo-component class="FooComponent FooComponent--isError">
    <div class="FooComponent__Form">
        <input class="FooComponent__Input"/>
        ...
    </div>
</foo-component>

html
// Usage
<foo-component class="FooComponent FooComponent--isError">
    <div class="FooComponent__Form">
        <input class="FooComponent__Input"/>
        ...
    </div>
</foo-component>

Remember to set a display mode

As custom elements, components don't have any base vendor styles. They are usually treated as inline-like, similar to a span. For more consistent behavior, remember to define a display mode like display: block or display: inline on your top-level component element.

Using global variables

SALVO-TS allows you to define a set of variables that can be used across your component and global styles.