Сумрачный блог Кирилла Панфилова

CSS-фреймворки

Любое удачное технологическое решение постоянно находит применение. Если это общепринятая технология, как язык разметки или программирования, то рано или поздно в ней формируются целые наборы постоянно используемых фрагментов кода, которые нет смысла повторять от раза к разу. Наборы кода, выполняющие часто используемые задачи, собираются во фреймворки — файлы или наборы файлов, которые можно включать в свои проекты, особо не задумываясь о том, как это работает. Есть такие фреймворки и в CSS.

Например, я всегда, начиная писать CSS-код для проекта, начинаю его набором правил вроде следующих:

/* CSS Framework by Erlang, 2009 */
/* General Cleaning */

* {
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, Sans-Serif;
	}
html, body {
	height:100%;
	}
input {
	padding:2px 4px;
	}
body, p, div, table, td, th, input, option, select, button, li {
	font-size:9pt;
	}
body {
	background:#fff;
	}
table, img {
	border:0;
	}
table {
	border-collapse:collapse;
	}
table td {
	padding:0px;
	vertical-align:top;
	}
div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}
a, a:link, a:visited, a:active {
	color:#00f;
	}
a:hover {
	color:#f00;
	}
:focus {
	outline:none;
	}
label {
	cursor:pointer;
	}
ul, ol {
	padding:2px 0;
	}
li {
	line-height:1.5;
	margin-left:17px;
	}

/* Special Elements */

Если в нескольких словах описать то, что делает этот код — убирает все отступы у всех объектов (кроме некоторых элементов форм), в том числе и у тела документа, и у ячеек таблиц, рамки у изображений и таблиц, назначает размер и гарнитуру шрифта большинству элементов, исправляет некоторые браузерные разночтения в ширине и высоте блоков, назначает корректные выравнивания и цвета ссылок.

Несомненно, такой код не претендует на полноценный фреймворк, но избавляет от большого количества рутинной работы.

Яндекс.Метрика