Одна из наиболее распространенных претензий к CSS-фреймворкам, таким как Blueprint , YUI Grids и 960.gs, заключается в том, что они требуют, чтобы дизайнеры запачкали пальцы, добавив имена классов представления в свои HTML-документы, например:
<div class="span-9 last"> <div class="grid_6 alpha"> Имена классов, такие как "span-9" действительно беспокоят дизайнеров, которые заботятся о качестве своего HTML-кода, потому что они описывают внешний вид элемента; это действительно следует оставить для свойств CSS, определенных в таблицах стилей вашего сайта. Проблема с именами презентационных классов особенно хорошо объясняется в советах по тестированию W3C: используйте class с учетом семантики :
Хорошие имена не меняются. Подумайте о том, почему вы хотите, чтобы что-то выглядело определенным образом, а не о том, как оно должно выглядеть. Внешность всегда может измениться, но причины для того, чтобы что-то посмотреть, остаются прежними.
Возможно, вы прагматичный тип, который не испытывает проблем с подобными вещами или решает, что это неизбежное зло, учитывая ограничения языка CSS. Тем не менее, существует множество интерфейсных ниндзя, которые отказываются использовать CSS-фреймворки именно по этой причине.
Оказывается, однако, что последние разработки CSS-фреймворков предоставляют умные решения проблемы имен презентационных классов.
Blueprint CSS , дедушка фреймворков CSS, теперь включает в свой загрузочный пакет умный скрипт Ruby под названием compress.rb. В Blueprint’s compress.rb: пошаговое руководство автор Blueprint Джошуа Клэйтон объясняет, как использовать сценарий для создания пользовательской версии таблиц стилей Blueprint с использованием собственных имен семантических классов.
Процесс сводится к написанию простого файла конфигурации, который сообщает сценарию, как сопоставить имена презентационных классов Blueprint с вашими семантически значимыми именами классов. Файл будет выглядеть так:
demo: path: /Users/kyank/Documents/myproject semantic_classes: ".header, .footer": ".span-24, div.span-24" ".content": ".span-18, div.span-18" ".sidebar": ".span-6, div.span-6, .last, div.last"
Раздел semantic_classes обеспечивает сопоставление. В этом примере классы header и footer будут иметь ширину 24 единицы сетки, а класс content — 18 единиц сетки. Класс sidebar будет иметь ширину 6 единиц сетки и последний блок в его ряду.
Записав этот файл конфигурации, вы просто запустите сценарий compress.rb, и по указанному пути будет сгенерирована настроенная версия файлов таблицы стилей Blueprint (screen.css, print.css и ie.css). Таблица стилей будет содержать такие правила, которые применяют размеры сетки к именам ваших пользовательских классов:
/* semantic class names */ .content {float:left;margin-right:10px; width:710px;}
… и так же, вы получаете все возможности макета Blueprint CSS без всякой затеи HTML!
Если ручная компиляция таблиц стилей с помощью сценария Ruby звучит немного болезненно (что может быть — особенно если вы разрабатываете на компьютере с Windows без установленного Ruby), серверная среда CSS может быть лучшим вариантом для вас.
Фреймворки CSS появляются для всех основных языков программирования на стороне сервера. Два ярких примера включают Compass (для Ruby) и Scaffold (для PHP). Эти платформы позволяют вам писать таблицы стилей с дополнительными языковыми функциями и автоматически компилировать их в стандартный код CSS при отправке их в браузер.
Например, используя Scaffold, вы можете написать свою таблицу стилей следующим образом:
@grid { column-width:30; column-count:24; right-gutter-width:20; baseline:20; unit:px; } .header, .footer { +columns(24); } .content { +columns(18); } .sidebar { +columns(6); +last; }
@grid at-rule устанавливает параметры для плагина макета Scaffold, а затем такие строки, как +columns(24); (называемые миксинами ) компилируются в стандартные свойства CSS, когда браузер запрашивает таблицу стилей.
Это всего лишь пара способов, с помощью которых последние фреймворки CSS отвечают тем критикам, которые жалуются на необходимость жертвовать качеством HTML-кода, чтобы использовать их. Теперь вы можете воспользоваться всеми преимуществами хорошо протестированной структуры макета и применить их к своему HTML-коду на ваших условиях.
(фото: Нбауэр )