Выбор между Bootstrap, Material Design и собственной библиотекой компонентов

Среди разработчиков часто возникает вопрос: стоит ли использовать готовые библиотеки компонентов, такие как Bootstrap или Material Design, или лучше создать собственное решение? Давайте разберемся, какие варианты могут подойти для разных ситуаций.

Использование Bootstrap или Material Design

Эти популярные библиотеки компонентов имеют множество преимуществ:

1. Экономия времени: Если у вас ограниченные сроки, использование готовых решений может значительно сократить время разработки.
2. Отсутствие необходимости в брендинге: В случае, если нет требований к уникальному брендингу, стандартные компоненты вполне подойдут.
3. Удовлетворение потребностей: Если дизайн и функциональность готовых компонентов устраивают, то использование библиотек является оптимальным решением.

Создание собственной библиотеки компонентов

Есть несколько причин, по которым можно предпочесть создание собственной библиотеки:

1. Долгосрочное использование: Если разработанные вами компоненты будут использоваться более трех лет, имеет смысл создать уникальное решение, чтобы избежать проблем с обновлением и поддержкой сторонних библиотек.
2. Оригинальный дизайн и функциональность: Когда требуется уникальный визуальный стиль или специфические функции, создание собственной библиотеки позволит реализовать все требования без ограничений, которые могут быть в готовых решениях.

Пример создания компонента

Рассмотрим на примере создания карточки товара для наушников, какие изменения могут понадобиться при использовании Bootstrap, и почему иногда лучше создать собственное решение.

Стандартная карточка с Bootstrap

HTML-код:

<div class="card" style="width: 18rem;">
<img src="headphones.png" class="card-img-top" alt="Beats Solo(3) Wireless" />
<div class="card-body">
<h5 class="card-title">Beats Solo<sup>3</sup> Wireless</h5>
<p class="card-text">$199.95</p>
<a href="/products/headphones/beats-solo-3-wireless/" class="btn btn-primary">Add to cart</a>
</div>
</div>

<div class="c-card" style="width: 18rem;">
<img src="headphones.png" class="c-card_img--top" alt="Beats Solo(3) Wireless" />
<div class="c-card_body">
<h5 class="c-card_title">Beats Solo<sup>3</sup> Wireless</h5>
<p class="c-card_text">$199.95</p>
<a href="/products/headphones/beats-solo-3-wireless/" class="c-btn c-btn--primary">Add to cart</a>
</div>
</div>

html {
font-family: 'Graphik', Helvetica, Arial, sans-serif;
}

.c-card_img--top {
background: #deebf2;
border-radius: 8px;
}

.c-card_body {
padding: 1.25rem 0;
}

.c-card_title {
font-weight: bold;
}

.c-card_text {
margin-bottom: 0;
}

.c-btn--primary {
color: #198ec8;
}

.c-btn--primary:before {
content: "+";
font-size: 1.5em;
margin-right: 0.3em;
}

.c-btn--primary:hover {
color: #0056b3;
}