VueJS: where is the best place to store css, in .vue components or main.css?

Question

css

I can't decide which is better or better.
Styles (for the sake of simplicity of the example) for a button can be stored both in main.css and in c-button components. Where and in what cases should css styles be stored? ps. I proceed from the consideration that the component should be transferred from project to project. main.css Pros: - a single file for styles - common properties can be declared to several tags at once, and quickly corrected - components are easier to transfer from project to project (no unnecessary styles) Cons: - as the project grows, it is more difficult to read and edit - still sometimes you need to add styling to the component, but this makes it even more difficult to edit the styles in the components Pros:
<button class="icon|link|outline">кнопка</button



- good styles encapsulation
- no methodologies needed (BEM...)
- ease of transfer from project to project
Cons:
- redundancy. Simple properties can be repeated in almost every component
- the complexity of editing common properties
Alternatively, you can describe very common tags (body, a, p ...) in main.css, everything else - in components.
How are you doing and why? Are there best practices in design when working with components?

Answer 1

In Vue application we use preprocessor (scss). In addition, we use external packages for vertical rhythm and grid.
I would like to store styles in single-file components, while being able to define globally some of the sass variables, some mixins and functions. You also need to somehow connect the grid and rhythm mixins, it is possible to connect styles from third-party packages.
The option to import a scss file with definitions in each component was immediately discarded, because we are lazy people.
What we do: We
connect the main style file at the entry point (main.js):

import '@/styles/main.scss';
import Vue from 'vue';
//...

In it we connect any-different-global-base:

@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...

We give two files: env-development.scss and env-production.scss

$NODE_ENV: development;
@import "cfg-vars";

$NODE_ENV: production;
@import "cfg-vars";

We need the $NODE_ENV variable. to control styles depending on the environment.
Further in cfg-vars.scss we connect / write all the necessary global configs

$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;

@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";

$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;

//==
//== Color palette
//== ======================================= ==//

$palette-light-blue: #3c8dbc; // Primary
$palette-red       : #dd4b39; // Danger
$palette-green     : #00a65a; // Success
$palette-aqua      : #00c0ef; // Info
$palette-yellow    : #f39c12; // Warning

...

Almost everything is ready. It remains only to automatically connect these configs to the assembly.
Go to vue.config.js and add css section:

const NODE_ENV = process.env.NODE_ENV === 'development'
    ? 'development'
    : 'production';
//...
module.exports = {
    //...
    css: {
        extract: NODE_ENV === 'production',
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
            },
        },
    },
};

Now we can easily write component styles on scss directly in vue files, and leave the possibility to write some styles in separate files.
Enjoy!

Answer 2

css real? omg, 21st century in the yard: sass, less, stylus