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

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

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

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

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

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

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

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

Как делаете Вы и почему? Есть ли лучшие практики в оформлении при работе с компонентами?
  • Вопрос задан
  • 1673 просмотра
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
В 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!
Ответ написан
quadabrashell
@quadabrashell
Мобильный и Веб-разработчик
Vue-way - хранить стили в .vue, для того оно и придумано. Компонентный подход улучшает восприятие кода.

css-файл можно оставить только если, например, он уже остался от верстальщика и лень раскидывать по компонентам.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
l3ftoverz
@l3ftoverz Куратор тега CSS
Rings of Saturn - The Husk
main.css - глобальные стили
Стили в компоненте - изолированные и работают только скоупе компонента.

Нет понятия лучше и удобнее.

компоненты проще переносить из проекта в проект (нет излишних стилей)
Такой себе аргумент, при использовании нормальной методологии таких проблем нет.
Ответ написан
1. Используем препроцессор, любой: sass, less, stylus

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

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

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

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

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

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

Самое сложное, научится определять, что общее а что специфичное, это не объяснить. Приходит с опытом и постепенно
Ответ написан
@grinat
css, realy? omg, 21 век на дворе: sass, less, stylus
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы