Как правильно верстать bootstrap + SASS?

Question

[Arman]

Как-то особо версткой не занимался, а тут что-то увлекся, появилось несколько вопросов:
1. Я так понимаю можно подключить twbs/bootstrap-sass (для b3), назначать некоторые дефолтные вещи бутстрапа, использовать его миксины, наследоваться и т.д. минус, что будет собран новый большой css-файл, который содержит все? Сейчас подключаем bootstrap.min.css по их CDN и думаем что есть большой шанс, что этот файл(ы) уже есть у пользователя, а тут нужно будет все по новой ему качать? Или это экономия на спичках? Попытки подключить отдельно какие-то миксины не получилась, т.к. им все равно нужны переменные с цветами и т.д.
Когда в целом нужно подключать фрейм таким образом? Может по старинки все переназчать и не париться?

2. В макете что верстаю есть свои кнопки со своими стилями. Теперь мне нужно: 1. переназначить бутстрапские кнопки (primary, success, default); 2. расширять их новым классом, будет что-то вроде class="btn btn-default btn-site" class="btn btn-primary btn-site"; 3. собирать отдельно и не трогать кнопки бутстрапа.
Проблема что после могут попросить поставить кнопку с бустрапа, а их уже переназначили и нужно отменять что переназначили? Тоже самое с пагинацией, хлебными крошками и т.д.
т.е. когда что нужно юзать (Переназначать стили, расширять стили, использовать свои стили)?

3. Когда нужно использовать классы-хелперы от бутстрапа? Например, я хочу сделать в футоре меню, делаю через <ul class="list-unstyled list-inline">...</ul> , но если после захочу поменять вид этого меню на вертикальный или еще что, то придется менять верстку, выходит такие элементы лучше стилями самому назначать? Т.е. верстка будет:

<footer><nav><ul class="footer-menu">...</ul></nav></footer>

, а дальше стилями самому?

В целом будут рад каким ссылкам-статьям по теме

Answer 1

[Сергей delphinpro]

CDN vs свой билд — экономия на спичках.
Тем более если вам не нужен весь пакет.

Начну с самого плохого, неправильного и убогого варианта использования:
Это когда люди подключают бутстрап.мин.цсс, а потом в своем файлике начинают переопределять стили. Получается полный неподдерживаемый пиздец (я как раз сейчас натягиваю на сайт купленный (!) такой шаблон, нервы на пределе).
Люди, которые так делают приводят гнилой аргумент: а вдруг мы захотим обновить бутстрап? Серьезно, блять? Как часто вы это делали? ставлю сто баксов, что ни разу.

Как делать по феншую.

Для начала, естественно, использовать препроцессорные исходники (не будем выбирать конкретный порт, есть и lеss, и sсss, и stylus, кому что нравится).

Далее миксины. Не нужно подключать отдельные. Подключите valiables.scss и mixins.scss. Миксины не попадают сами по себе в билд, так пусть они все будут доступны.

Компоненты. Отключите ненужные, закомментировав импорты соответствующих файлов.

Кнопки. Если бутстраповские не нужны, отключите их. Напишите свои, используя миксины и даже копипасту части кода из бутстрапа. Это нормально.
Отличный вариант, если вы напишете свой миксин для кнопки (который и бутстраповские миксины может использовать). Ибо в бутстрапе, к сожалению, нет миксина make-button().

Если вам нужно переделать компонент или стиль (часто приходится модифицировать навбар, таблицы, навигацию, табы), не стесняйтесь исправить исходник. Но лучше исходнить отключить, скопипастить и подключить свой вариант (возможно даже поменяв классы, но это не всегда прокатит, ибо связанность ужасная). Править нужно, понимая что вы делаете. Потому что бутстрап внутри устроен через жопу. Взять хотя бы класс .nav — лютый пиздец, дикая связанность.

Пагинация, крошки. Никогда вас не попросят поставить исходные стили. Если по макету эти элементы имеют определенный стиль, этот стиль будет сохраняться. Смело меняйте. Или делайте дубликат.

Хелперы использовать нужно как можно меньше. Они нужны для быстрых набросков или правок "здесь и сейчас". Лучше опишите новый класс.
Опять же если вам нужен класс list-inline в единственном месте, то почему бы его не прописать?

Ссылки и статьи типа "как верстать под бутстрап" — это исключительно отстойный материал, написанный чаще всего такими же новичками, как и те, кто ищет подобную тему. Хотя базовую инфу вы конечно получите.

Comments

[Arman]

Благодарю за подробный ответ, вроде в голове картина начала складываться.

Еще хотел уточнить по файлам *.css, т.к. все собирается через сборщик, то думал собрать отдельно vendor.css, где лежат склеенные зависимости без изменений (календари, фотогалереи и т.д., все что не правили) и site(?).css куда собираю все что правлю. Цель: т.к. подключаем что-то новое редко, а по мелочи стили правятся часто, то думал разделить в отдельные файлы. Или опять же экономия на спичках? Может такие вещи подключать по необходимости? вопрос именно в "vendor.css", такое практикуют? успешно?

[Сергей delphinpro]

Arik, направление мысли верное. Вендоров имеет смысл писать в отдельный файл.

[Arman]

Сергей delphinpro, еще раз спасибо! =)

[Сергей delphinpro]

Стоит отметить, что в данном случае стили бустрапа какбы вендор, но и не совсем, их лучше оставить в site, в то же время bootstrap.js вы не трогаете, его можно и с вендорами слить.