Правильное использование Bootstrap

Не знаю, будет ли этот пост кому-то полезен или нет, но я хочу поделиться своими находками. Многие разработчики используют bootstrap для ускорения процесса верстки, но все ли понимают его реальные достоинства& Когда я только начинал изучать верстку, то попросил друга в компании у их верстальщика узнать, что мне надо изучать. Он прислал мне пачку ссылок, в числе которых был и этот фреймворк. Я посмотрел на него и подумал - "нафига мне это надо?". Сегодня я верстаю на bootstrap и даже если не буду использовать ни одного стиля оттуда.

Как неправильно использовать bootstrap?
 Для обычного простенького сайта нет смысла скачить полную версию css и js. А некоторые так и делают. Такой вариант может жить, если вы делаете админку или еще что-то подобное, где вы не будете менять стили на свои. Был у меня один наставник, который полностью скачивал bootstrap.min.css и подключал его. Потом награмождал еще кучей стилей свой сайт, часто переписывал кастомные стили bootstrap. Менял цвета для кастомных классов различных элементов и так далее... 
Делать так, конечно, вам никто не запрещает, но у такого подхода есть ряд минусов...
  • в обычных проектах не используется и 50% стилей, которые есть в фул версии bootstrap. По-крайней мере так было в ~95% случаев в моем опыте. И следовательно, перегружается сайт - каких-то лишних 40-50 Кб никого не пугают в этих проектах, но тем не менее: почему бы не избавиться от них, если это не сложно? 
  • не используется весь потенциал фреймворка. Зачем писать стили, которые уже написаны. Зачем переписывать цвет фона navbar, если он уже задан?! Так и хочется залезть в bootstrap и все там исправить. Ну, ну! Потом его нельзя будет обновлять. 
  • мы нагружаем браузер лишними рассчетами. Вместо того, чтобы у каждой кнопки было по одному стилю - мы накладываем новые, что добавляет рассчетов.
И это не все, поверьте мне...



Как правильно?
А правильно компилировать LESS ( или SASS - недавно появилась возможность). Во-первых, само использование LESS делает работу более интересной и быстрой. Во-вторых, нет тех минусов, которые были выше называны. В-третьих, мы используем bootstrap на полных мощностях, выжимаем из него все соки!
Теперь подробнее. Less - это динамический язык стилей. Исходный код bootstrap написан на нем. По сути, это не язык, а некий инструмент для работы с CSS. О всех его достоинствах почитайте на lesscss.ru - полезная штука очень.
Если мы пользуемся исходным кодом bootstrap, то получаем следующие возможности:
Мы можем менять основные переменные (цвета, размеры и так далее) для всех элементов фреймворка. По сути это тоже самое, что делает кастомизатор, но мы можем делать это не один раз перед проектом, а непосредственно во время исполнения. Например, на главной странице не было кнопок, но они появились на внутренних. Если использовать кастомизатор, то об этом надо было подумать вначале проекта. Не подумал - заполняй все поля заново (я уже не говорю, что иногда страница случайно обновляется). Если мы работает с динамическим вариантом, то все гораздо проще. Добрался до кнопок - выстраивай концепцию по цветам и размерам для соответсвующих классов. То есть, решать задачи можно по мере их возникновения. Это очень удобно! 
Можно не просто менять переменные, а и создавать свои миксы. Вот разрисовался дизайнер и у вас не три размера инпутов, а 5. Без проблем! Для этого есть замечательный микс .input-size () , в который надо передать height, padding, font-size, line-height, border-radius 
Вот, как бы это выглядело, если бы вы все руками писали.
.btn-my {
  color: #ffffff;
  background-color: #434343;
  border-color: transparent;
  padding: 6px 20px;
  font-size: 16px;
  line-height: 17px;
  border-radius: 15px;
  border: none;
  text-shadow: 1px 1px 1px rgba(53, 47, 38, 0.52);
  background-image: -webkit-linear-gradient(bottom, rgba(53, 47, 38, 0.11), rgba(255, 255, 255, 0.11));
  background-image: -moz-linear-gradient(bottom, rgba(53, 47, 38, 0.11), rgba(255, 255, 255, 0.11));
  background-image: -o-linear-gradient(bottom, rgba(53, 47, 38, 0.11), rgba(255, 255, 255, 0.11));
  background-image: linear-gradient(to top, rgba(53, 47, 38, 0.11), rgba(255, 255, 255, 0.11));
}
.btn-my:hover,
.btn-my:focus,
.btn-my:active,
.btn-my.active,
.open .dropdown-toggle.btn-my {
  color: #ffffff;
  background-color: #2f2f2f;
  border-color: rgba(0, 0, 0, 0);
}
.btn-my:active,
.btn-my.active,
.open .dropdown-toggle.btn-my {
  background-image: none;
}
.btn-my.disabled,
.btn-my[disabled],
fieldset[disabled] .btn-my,
.btn-my.disabled:hover,
.btn-my[disabled]:hover,
fieldset[disabled] .btn-my:hover,
.btn-my.disabled:focus,
.btn-my[disabled]:focus,
fieldset[disabled] .btn-my:focus,
.btn-my.disabled:active,
.btn-my[disabled]:active,
fieldset[disabled] .btn-my:active,
.btn-my.disabled.active,
.btn-my[disabled].active,
fieldset[disabled] .btn-my.active {
  background-color: #434343;
  border-color: transparent;
}

   Вот, как это выглядит, если использовать less
.my-input {
  .input-size(40px, 5px, 10px, 15px, 20px, 4px);
}
Надеюсь, объяснять ничего не надо.
Потом настолько привыкаешь к этим миксам, что без них работа кажется рутинной и нудной. Есть еще вспомогательные less-классы, которые вы можете вкладывать прямо в свои правила. Такие, как .text-hide() - убирает полностью текст, или .placeholder(@color: @input-color-placeholder) - вас не утомило каждый раз вспоминать, как сделать цвет placeholder кроссбраузерным? Больше вы можете узнать об этот вот по этой ссылке
Когда окунаешься в этот мир, то процесс верстки начинает выглядеть совсем по-другому.

Теперь хочу рассказать немного, как удобнее всего компилировать less. Это касается не только bootstrap, но и любого другого css. В head я подключаю только единственный файл ap.less и скрипт less.js, который будет вживую компилировать/иммитировать css. Выглядит как-то так:
    <link rel="stylesheet/less" type="text/css" href="assets/css/ap.less"/>
    <script src="assets/less.js" type="text/javascript"></script>
То есть, вы можете дописывать стили и работать с less, а по завершению проекта просто скомпилировать ap.css (об этом позже). Единственное, на что стоит обратить внимание - чтобы работал less надо запускать сервер. На локалке не работает! Большинство IDE это умеют делать. В WebStorm это два клика, вообще.
Структура ap.less у меня очень простая:
  @import "less/bootstrap.less";
  @import "theme.less";
  @import "flexslider";
  //@import "jquery.bxslider.less"; закомментированная строка
  @import "style.less";
  @import "responsive.less";
Это импортируемые файлы. Сначала идет bootstrap, потом файл с темой, где я меняю те стили bootstrap, которые нельзя поменять переменной. Сюда же я дописываю свои. Например, общие стили для абзацев или убираю margin для заголовков (сделать этого, не меняя bootstrap нельзя!). А менять его, кстати, и не надо. Об этом позже. Потом идут у меня всякие плагины после кастомных стилей. Потом идет файл style.css, где я пишу свои стили для шаблонов, страниц. И последним подключается файл с моими медиа запросами. Кстати, жутко удобная штука - медиа-запросы в less bootstrap. Вместо запоминания разрешений вам просто надо использовать переменные. То есть, все расставлено по приоритетам, чтобы не было путанницы и стили накладывались без лишних !important ;)
Вы можете создать свою иерархию-структуру файлов less - возможно, придумаете что-то более интересное.
Обратите внимание на закоментеную строку - она не войдет в скомпилированный css. Это очень удобно - просто закоментил и отрезался лишний код. На этом строится концепция использования только необходимого кода bootstrap. А сейчас внимание! Посмотрите на структуру файла bootstrap.less. Он состоит из множества модулей, если так можно сказать. По окончанию проекта я комментирую те модули, которые не использовал. Обычно это касается больше всего Components, но часто приходиться удалять и модули Core CSS. Если сайт уж совсем прост и на нем не было форм и таблиц, то зачем хранить под них стили?! Но обязательно оцените - надо ли вам это? Для сайтов с динамическим контентом необходимо оставить все стили для таблиц, типографики и прочего... Смотрите сами - иногда разумнее перегрузить, но сохранить перспективы. 
Я редко пользуюсь иконками glyphicons, поэтому их тоже отрезаю - они очень много жрут Кб. Бывали такие проекты, где после "отрезаних лишнего" bootstrap на выходе у меня весил около 30 Кб. Full версия весит 120 Кб. Согласитесь, разница есть! Так, например, можно использовать только сетку bootstrap, а все остальное - свое. 

Про обновление
Тут все очень плохо у разработчиков. По идеи, bootstrap так разработан, что его можно обновлять. Но чудо-разработчики либо сами подпилят кастомные стили, либо компилируют в кастомизаторе, что само по себе логичнее, но не оставляет перспектив для обновления! Конечно, некоторые меняют bootstrap.css  и довольны - это, безусловно, самый безопасный метод, но и минусы такого подхода очевидны - мы обсудили их выше. Работая с версией less все не так плохо, как может показаться с первого взгляда - ее можно обновлять и не париться совсем. Просто для этого надо подготовить правильную почву - ни в коем случае не менять ничего нигде, кроме variables.less и mixins.less. Да, и смысла менять что-либо в mixins я не вижу. А вот переменные менять надо. При обновлении просто надо заменить все файлы, кроме этих двух, если вы что-то там меняли. Ну, ручатся я не буду за будущие версии - проверять все таки стоит. Вдруг они названия переменных изменят?!))) Тогда придется немного помучатся - 10 минут.
Именно поэтому я при передаче проекта отдаю не только ap.min.css, но и всю папку с less, чтобы тем, кто будет работать после меня можно было добраться до исходников. Правда, мне не приходилось доделывать за кем-то проекты, где бы мне все так красиво оформили. Ну, у каждого свой стиль...


Чем компилировать?
Этото вопрос выходит за рамки данной темы, поэтому расскажу вкратце.
Для компиляциии less можно использовать несколько вариантов:

  • настроить компилятор у себя в IDE
  • использовать прогу типа Crunch или Scout
Или можно классифицировать по другому признаку - "живая компиляция" или другая )) Когда компилируете вживую, то можно подключать уже скопмилированный файл css. При сохранении файла (или изменении) он будет компилироваться в css. Это удобно, но нагружает машину и иногда приходиться ждать. Но если не хочется связываться с локальными сервером, то этот вариант лучший и единственный здравый, пожалуй. Сам я так долго работал, но потом встретил его...
А встретил я Crunch! Прожка кроссплатформенная, сразу замечу. Тут главная идея в том, что компилировать надо вручную. Так, когда я сдаю проект и все подчищу, подмажу, подкрашу, то закидую ap.less в crunch  и компилирую файл  ap.css, который подлючаю в html. Больших объективных преимуществ тут нет, просто не перегружается машина при каждом сохранении. Да, и минусов у такого подхода я не нахожу особо, кроме того, что в инструментах для разработчика в браузере не будет видно номера строки со стилем - это относительный плюс, кстати. А из субъективных плюсов должен заметить простоту использования и установки. 

Итак, пользуйтесь less для работы с bootstrap и ваша работа станет еще быстрее, качественнее, а главное увлекательнее.

P.S. Был бы рад фидбэку по статье. Писал для новичков и поэтому хотел бы знать - что понятно, а что нет, что пригодилось и так далее. Спасибо!

Комментарии

Популярные сообщения из этого блога

Иисус и защита грешников

Религии придумали для управления людьми?

Книга "Люди власти, властолюбие и Церковь" Эдин Ловас