Настройка CSS шаблона Bootstrap

Я только начинаю работать с Bootstrap от Twitter и мне интересно, какова "лучшая практика" для кастомизации. Я хочу разработать систему, которая будет использовать все возможности шаблона css (Bootstrap или другого), быть полностью (и легко) модифицируемой, быть устойчивой (то есть - когда выйдет следующая версия Bootstrap от Twitter, мне не придется начинать все сначала.

Например, я хочу добавить фоновые изображения в верхнюю навигацию. Похоже, есть 3 способа сделать это:

  1. Изменить классы .topbar в bootstrap.css. Мне это не очень нравится, потому что у меня будет много элементов .topbar, и я не обязательно хочу изменять их все одинаково.
  2. Создайте новые классы с моими фоновыми изображениями и примените оба стиля (новый и bootstrap к моему элементу). Это может создать конфликты стилей, которых можно избежать, если разделить класс .topbar на отдельные классы, а затем использовать только те части, которые не затронуты моим пользовательским классом. Опять же, это требует больше работы, чем я думаю, и хотя это гибко, это не позволит мне легко обновить bootstrap.css, когда Twitter выпустит следующую часть.
  3. Использовать переменные в .LESS для достижения кастомизации. На первый взгляд, это хороший подход, но, не используя .LESS, у меня есть сомнения по поводу компиляции css на клиенте и устойчивости кода.

Хотя я использую Bootstrap, этот вопрос может быть обобщен на любой css шаблон.

Заранее спасибо за ответ.

105
задан Devin 28 September 2014 в 01:20
поделиться