Stylesheet architecture

Any practical modern web application will be built with a mix of stylesheet code, both global stylesheet code and component-specific style code.

Bellevue offers a full-featured, preconfigured architecture for architecturing (S)CSS code in a scalable way. This architecture is easy to streamline if you feel your project needs this, but it's probably better to leave it in place as it's still fairly easy to navigate.

Global styles

└── src/
    └── styles/                       // Global base styling and style utilities
        ├── base/
        ├── definitions/
            ├── constants.scss
            ├── functions.scss
        ├── keyframes/
        ├── mixins/
        ├── normalize/
        ├── toolchain/
        ├── transitions/
        ├── utilities-base/
        ├── utilities-composed/
        ├── vendor/
        ├── vendor-overrides/
        ├── webfonts/
        ├── global.scss               // All global base styling
        ├── shared.scss               // All SCSS constants and mixins
        └── utilities.scss            // All global CSS utilities

global.scss and utilities.scss are imported by App.vue.

Known issue: it is difficult to control the exact order that stylesheets are injected into index.html in Webpack. utilities.scss are currently injected before component styles, but they should be injected after component styles to be more effective and reduce the need for overqualified selectors.

Component styles

Components are written as .vue files, which include a <style> tag for writing component styles.

Vue's <style scoped> is not used, as this will break the cascade. If you've traditionally had troubles with the cascade though, and are not interested in overwriting child component styles per context, you might want to use scoped in your components.

Sharing SCSS tools

In both global and component styles, you can import any SCSS mixins and constants you need. The easiest way to do this is to simply import the shared styles like this:

// `@shared-styles` is an aliased defined in src/config/config.aliases.js
@import '~@shared-styles';

Notice that this does not result in any new CSS output. shared.scss only imports mixins and constants.

SCSS constants

Commonly accessed variables in SCSS are set in constants.scss. These are also automatically exposed to JS when @config is imported.

results matching ""

    No results matching ""