Свои проекты я в основном разрабатываю один. Оно и очевидно, пока проекта нет - никто не понимает смысла помогать, а когда я с горем пополам его делаю, никто уже особо и не хочет помогать. Самая большая проблема у горе-пронроместа типа меня - это интерфейс. Ладно, я могу порисовать на доске маркером и примерно понять что и где будет расположено, но чтобы потом это хорошо выглядело в конечном продукте - беда. Потому каждый раз я получаю бочку говнеца от дизайнеров, помогать, однако, которые не хотят. Завидую десктоп-разработчикам, у них наверное такой проблемы нет. Накидал кнопочек на форму, наставил им обработчиков, только сиди указатели туда-сюда таскай или утечки памяти замеряй.

В свое время я уже пробовал, так называемые "решения проблемы" в виде CSS-фреймворков. Тысячи их, любого верстальщика ночью разбуди, он назовет всякие "960", "Blueprint", даже если не пробовал ни один. Как любая стильная модная вещь, они широко обсуждаются сообществом и у кого-то даже получалось что-то готовое на них сделать. У меня нет. Ни у кого, кого я знаю, тоже. Но пока не будем.

Twitter Bootstrap

Недавний релиз Twitter Bootstrap 2.0 снова всколыхнул ОйТи-ресурсы, да даже так-то сильнее обычного. Даже мой любимый дизайнер и арт-директор Артурчик, который до CSS-градиентов-то до сих пор боится и до сих пор иногда требует скругленные уголки верстать картинками, начал расспрашивать меня юзал ли я его уже. В любой другой момент я бы даже не задумался, но тут на носу как раз был очередной экспериментальный проект, который я делал полностью сам и, конечно же, не имел дизайна. Так и решил попробовать.

Сразу все кажется очень неплохо. За исключением некоторых моментов, почти что МАГИЯ. Сделал div class="smth" и стал он крутой кнопочкой с градиентами и ховерами. Так и должно быть в любом css-фреймворке, первый тест пройден. С навигацией чуть сложнее, там уже "для совместимости с IE 6-7" сделаны inner-блоки и МАГИЯ немного теряется, но тоже терпимо. 12-колоночная сетка есть, модная "940-пиксельная" верстка есть, responsive design (не смог вспомнить как это по-русски) есть. Буквально за пару строчек кода простая домохозяйка может сверстать свой твиттер. Ну не чудо ли?

Заглянем внутрь. Из картинок в каталоге bootstrap лишь 2 больших png-файла со спрайтами иконок (белыми и черными, соответственно), все остальные многочисленные эффекты делаются только на CSS. Молодцы, учитывая неплохую кроссбраузерность bootstrap, это уже стоит того, чтобы залезть в код и вдумчиво поскроллить пару минут.

Теперь о плохом. Как только вы наиграетесь и сделаете 5 страничек, всех до единой похожих на твиттер, наверняка вам захочется применить его по-настоящему. Вот тут-то и беда. Вот тут-то и начинают кровоточить старые раны от CSS-фреймворков. Я специально не буду приводить примеры, ибо тогда умники начинают приебываться только к ним, не думая своей головой. Bootstrap оказывается очередным модным фреймворком с главным их недостатком - ваш код теперь организован хуй знает как. То есть стиль одного элемента формируется сразу в нескольких файлах, и каждый последующий половину строчек занимается тем, что отменяет стили предыдущего. Я уверен, есть приверженцы такого стиля написания стилей (каламбурчик!), но это явно не я. Ну а все остальные причины типа резкого падения семантичности верстки из-за образования кучи мелких классов у одного элемента, а за классы типа .italic в нашем Светском Обществе принято давать ломом по ебалу, мы оставим для демагогии в блогах. Лично мне уже этого достаточно, чтобы испытывать колоссальную боль от их использования, тем самым весь эффект "ускорения" разработки не просто не чувствуется, а она наоборот замедляется. Если раньше мне нужно было придумать имя класса и пойти в нужный файл стилей его с нуля закодить, то теперь мне нужно еще и посмотреть код остальных классов, чтобы отменить не нужные параметры. А если вы скачали его по кнопке "Download" на сайте, а не через git, то все будет еще хуже.

Потому что код будет выглядеть примерно так. Обратите внимание на номер строки. Вот она прелесть генерированного кода. Исходник вполне читаем

Снова о хорошем. Bootstrap отлично подходит "на запчасти". Теперь качаем его через git и получаем все исходники на... less. Я слышал много приятного об этом языке, но никогда не встречался с ним до этого. В прочем, это нисколько не мешает читать его. Это примерно как программист на C++ может читать код на Java. И вот тут начинается счастье и раздолье. Первым делом стоит посетить bootstrap.less, который чуть более, чем полностью состоит только из импортов. И именно по ним уже можно понять что он представляет из себя внутри. reset.less - отлично. variables.less - хранилище всех переменных. Особое внимание на то, что переопределены стандартные цвета. Я сначала тоже не понимал зачем, но потом присмотрелся. misins.less - это настоящая кладезь запчастей. Тут костыли для prefix-free верстки, анимаций, кроссбраузерных градиентов, и всего-всего. Даже без bootstrap'а можно использовать готовые решения из этого файла. Дальше идут уже более специфичные импорты, разберетесь сами. Разработчики молодцы и разделили фреймворк на кучу небольших файлов, причем можно выкинуть почти каждый (кроме основных) и ничего не сломается. Около часа у меня ушло, чтобы разобраться какие файлы обязательны и какие за что отвечают, и собирать "свой фреймворк с блекджеком". Правда пришлось изучить less.

Hint: если я не рассказал про остальные части bootstrap и про js-либы, входящие в комплект, это не значит, что я о них забыл или НИАСИЛИЛ. Хотя вам похуй.

LESS

Теперь о LESS. Честно говоря я всегда скептично относился к подобным штукам, но чтобы разобраться в bootstrap, пришлось разобраться в less и... мне понравилось. Весь сайт у них состоит из большой главной страницы на которой рассказываются все фичи. Одной страницы вполне хватает. Читая каждый новый абзац мысль только одна - ДА, ВЕДЬ ТАК И ДОЛЖНО БЫТЬ! Блиц-примеры:

- Я всегда удивлялся какого хрена я не могу использовать //-однострочные комментарии и должен городить /* эти сраные звездочки */. Правда, какое есть у этого объяснение?

- Вложенные стили. Я уже несколько лет пишу все css "лесенкой", не предлагаю обсуждать этот стиль и допущенные мной расхождения с ним, конкретно здесь мне насрать на ваше мнение. В LESS это является частью парадигмы.

Скриншот с офсайта, лень было свои делать

- Переменные ладно, об этом давно уже сказано-пересказано. Операторы тоже полезная, но не киллер-фича. Можно сделать #111 + #222 и получить #333, или opacity: @defaultOpacity - 0.3. Просто приятно, что это есть.

- Mixins - супер. Начиная от полного освобождения от костылей, кончая изобретением своих, еще более изощренных. Отличные примеры для чего их нужно использовать можно найти в mixins.less. Грубо говоря можно вставить код одного класса в другой, причем с определенными параметрами, да еще их можно отфильтровать или перегрузить.

Параметризованные примеси

- Импорты. Думаю, очевидно. Теперь я не боюсь плодить кучу css-файлов, компилятор все равно соберет их в 1, а чтобы подключить на страницу, нужно подключить всего-лишь первый главный файл.

- Мне почему-то очень понравилась фишка с амперсандом. Грубо говоря знак & внутри стиля - это ссылка на себя. Теперь нет кучи отдельных классов a, a:hover, a:visited, они превращаются в:

a {
...
&:hover { ... }
&:visited { ... }
&.active { ... }
}

- Генерация сразу как "читаемой" так и минифицированной версии, стоит лишь передать lessc параметр -x.

Обо всем остальном можно прочитать на их сайте, остались не затронутыми функции (типа проверка на число), фильтры (desaturate, etc) и JavaScript в файлах. Less изучается за час, тренируется за вечер и дальше ты даже не замечаешь разницы. Просто CSS становится ВНЕЗАПНО в 2 раза удобнее. Очевидно, что так как less компилируется в чистый css, то проблем в отладке он особых не добавляет. Хотя, конечно, можно намешать нечитаемую солянку, но у меня пока не получалось.

Это - самое сложное, что можно нафигачить стандартным синтаксисом

Как обычно, о самом интересном - о плохом. Все любят гадости. Первая гадость - из ряда вон хуево работающий less.js. Это такая штука, которая позволяет не компилируя подключать less на страницу и на лету делать css. Не важно как быстро оно работает, ведь я думаю среди моих постоянных читателей нету таких долбоебов, кто бы решился использовать его на продакшене, но для долбоебов из поисковиков я на всякий случай упомянул. Получается, что эта штука для разработки? Но она не работает через file://, ибо использует ajax, она никогда не говорит об ошибках сборки. То есть если в less-файле опечатка, то вся страница превращается в говно и ничего не говорит в консоль. Может я что-то не так делаю или подключаю? Ведь это очевидно?

Второе, что могло бы быть лучше - @import в less это импорты в стиле PHP. А мне бы все же хотелось импортов в стиле Нормальных Языков Программирования. Простейший пример - less не отслеживает, что файл уже был импортирован:

main импортирует два файла, оба из которых импортируют одно и то же, потому что написаны в другом стиле. В итоге - дублирование.

Почему это плохо? Когда я хочу использовать часть какого-то фреймворка, я хочу знать какие именно файлы требуются для работы этого. А узнать я это не могу никак, кроме "подключить - посмотреть ошибки - подключить еще". Например файлу buttons.less в bootstrap нужны файлы mixins.less, потому что там хранятся функции градиентов, variables.less, потому что там цвет его текста, и.т.д. Приходится grep'ать.

Третье - отсутствие парсера на Python (и многих других популярных языках). Только на маргинальном node.js, что наверняка связано с возможностью исполнения javascript, которая нафиг не нужна (если бы у меня была куча свободного времени и желания потренироваться с трансляторами, может быть и занялся, ибо все остальные наверняка забыли 3 курс). Так можно было бы избежать сборки перед деплойментом, а собирать и кешировать прямо на сервере. А еще и управлять версиями из админки. Ух, красота.

Выводы

Советую ли я bootstrap? Как фреймворк - как всегда только любителям подобного (коим я не являюсь), как склад полезных сниппетов - пожалуй. Естественно, я имею в виду github-версию. Советую ли я less? Если вы полный ноль в CSS и думаете, что это вам как-то поможет - лучше держитесь от него подальше и читайте книжки. Хотя вы все равно не послушаете меня. Однако если у вас большой опыт верстки, не один десяток сверстанных макетов за спиной и вы можете сверстать что угодно 5 разными способами - однозначно попробуйте. Хуже точно не будет.

Ну и как всегда эти впечатления лишь первичные, сложившиеся за 2 недели использования, быть может, как в случае с MongoDB через год выяснится, что я пропустил какую-то важную деталь и менять все уже поздно. Так что принимается критика и отзывы.