VueJS: где лучше хранить css, в компонентах .vue или main.css?

Question

[floydback]

Никак не могу определиться как же удобнее и лучше.

Стили (ради простоты примера) для кнопки
<button class="icon|link|outline">кнопка</button
можно хранить как в main.css так и в компоненты c-button

Где и в каких случаях стоит хранить css стили?

ps. Я исхожу из соображения того, что компонент должен быть переносим их проекта в проект.

main.css
Плюсы:
- единый файл для стилей
- общие свойства можно объявлять сразу нескольким тегам, и быстро исправлять
- компоненты проще переносить из проекта в проект (нет излишних стилей)
Минусы:
- с ростом проекта его труднее читать и редактировать
- все равно иногда нужно добавить стиль в компонент, но это усложняет правку стилей еще больше

css в компонентах
Плюсы:
- хорошая инкапсуляция стилей
- не нужны методологии (БЭМ...)
- простота переноса из проекта в проект
Минусы:
- избыточность. Простые свойства могут повторяться почти в каждом компоненте
- сложность правки общих свойств

Как вариант, можно очень общие теги (body, a, p ...) описывать в main.css, все остальное - в компонентах.

Как делаете Вы и почему? Есть ли лучшие практики в оформлении при работе с компонентами?

Answer 1

[Сергей delphinpro]

В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.

Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:

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

В нем подключаем всякое-разное-глобальное-базовое:

@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";
...

Далаем два файла: env-development.scss и env-production.scss

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

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

Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги

$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

...

Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:

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";`,
            },
        },
    },
};

Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

Enjoy!

Comments

[floydback]

Спасибо! Очень интересно стало для чего вам разные стили в разных средах?

[Сергей delphinpro]

floydback, в основном использую разные миксины для визуализации чего-либо при верстке, чего не должно быть в конечном продукте, или добавляю какие служебные классы через if.

@mixin outline(){ 
  @if $NODE_ENV == 'development' {
    outline: 1px doted red;
  }
}

@if $NODE_ENV == 'development' {
  .some-debug-class {
    // .....
  }
}

Таким образом, даже если я забуду удалить отладочный код из исходников, он точно не попадет в сборку.

[vogordin]

Сергей delphinpro, Сергей, добрый день!
Скажите, существует ли способ задать где-то в одном месте $переменную и использовать её внутри scoped стилей компонентов?

[Сергей delphinpro]

vogordin, я скоуп-стили не использую. Но думаю, что описанный способ вполне должен подойти.

[Alex]

немного поменялся файл конфигурации
теперь вместо data prependData

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // передача настроек в sass-loader
      // @/ это псевдоним к каталогу src/ поэтому предполагается,
      // что у вас в проекте есть файл `src/variables.scss`
      // Примечание: эта опция называется "prependData" в sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // по умолчанию опция `sass` будет применяться к обоим синтаксисам
      // потому что синтаксис `scss` по сути также обрабатывается sass-loader
      // но при настройке опции `prependData` синтаксис `scss` требует точку с запятой
      // в конце оператора, в то время как для `sass` точки с запятой не требуется
      // в этом случае синтаксис `scss` можно настроить отдельно с помощью опции `scss`
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // передача настроек Less.js в less-loader
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` — имя поля глобальных переменных
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

[Vitali Semashkevich]

Спасибо вам, то, что нужно!

Answer 2

[quadabrashell]

Vue-way - хранить стили в .vue, для того оно и придумано. Компонентный подход улучшает восприятие кода.

css-файл можно оставить только если, например, он уже остался от верстальщика и лень раскидывать по компонентам.

Comments

[floydback]

А общие стили, такие как

a {
    text-decoration: underline;
}

вы где храните, в App.vue?

[quadabrashell]

floydback, да

Answer 3

[Владимир Сартаков]

1. Используем препроцессор, любой: sass, less, stylus

2. Общие стили(все что используется или может использоваться часто) в общее.
Один файл точка входа, в него импортируется другие файлы с общими стилями.
Файлы с общими стилями, максимально разбиты, по назначению, разделам... Зависит от проекта. На огромных проэктах, можно дополнительно по подпапкам разбивать. Главное что бы удобно было в этом ориентироваться.

Все общие переменные обязательно в отдельный файл*
Все общие миксины обязательно в отдельный файл*
** Дает возможность быстро изменить препроцессор, если понадобится. У всех разные синтаксис переменных и миксинов

Если миксин статичный, без параметров, лучше заменить его на класс, например .some-mixin-class
И использовать его так:
.some-class {
@extend .some-mixin-class;
...
}
При этом .some-mixin-class нельзя использовать как обычный класс напримую, только экстендить в других классах

@extend .some-mixin-class - Работает одинаково во всех препроцессорах и хорошо читается

Все общие стили только по БЕМ

3. Специфичные стили для компонента пишем в файле компонента.
Или scoped или БЕМ - как удобней
Если таких стилей очень много, то выносим в отдельный файл и импортируем в компаненте
В эти стили по необходимости(если нужно использовать) и импортируем файл с общими переменными или миксинами

Самое сложное, научится определять, что общее а что специфичное, это не объяснить. Приходит с опытом и постепенно

Answer 4

[jslby]

https://github.com/styled-components
Почему не это?

Answer 5

[grinat]

css, realy? omg, 21 век на дворе: sass, less, stylus

Comments

[floydback]

К чему этот сарказм? Используйте то, что вам по вкусу. Лично мне хватает postcss, grid и css vars. Фреймворки и препроцессоры для меня в прошлом. Может это у вас на дворе прошлый век?

[grinat]

floydback, просто плохо представляю как можно что-то делать без функций/микшинов/наследования/циклов и проч, и судя по исходникам большинства крупных проектов, они считают так же как и я.

[Пес Барбос]

floydback, препроцессоры, как минимум, уменьшают количество кода и улучшают читаемость, не говоря уже о куче других полезных вещей. Если вы выбираете pure css вместо препроцессоров, то это как минимум странно. Не говоря уже про фразу "прошлый век"