В каких случаях не стоит использовать Vuetify?

Question

[Andrei Popov]

Есть очень много ответов о том в каких случаях не стоит использовать Bootstrap.
Например, если требуется гибкая настройка дизайна, то этого можно добиться только костыльными способами.

В Vuetify подход реализации компонентов работает по другому, но меняет ли это ситуацию?

Answer 1

[profesor08]

Так-же как и с бутстрапом. Vuetify не надо использовать, если дизайн не сделан под него. Если дизайн сделан под него с учетом особенностей, или надо быстро что-то набросать не задумываясь над дизайном, то есть шанс сэкономить время, но только в том случае, если отлично разобрался в этой штуке. В противном случае вместо работы будешь втыкать, что не так и почему не получается.

P.S. Если уж влазить в него, то заранее провести для себя мысленную черту, что компоненты будут выглядеть так, как задумано авторами, и кастомизироваться будет только их цвет. В противном случае постигнет большое разочарование, так как интерфейсы компонентов разнятся, многие вещи тупо захаркожены, и на изменение какой-то фигни, будет уходить больше времени чем на написание какого-то компонента.

Comments

[Andrei Popov]

Спасибо!

[Александр Казаков]

profesor08 ответ ваш хороший, спасибо. Но есть одно дополнение, в бустрапе используется модульный подход, это означает, что я могу подключать только выбранные компоненты. Например я чаще всего беру связку: сетка + модальные окна, при таком раскладе левого кода практически нет, нет и ненужных стилей(UI). Поэтому там нечего переделывать и перезаписывать, своими например стилями.
Можно ли также делать в Vuetify я пока не разобрался, если нельзя, то сравнение с бутстрапом некорректно.

Пока же я немного попробовал Vuetify и в итоговый сжатый bundle.css он мне записал 270кб кода, что очень много. То есть я даже ещё свои стили не писал.

[profesor08]

Александр Казаков, импортировал компонент и используешь, зависимости сами подтянутся, как и стили для него. Стилей неиспользуемых компонентов не будет в бандле.
Модульность в бутстрапе довольно условная, вместе с нужными вещами подтягивается простыня ненужных. Чтоб все заработало надо подключать в определенном порядке.

[Александр Казаков]

profesor08

Модульность в бутстрапе довольно условная, вместе с нужными вещами подтягивается простыня ненужных.

Это неправда, смотри мой ответ ниже. Никакая там не условная модульность, никакая там простыня не подтягивается. Бутстрап очень хорош, он весь не нужен, но то, что нужно от него, делает своё дело отлично. Зря наговаривают на него, уверен, что это из-за незнания вопроса.
Да и не сложно догадаться, что я прав, например уже в 3 бутстрапе была модульность, и уж неужели кто-то считает, что в 4 версии её нет, что его дураки что ли делали, что ничего не понимают в вёрстке сайтов?

Приведи пример где ты подтягиваешь только нужные части, а тебе в довесок много лишнего идёт. Какую ты сборку для проекта используешь, приведи пример.
Я свой пример привёл здесь в ответе, я много работал с ним, ничего сильно лишнего там не подтягивается, стилизовать элементарно, вёрстка летает, так как кода не много от него берётся и лишнего практически нет.

[profesor08]

Александр Казаков, я не пользуюсь бутстрапом из-за ненадобности, он не нужен. Но даже если просто захочется подключить сетку, вместе с ней подключится простыня ненужных классов. Мне вот надо только .container, .row, .col-*, ну и миксины для медия, но в довесок я получаю полотно 2500 строк, где 90% мне не нужно. Мне не нужны классы для управления флекс колонками, их центровки и порядка. Мне не нужны классы для управления отступами. Мне не нужны классы для управления отображением элемента. Все это должно прописываться в стилях, а не в тегах. Но все это есть, все это подхватывает intellisense, и подставляет мне в селекторе, при этом испытывает ненужную нагрузку.

[Александр Казаков]

Ранее:

Так-же как и с бутстрапом...

Модульность в бутстрапе довольно условная...

А потом выясняется:

я не пользуюсь бутстрапом из-за ненадобности

Но при этом ты всё продолжаешь, уж не знаю, опровергать тебя или нет. Если я имею малый опыт в Vuetify, то так про это и пишу, ты же как сам признаешься, что не пользуешься бутстрапом, но при этом рассуждаешь о нём. Тебе бы остановиться и не вводить других в заблуждение, но ты видимо не можешь.
Всё болтаешь и выдумываешь, про какие-то там 2500 строк кода, доказательств в виде кода не приводишь. Видимо привык ты только болтать, не приводя доказательств, и привык, что тебе на слово верят, тем и пользуешься постоянно.

Вот, я специально для выдумщика проверил, импортнул только сетку у бутстрапа:
codepen
^^ Как видите, всего 959 строк, против выдуманных 2500 у болтуна. При этом там много префиксов, т.е. мой вариант, это:

<!-- browserslist For:
    "> 1%",
    "last 2 versions",
    "not IE 10",
    "not IE_Mob 10"
-->

Теперь итог:

1. Как видим, никаких левых стилей, как и классов, в сетке у бутстрапа нет.
   
2. В несжатой версии данный код весит 17,4 кб. В сжатой версии: 11,2 кб. В обоих случаях весит мизер.
   
3. Болтунов не слушайте, просите у них доказательств их словам, в виде примера кода.
   

[profesor08]

Александр Казаков, сори раз задел адепта не очень удобного фреймворка. Но я множество раз его использовал, как 3ю версию, так и 4ю еще с бета версий. Излазил его вдоль и поперек, правил сурсы под свои нужды. И уж точно знаю о чем говорю.

@import "bootstrap/scss/bootstrap-grid.scss"; // ой 2580 строк

2580 строк, из которых 1357 это отступы, 382 это флекс свойства выравнивания, 126 отвечают за отображение, 131 свойства расположения, и только лишь 565 полезных, из которых в media есть ненужные свойства, но лень подсчитывать, и чутка строк комментариев.

Продолжай кланяться бутстрапу, он классный, радуй этим окружающих.

[Александр Казаков]

"bootstrap/scss/bootstrap-grid.scss"; // ой 2580 строк

Покажи в документации бустрапа, где там такое подключение рекомендуют?
Тебе дана была ссылка на документацию, где написано прямо:
@import "../node_modules/bootstrap/scss/grid";
Ты же не то подключаешь, всё ещё видимо не доходит до тебя. Ты просто не умеешь собирать бутстрап, видимо не умеешь пользоваться системами сборки, ты из тех, что может подключить только нечто готовое, а затем причитать, что дескать как плохо всё работает.

Излазил его вдоль и поперек, правил сурсы под свои нужды.

Бедолага, всё излазил, но данная страница в документации тебя ни на что не натолкнула: ссылка

Дальше не буду говорить с тобой. Тебя в хлам разнесли: ссылку на документацию дали, пример кода как подключать привели, ссылку на пример сборки дали, уже написали точно сколько строк кода тогда импортируется, но ты продолжаешь препираться и позориться. Видимо будучи анонимом, тебе не нужно задумываться о своей репутации, ну и судя по всему, ты забыл, что такое стыд. Рекомендую тебе остановиться.

Answer 2

[Александр Казаков]

Есть очень много ответов о том в каких случаях не стоит использовать Bootstrap.
Например, если требуется гибкая настройка дизайна, то этого можно добиться только костыльными способами.

Почему-то я не вижу дату создания вопроса, очень странно. Вам нужно было указывать про какую версию бутстрап идёт речь. Допустим, что про актуальную 4 версию или про прошлую 3, это также подходит.

Вы где-то нахватались неправильной информации. Я сделал много вёрстки сайтов на 3 бутстрапе, и ещё больше на 4. Вот, слова, что якобы в бутстрапе нужны какие-то костыли, чтобы стилизовать его, это неправда. В бутстрап-4 гибкий подход, модульная система. Можно подключать только только нужные части и при этом практически никакого левого кода не будет тянуться в проект и вообще никакого левого UI(!).
Например я чаще всего в вёрстке сайтов беру сетку + модальные окна у бутстрапа, и это всё, ну иногда ещё и табы. Кода бутстрапа при таком подходе в проект подтягивается мизер, вёрстка сайта летает!

Как же сделать так, чтобы не быть чайником и использовать бутстрап грамотно? Ну во-первых стоит документацию бутстрапа читать, вот например: ссылка - она недвусмысленно намекает, что можно брать только то, что нужно.
Во-вторых нужна система сборки проекта, например Gulp. Один раз настроил и всё подтягивается автоматически, просто выбираешь нужные модули.
Вот например как у меня организовано подключение CSS бутстрапа:


Вот подключаются скрипты:


Вот пример как настраивать сетку бутстрапа под нужные требования:

^^ как видишь выше, вписывай нужные значения и вперёд, никаких костылей, всё там продумано грамотно.

При этом выше на скриншотах я показываю классическую сборку для обычной вёрстки на нативном JS и jQuery. Весь JS там собирает Webpack, а проект целиком собирает Gulp.
Вот кстати моя сборка из примеров выше: ссылка - но это вам мало что даст, так как такие вещи собираются под себя. Моя например сборка даже AMP-страницы может автоматом собирать!

Итого: забудьте дичь, что для бутстрапа какие-то там костыли нужны, и не передавайте эту ложь никому. Оставьте это чайникам, что подключают бутстрап целиком, а потом рассуждают, дескать как его настроить. Учитесь использовать системы сборки, типа Gulp, и у вас проблем не будет с бутстрапом.

Ну а насчёт Vuetify, к ответу profesor08 мне пока нечего добавить.