CSS фреймворки
четверг, 31 декабря 2009 г. в 14:45:52
CSS frameworks это набор подходов по упорядочиванию кода описывающего внешний вид страницы (representation) с учётом смысла содержания (семантики) для повышения эффективности.Кроме ускорения работы побочные эффекты — стандартизация и как результат плюсы в коммандной работе, более простой, понятный и единый код. Хотя тема затрагивает больше дизайнеров и верстальщиков которые занимаются созданием css+html страниц из psd -макетов, тут и backend-программисты найдут для себя что-нибудь интересное.
Выключатели
Reset- код по обнулению стандартных значений браузера нужен для кроссбраузерного внешнего вида - раз браузеры не хотят договориться, то прикажем им сразу обнулить отступы, и некоторые значения по умолчанию. Самые популярные:
-
Meyer's css reset - обнуляет фокус, осторожно
-
YUI css reset - обнуляет все тексты, даже h1 и strong
Сетки
Grids нужны для облегчения восприятия. Человеку нравится видеть порядок в парках и дорогах, зданиях и страничках в интернете. Вертикальные или горизонтальные линии с равномерными отступами - основа сетки. Обычно вёрстка либо фиксированная (px), либо динамическая-резиновая (%, em). Смешанные достаточно сложно делать.
Из вертикальных сеток существуют:
-
Blueprint - Полотно 950px с вертикальной сеткой. Последние элементы имеют класс last
-
960 grid system - Первые и последние элементы alpha и omega классы соответсвенно.
-
YUI grids - наглядный пример как не стоит называть классы
В целом все эти сетки говно, потому что несемантичны и нужны ленивым верстальщикам что-бы писать меньше кода - вместо style="width:960px;" - class="block-24"
Чем дальше в лес
Генераторы css-кода пишутся на серверных языках ради нововведений от которых отказываются продвигающие стандарт, а именно - переменных, логических операций, вложённости и питоновского стиля в отступах. Дополнительно библиотеки занимаются кешированием и компрессией. Мне известны следующие:
Но зачем останавливаться только на этом? Можно ведь и вместо html писать иерархии в питоновском стиле -haml. Это уже не xml конечно, но фантазия уже начинает бурлить.. тут не возникнет проблем с потерянными и не закрытыми тэгами. Но вернёмся к внешнему слою.
Самоорганизация
Как вы организовываете стили в своей папке? В идеале я вижу примерно такую картинку
-
Отдельные файлы под необычные экраны - print, projector, pda/iphone
-
Отдельные файлы-костыли под не строгие w3c браузеры и оси. Грабли для IE6, Mac, pngfixы, закруглённые уголки и тп.
-
Один сгенерированный screen.css для открытой страницы только с тем что необходимо (типа css autoload)
-
Reset
-
Layout - основная структура страницы. Ключевые слова классов - menu, content, article, search, breadcrumbs, comments, feedback, navigation, contact, paginator, gallery, news, login. По возможности по-минимому использовать нефункциональные "sidebar, header, footer, left, right" и служебные "wrapper, container, inner, outer"
-
Иконки и флаги, наверняка спрайт
-
Кнопки и табы, тоже спрайт
-
Skin/Theme - в случае каких-то динамических стилей (в зависимости от сезона, группы пользователя, идентификации продукта) можно разным цветом раскрашивать элементы и имеет смысл выделить цвет в отдельный файл
-
Content - основная составляющая статьи. Включает заголовки, списки, таблицы перечисления, формы ввода, обводы картинок, цитат и тп.
-
-
Левые библиотеки которые приходится порой подправлять, типа jquery ui, thickbox, fancybox, lightbox...
Некоторые предпочитают отдельно выделять ещё и типографику. Я не такой профессионал в вёрстке, может это и имеет смысл, но по-моему это излишне.
