Выключатели
Reset - код
по обнулению стандартных значений браузера нужен для кроссбраузерного
внешнего вида - раз браузеры не хотят договориться, то прикажем им
сразу обнулить отступы, и некоторые значения по умолчанию. Самые
популярные- Meyer's css reset - обнуляет фокус, осторожно
- YUI css reset - обнуляет все тексты, даже h1 и strong
Сетки
Grids нужны для облегчения восприятия. Человеку нравится видеть порядок в парках и дорогах, зданиях и страничках в интернете. Вертикальные или горизонтальные линии с равномерными отступами - основа сетки. Обычно вёрстка либо фиксированная (px), либо динамическая-резиновая (%, em). Смешанные достаточно сложно делать.Из вертикальных сеток существуют:
- Blueprint - Полотно 950px с вертикальной сеткой. Последние элементы имеют класс last
- 960 grid system - Первые и последние элементы alpha и omega классы соответсвенно.
- YUI grids - наглядный пример как не стоит называть классы
- YAML
Чем дальше в лес
Генераторы 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...
Комментарии