---
title: CSS фреймворки
date: 2009-12-31T10:00
tags: [css]
---

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

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

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

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

- [Meyer's css reset](http://meyerweb.com/eric/tools/css/reset/) - обнуляет фокус, осторожно  
    
- [YUI css reset](http://developer.yahoo.com/yui/reset/) - обнуляет все тексты, даже h1 и strong

### Сетки

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

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

- [Blueprint](http://www.blueprintcss.org/) - Полотно 950px с вертикальной сеткой. Последние элементы имеют класс last  
    
- [960 grid system](http://960.gs/) - Первые и последние элементы alpha и omega классы соответсвенно.
- [YUI grids](http://developer.yahoo.com/yui/grids/) - наглядный пример как не стоит называть классы
- [YAML](http://www.yaml.de/en/)

В целом все эти сетки говно, потому что несемантичны и нужны ленивым верстальщикам что-бы писать меньше кода - вместо style="width:960px;" - class="block-24"

### Чем дальше в лес  

Генераторы css-кода пишутся на серверных языках ради нововведений от которых отказываются продвигающие стандарт, а именно - переменных, логических операций, вложённости и питоновского стиля в отступах. Дополнительно библиотеки занимаются кешированием и компрессией. Мне известны следующие:

- Java - Google GWT
- Ruby - Sass и Compass
- PHP - [extcss](http://code.google.com/p/extcss/), [scaffold](http://wiki.github.com/anthonyshort/csscaffold)
- Python - [cleverCSS](http://sandbox.pocoo.org/clevercss/)  
    

Но зачем останавливаться только на этом? Можно ведь и вместо html писать иерархии в питоновском стиле -[haml](http://haml-lang.com/). Это уже не 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...

[Некоторые](http://www.contentwithstyle.co.uk/content/modular-css) предпочитают отдельно выделять ещё и типографику. Я не такой профессионал в вёрстке, может это и имеет смысл, но по-моему это излишне.

![](img/Pasted%20image%2020241019192626.png)

## Related

- [Blockquote](/ru/blog/tech/frontend/css/blockquote/)
- [Phonegap приложение](/ru/blog/tech/phonegap-prilozhenie-s-angularjs/)
- [UserScripts](/ru/blog/tech/userscripts-i-userstyles-ili-kak-izmenit-lyuboy-sayt/)