С чего начать CSS-файл, как его организовать и о чём не забыть

С чего начать

Для облегчения вёрстки удобно сбросить все настройки браузеров (отступы, рамки и т.п.) по умолчанию следующим кодом в начале CSS.

*	
	{
	padding: 0;
	margin: 0;
	}

ul, ol
	{
	list-style-type: none;
	}

table 
	{
	border-collapse: collapse;
	border-spacing: 0;
	}

table td
	{
	padding: 0;
	}

img
	{
	border: none;
	}

form /* for Opera 9.x */
	{
	margin: 0;
	padding: 0;
	}

input, textarea
	{
	outline: none;
	}

a,a:visited /* for Firefox 3 */
	{
	outline: none;
	}

Уже после этого можно использовать другие техники, например

• Шрифты в em
• Фикс предыдущего способа для случая, когда у пользователя включен нестандартный размер шрифта в ОС (т.н. 120 dpi fix)
• Центрирование блока

Отступы в CSS

Для облегчения чтения кода можно использовать отступы, иллюстрирующие вложенность элементов, а чтобы не допускать черезмерной глубины вложенности — «сбрасывать» отступы для каждого логического блока страницы:

/*
	Header
*/
#header
	{
	...
	}

	#header .links
		{
		...
		}

		#header links a
			{
			...                                                
			}

/*
	Main content 
*/
#main 
	{
	...
	}

	#content
		{
		}

Порядок свойств в правиле

Правило, подсмотренное в гайдлайнах подготовки документации проекта Mozilla. Общая идея — располагать правила от общего к частному:

• display
• list-style
• position
• float
• clear
• width
• height
• margin
• padding
• border
• background
• color
• font
• text-decoration
• text-align
• vertical-align
• white-space
• other text
• content