grabbee
@grabbee

Как решить вопрос с CSS фреймворком для веб компонентов?

Например есть 2 проекта. Я написал VUE компонент и в качестве стилей для кнопок использовал Bootstrap 3 - В целом в первом проекте Bootstrap используется, но не часто, но есть.
Далее, я пишу второй проект и хочу использовать в нем этот написанный компонент. Но хочу использовать BULMA - его уже чаще использую по проекту и кнопочки бутстрапа там вообще не нужны, у этого фреймворка есть свои.

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

Да даже если переходить в проекте на новую версию того же бутстрапа, компонент так просто будет не перевести. Он же может использоваться в других проекта со старой версией бутстрапа.

А CSS фреймворки ещё есть. И для каждого в случае необходимости нужно предусмотреть возможность "сохранения" стилей. Грубо говоря, чтобы кнопочки в компоненте и кнопочки во всём проекте были одинаковые.

Как эту проблему решить?
  • Вопрос задан
  • 140 просмотров
Пригласить эксперта
Ответы на вопрос 2
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Получается, я не могу написать универсальный компонент для обоих проектов.

Можете. Незачем тащить библиотеку бутстрапа или бульмы если вы пилите один-два-пять компонентов. Написать стили для кнопки - 30 секунд. Для таких вещей фреймворк не нужен.
Ответ написан
Aetae
@Aetae Куратор тега Vue.js
Тлен
Использовать примеси или наследование.
Просто создаёте базовый компонент без верстки(или с базовой), но с нужным функционалом и верстаете наследников под каждый дизайн отдельно.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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