Как решить вопрос с CSS фреймворком для веб компонентов?
Например есть 2 проекта. Я написал VUE компонент и в качестве стилей для кнопок использовал Bootstrap 3 - В целом в первом проекте Bootstrap используется, но не часто, но есть.
Далее, я пишу второй проект и хочу использовать в нем этот написанный компонент. Но хочу использовать BULMA - его уже чаще использую по проекту и кнопочки бутстрапа там вообще не нужны, у этого фреймворка есть свои.
Получается, я не могу написать универсальный компонент для обоих проектов. Там либо стиль кнопок будет свой собственный, либо нужно клонировать компонент и заменять там только атрибуты стилей конкретного фреймворка. Получается дублирование кода. Причем изменяется крохотная часть атрибутов стилей. Остальное идентично.
Да даже если переходить в проекте на новую версию того же бутстрапа, компонент так просто будет не перевести. Он же может использоваться в других проекта со старой версией бутстрапа.
А CSS фреймворки ещё есть. И для каждого в случае необходимости нужно предусмотреть возможность "сохранения" стилей. Грубо говоря, чтобы кнопочки в компоненте и кнопочки во всём проекте были одинаковые.
Может в git создавать отдельную ветку под каждый фреймворк? То есть мастер будет под какой-то один. Остальные будут болтаться для совместимости, например. А в NPM публиковать... Я запутался
Получается, я не могу написать универсальный компонент для обоих проектов.
Можете. Незачем тащить библиотеку бутстрапа или бульмы если вы пилите один-два-пять компонентов. Написать стили для кнопки - 30 секунд. Для таких вещей фреймворк не нужен.
Например же я привожу два проекта. В них сами стили разные. Цвет и форма кнопок могут отличаться. В одном черные и округлые, в другом розовые и острые края, в третьем синие и 3 пикселя скругление. Даже без фреймворка стили разные будут.
grabbee, так на самом деле не понятно, у вас разные кнопки, зачем объединять их в один компонент? Тем более, если эти кнопки в разных проектах. А если на одну из кнопок кастомная анимация нужна будет? Или stopPropagation на событие клика вызывать? А если новые проекты на другом фреймворке будут? Это какое-то ненужное усложнение, чтобы не дублировать, условно, 3 строчки кода
Всю функциональность включает сам компонент. Оно всё одно для всех проектов. Отличаются только CSS фв - стиль отображения. Стиль кнопок принадлежит проекту.
Использовать примеси или наследование.
Просто создаёте базовый компонент без верстки(или с базовой), но с нужным функционалом и верстаете наследников под каждый дизайн отдельно.
Средний
