Вообще я не сторонник грубого вмешательства в код различных фреймворков, вы не подумайте. На грязный хак меня сподвигли серьёзные мотивы:

• Хочу резиновую вёрстку
• Оптимизация CSS

Выражусь яснее
С резиновой вёрсткой довольно просто. По-умолчанию BluePrint CSS имеет фиксированную ширину блоков. Размер максимального блока 950px, что на широкоформатных мониторах смотрится довольно убого. В то же время у BluePrint есть готовый плагин в виде файла liquid.css, готового к применению. Файл представляет собой практически копию файла grid.css с той разницей, что ширина блоков в нём задаётся в процентах, а не в пикселях. Казалось бы, бери да пользуйся, но …

Наверное, надо сказать, что готовые файлы стилей BluePrint CSS оптимизированы, из них выкинуты лишние комментарии, пробелы, пустые строки и т.д. Кроме того файл grid.css включен в файл screen.css, который является сборкой из нескольких файлов. Туда то и надо бы включить файл плагина вместо grid.css. А штатная программа сборки написана на руби, которого я не знаю и не умею.

Можно конечно не делать сборку, а подключать несколько разных файлов стилей, но я вычитал в гугле, что это плохо влияет на скорость загрузки сайта, и вообще моветон. Да да! Инструменты Вебмастера от Гугла настоятельно советуют объединять все CSS в один файл для ускорения загрузки страницы.

Тут я подошёл ко второму вопросу – оптимизировать CSS всеми способами, в т.ч. объединением всех файлов стилей в один файл. Пришло время смешивать мои собственные стили со стилями фреймворка.

Как я это делал

Сначала взял исходные файлы BluePrint CSS и в текстовом редакторе составил из них один файл, при этом вместо файла grid.css я включил liquid.css из плагина Сюда же добавил и свой файл стилей.

Получившийся файл вышел довольно большим и рыхлым. Я прогнал его через CSS оптимизаторы. Больше всего мне понравились Online CSS Optimiser и Clean CSS. Первый мне показался более эффективным по сжатию, второй более информативным. Готовый файл CSS осталось только подключить.

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

Ещё 5 копеек в догонку.

В погоне за оптимизацией я отказался в своих проектах от подключения стиля print.css. Всё равно в сыром виде предварительный просмотр выглядит плохо, приходится дорабатывать. А раз надо дорабатывать, то смысл всей свистопляски теряется.

И ещё мне пришлось для себя подхимичить liquid.css, а именно подкрутить проценты, ибо на моей вёрстке блоки иногда некрасиво разъезжались. Возможно я что-то сделал не так.

Ну и конечно же давно у меня руки чесались, удалить стили для класса .showgrid. Не представляю ситуации, когда я его буду использовать в рабочем проекте.

Нет постов по теме.

Пинги и комменты не доступны.