Стоит ли редактировать variables.less в bootstrap, или же лучше переопределить css свойства в стилях проекта?

Question

[Alexander]

Делаю лендинг.

Подключил bootstrap как less в свой проект, чтобы была возможность использовать mixins.
Сейчас задумался о том, что может быть есть смысл не переопределять разные цвета в своем проекте, а указать их прямо в файле variables.less бутстрапа.

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

Как поступаете в таких случаях вы? Переопределяете стили в файлах непосредственно вашего проекта, или же используете возможность перенастроить бутстрап через variables.less?

Comments

[Юрий Балака]

Я делаю проще — использую файл с названием вроде theme.less. В нем первой строкой импортирован bootstrap.less, а далее — мои уточнения по конкретной теме для сайта, включая файл с переопределенными константами бутстрапа.

[Alexander]

Юрий Балака переопределять переменные в отдельном файле, а не в файле бутстрапа - очень хорошая мысль, спасибо!

Answer 1

[Андрей Хохлов]

Использовать переменные конечно
Зачем городить переопределения стилей

Comments

[Олег]

Как быть с обновлениями бутстрапа в таком случае?

[Андрей Хохлов]

Олег: https://github.com/twbs/bootstrap/commits/master/l... Раз в пару месяцев в поддерживаемом проекте, если очень нужно перейти на новую версию bootstrap, можно и посмотреть что изменилось, да ручками поправить)

[Alexander]

Олег либо как заметил Юрий Балака можно сделать отдельный файл, с переопределением переменных bootstrap, чтобы каждый раз не лазить внутрь и не вспоминать, что было изменено.

Answer 2

[Олег]

У бутстрапа из коробки есть есть файл theme.less - это и есть пример того как кастомизировать бутстрап. Кастомизировать только через variables.less все не получится.

В итоге у нас получится два файла стилей

1. bootstrap.css
   
2. theme.css
   

далее сливаем их в один style.css и минифицируем через какой нибудь refresh-sf.com (сливает одинаковые селекторы в один)

Примерная структура
-- web
---- bower
------ bootstrap
---- less // тема
------ variables.less
------ theme.less
---- css
------ theme.css
------ style.css
------ style.min.css