Перейти к основному содержимому

CSS фреймворки

· 3 мин. чтения

четверг, 31 декабря 2009 г. в 14:45:52

CSS frameworks это набор подходов по упорядочиванию кода описывающего внешний вид страницы (representation) с учётом смысла содержания (семантики) для повышения эффективности.Кроме ускорения работы побочные эффекты — стандартизация и как результат плюсы в коммандной работе, более простой, понятный и единый код. Хотя тема затрагивает больше дизайнеров и верстальщиков которые занимаются созданием css+html страниц из psd -макетов, тут и backend-программисты найдут для себя что-нибудь интересное.

Выключатели​

Reset- код по обнулению стандартных значений браузера нужен для кроссбраузерного внешнего вида - раз браузеры не хотят договориться, то прикажем им сразу обнулить отступы, и некоторые значения по умолчанию. Самые популярные:

Сетки​

Grids нужны для облегчения восприятия. Человеку нравится видеть порядок в парках и дорогах, зданиях и страничках в интернете. Вертикальные или горизонтальные линии с равномерными отступами - основа сетки. Обычно вёрстка либо фиксированная (px), либо динамическая-резиновая (%, em). Смешанные достаточно сложно делать.

Из вертикальных сеток существуют:

  • Blueprint - Полотно 950px с вертикальной сеткой. Последние элементы имеют класс last

  • 960 grid system - Первые и последние элементы alpha и omega классы соответсвенно.

  • YUI grids - наглядный пример как не стоит называть классы

  • YAML

В целом все эти сетки говно, потому что несемантичны и нужны ленивым верстальщикам что-бы писать меньше кода - вместо 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...

Некоторые предпочитают отдельно выделять ещё и типографику. Я не такой профессионал в вёрстке, может это и имеет смысл, но по-моему это излишне.