Выключатели

• Meyer's css reset - обнуляет фокус, осторожно
  
• YUI css reset - обнуляет все тексты, даже h1 и strong

Сетки

• Blueprint - Полотно 950px с вертикальной сеткой. Последние элементы имеют класс last
  
• 960 grid system - Первые и последние элементы alpha и omega классы соответсвенно.
• YUI grids - наглядный пример как не стоит называть классы
• YAML

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

• Java - Google GWT
• Ruby - Sass и Compass
• PHP - extcss, scaffold
• Python - cleverCSS
  

Самоорганизация

• Отдельные файлы под необычные экраны - 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...

Статичные

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

Такой подход используют к примеру iLoveCinema.ru, imeem.com, cnn.com, li.ru, toodoo.ru, bobrdobr.ru, blog.ru

Динамичные

Динамические кнопки можно делать по-разному. Самые простые:

1. Генерировать на лету при помощи php. Удобно когда проект мало посещаем и часто изменяется - всевозможные сайты под ключ, админки.
2. Использовать только gradient-фон. Немного украшает кнопки, оставаясь всё-таки немного аскетичным из-за строгих углов. Для эффектности можно использовать границы с эффектом выступов
   feedburner.com, youtube.com
3. Использовать готовый фон + текст поверх.
   Это наиболее широко обсуждаемые решения, потому что нуждаются в балансе минимализма кода и красоты визуальной.

Последний пункт и рассмотрим..

Несемантические

Самый простой вариант несемантических конструкций это таблица с тремя ячейками или вот такой мега-div, взятый с новой вёрстки sape.ru, сделанный видимо в Garin Studio. Этот вариант используется в старых проектах, либо когда нет больше сил и умения разбираться с неправильным показом в разных браузерах.

<div class="error_message"><div class="lt"><div class="rt"><div class="rb"><div class="lb">
<p>Нет заявокp>
div>div>div>div>div>

Yahoo.com, sape.ru

Любимые уголки

Углы, если они не сделаны при помощи техники закругления при помощи javascript (создавая кучу попиксельных элементов)

1. Одна фоновая картинка, с фиксированной шириной. Просто, но не гибко.
   MirTesen.ru
2. Физически одна фоновая картинка и несколько DOM-элементов, использующих её с указанием background-position. Закруглённые углы не прозрачные а цвет фона как у страницы, как правило белый
   Google.com/Reader

Уголки с дверями

В технике "sliding doors" используются два DOM-элемента и две картинки, одна из которых - уголки справа, а другая - уголки слева и фон. Хорошо что не надо много html-кода и получается функционально. Минус - очень длинные или двуярусные (вертикально расширяющиеся) кнопки не получится сделать.
<button><span>Button Titlespan>/button>

В ходе изучения особенностей вёрстки такой семантики я заметил насколько важны некоторые css параметры, а именно line-height:

button{padding:0;border:0;background:url("img/button/black_left.png") no-repeat left;}
button span{line-height:31px;display:block;padding:0 10px 0 10px;background:url("img/button/black_right.png") no-repeat right;}
button:hover{} //change background
button:hover span{} //change background

См. также

• MyMans - css копки
• HowTo - sexy css buttons
  
• Как оптимизировать загрузку кнопок
• Styling the button with sliding doors
• Очень популярный блог об истории кнопки
  
• Devoid - улучшение submit в форме
• Чернев.ру - делаем красивые кнопки

Модель объектов документа выражающаяся в XHTML очень логическая структура и гибкая. Проблема в том что ни создатели, как так часто бывает, ни веб-разработчики (и я в их числе) не представляют в полной мере всю гибкость и возможности оптимального позиционирования, из-за этого постоянно возникают вопросы и хаки, решающие проблему не-табличным решением.

Вертикальная оцентровка

Вертикальное позиционирование например предлагается делать через относительное абсолютное позиционирование, но замечу что хотя идея хорошая, просто взять и написать ниже приведённый код нельзя, потому что -50% не прокатит в Firefox и Safari. Никита кстати тоже не заметил это, потому что оба выравнивают строчку текста и пол строчки разница небольшая, да и к тому же имеет место быть какой-то хак для IE.

#container {top:50%;position: absolute;}
#inner {top:-50%;position:relative;}

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

Горизонтальная оцентровка

Можно сделать тот же вариант с параметром left. Проблема в том, что как только окно станет меньше ширины контейнера, то левая половина контейнера спрячется, поскольку весь контейнер целиком привязан точно к центру. Поэтому пробуем оцентровку текста:

Полная оцентровка

Поскольку нам надо теперь контейнер сделать абсолютным, то выравнивание текста не сможет совладать с хитрыми элементами. Для этого вводим ещё один элемент.

Решил проверить свой календарик в Опере и пофиксить баги. Не тут то было - Opera строго следует W3C стандартам и ничего про overflow-x незнает - а overflow: auto - пожалуйста.

В процессе поиска решения я даже обнаружил такие свойства css:

#myDiv {
height: expression(document.body.offsetHeight - 110 + "px");
}

Но в итоге обошлось простой перегрузкой overflow:auto;overflow-x: hidden; overflow-y: scroll;

По умолчанию все элементы, у которых не указан стиль позиционирования имеют

position:static;

Указывая у элемента относительное позиционирование по сути ничего не меняет - элемент занимает по прежнему то же место, но может быть сдвинут. Выглядит это так, что на месте сдвинутого элемента остаётся пустое место.

Установка абсолютного позиционирования не значит что элемент будет располагаться в относительно рабочей области браузера. Если на parent-элементе стоит relative position, то на дочернем элементе с absolute position местонахождение будет определяться относительно parent-элемента.