Как повторно использовать компоненты верстки в разных проектах?

Привет.
Допустим мы работаем в TARS и соблюдаем методологию БЭМ. То есть с каждым новым проектом у нас увеличивается число компонентов, которые можно использовать повторно, в других проектах.
Возникло несколько вопросов:
1. Есть ли инструментарий для удобного управления такими компонентами? То есть зашел в базу компонентов, где они с описанием и скриншотами например, выбрал нужный и перенес в рабочий каталог.
2. Как правильно добавлять готовый компонент в TARS?
3. Есть ли готовые визуальные конструкторы, в которых можно было бы использовать свои компоненты?
Просьба поделиться опытом, кто как работает с готовыми компонентами.
  • Вопрос задан
  • 3598 просмотров
Пригласить эксперта
Ответы на вопрос 4
AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку
Чувак ты прям по адресу)) Я тоже таким болел и болею)) Вот как делаю я. Я создал для себя свои собственные компоненты которые наработал в ходе куча разных проектов. Когда надо их подключаю а когда не надо просто комментирую их. Выглядит это вот так:
То есть в самой папке компонента я храню вьюшку компонента и его стили.

5a3b8a0cb4cfc589655276.png
<!-- breadcrumb -->
<ul class="breadcrumb">
    <li class="breadcrumb__item">
        <a href="#" class="breadcrumb__link">Level 1</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#" class="breadcrumb__link">Level 2</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#" class="breadcrumb__link breadcrumb__link_is-active">Current page</a>
    </li>
</ul>
<!--/. breadcrumb -->

//
// Component: breadcrumb
// --------------------------------------------------

.breadcrumb {
    .nl();
    margin-bottom: 15px;
    margin-top: 40px;
    position: relative;

    &__item {
        display: inline-block;
        position: relative;
        margin-right: 5px;

        &:before {
            font-family: 'FontAwesome';
            font-size: 13px;
            color: #fff;
            content: '\f105';
            display: inline-block;
            vertical-align: middle;
            margin: 0 5px 0 0;
        }

        &:first-child:before {
            display: none
        }
    }

    &__link {
        font-size: 16px;
        color: #fff;
        text-decoration: none;

        &:hover,
        &:focus,
        &_is-active {
            color: @color-main;
        }

        @media(max-width: @screen-ms-max) {
            font-size: 14px;
        }
    }
}


В общем суть понятна да?)

Что делать если начинаешь новый проект и все надо переносить?
Ничего переносить не надо, у меня есть такая папка называется TARS BUILDER.
Это получается Голый Tars только уже с моими компонентами и плагинами. Его походу дела и дополняю всегда.
Например верстаю сижу и тут бац понял что тут можно удобно сделать так-то сяк-то, иду в папку Tars Builder и там же сразу делаю это улучшение. Короче говоря пока верстаю на поле боя я там понимаю как и что мне удобно и переношу эти апгрейды в свой фреймворк/шаблон TARS BUILED.

Так же создаю походу дела свою миксины, переменные и тд.

Таким способом я легко начинаю новый проект на TARS.
Ответ написан
Комментировать
edli007
@edli007
full stack, team lead
React компоненты были созданы для этого, БЭМ - это костыль для табличной верстки которая все еще встречаеться в Яндексе. насчет TARS незнаю.
Ответ написан
movasyl
@movasyl
semper tiro
Чуваки, вы о git слышали? Если нет, то самый раз услышать.
ПС: хотя TARS и осиротел в последнее время, но доки там шикарные, не ленитесь за Вас обо всем позаботились ... https://github.com/tars/tars/blob/master/docs/ru/faq.md пункт #3
Ответ написан
Комментировать
@AnneSmith
самая ленивая
мы используем templates/шаблоны для каждого компонента, часть классов идет с шаблоном, остальные классы, если нужно, можно добавить при генерации кода

фронтенд логика к html шаблонам никак не привязана, в отличие от всех популярных фреймворков, поэтому они легко используются в любом проекте

компоненты унифицированы, поэтому их всего пара десятков, и заменить или поправить html в них очень легко
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы