Устройство файла css

[Колос]

Любопытно кто какое использует устройство таблицы стилей.

Я лично до сих пор не могу определиться, как делать лучше. Когда вёрстка довольно сложная и правил очень много, то получается очень запутанно. Пробовал выстраивать названия классов по алфавиту. Это помогает найти нужный класс, но когда много правил вида "TD.class1 A #id2 {...}", то это не особо помогает. В итоге уже через неделю после того как верстал, получается, что определить какой в заданном месте цвет, легче через принтскрин и фотошоп, чем через таблицу стилей.

Кто, что может посоветовать, как лучше делать?

Например, все ли стили выносите в таблицу или что-то оставляете в шаблоне, и тому подобное.

[Victor Ananiev]

все выношу в таблицу, а там расставляю по порядку появления на странице, тоесть шапка сверху футер внизу)

делю все на несколько css страничек

[Searcher]

я обычно сначала описываю переопределение базовых стилей, остальные по месту их использования или по назначению обязательно поясняя для себя комментариями.

По комментам все легко находится.

Тут еще важна логика построения дерева стилей. Если все правильно построено, то обычно стилей не много. Я часто использую возможность применить к элементу сразу несколько стилей. Тогда не приходится создавать кучу стилей для всех вариантов сочетаний.

Edited February 20, 2009 by Searcher

[Колос]

Я часто использую возможность применить к элементу сразу несколько стилей. Тогда не приходится создавать кучу стилей для всех вариантов сочетаний.

Да я тоже об этом думал. Правда это может приводить к извращениям такого рода:

<p class="bold italic">
ффффффф
</p>

.bold
{
  font-weight:bold;
}
.italic
{
  font-style:italic;
}

Вместо:

<p class="classname">
ффффффф
</p>

.classname
{
  font-weight:bold;
  font-style:italic;
}

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

Очень часто бывает, что лучше просто прописать:

<p style="font-weight:bold;font-style:italic;">
aaaaaaa
</p>

Делаете ли вы так? Или всё подчистую выносите в таблицу стилей?

Edited February 20, 2009 by Колос

[dber]

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

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

[Быколай]

Последнее время пришёл к практике подключать три таблицы CSS:

1. Динамически с помощью java script: их несколько в зависимости от разрешения монитора и браузера клиента.

2. Содержащая разметку-позиционирование.

3. Декоративная - шрифты, цвета, ссылки и проч. мелочь.

Вроде как получается не особо много свойств для каждого селектора, разносятся. Ну и не забывать про дочерние-контекстные: многое на себя берут, если продумать.

Edited February 27, 2009 by Быколай

[rash]

Сколько файлов подключать и как разделять правила между ними — это во многом зависит от сложности проекта.

Я редко делаю больше 2—3 таблиц стилей на один проект.

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

Пример:

body {
	background-color: #fffeef;
	color: #333;
	}

.header {
	font: 2em Georgia, "Times New Roman", serif;
	}
	.header .subheader {
		display: block;
		font-size: smaller;
		}

.main-content {
	width: 75%;
	float: left;
	font: 85% Verdana, Arial, Helvetica, sans-serif;
	}
	.main-content p {
		margin: 0 0 1em 0;
		padding: 0;
		}
	.main-content ul {
		padding: 0 0 0 50px;
		}
		.main-content ul li {
			margin: 0 0 .2em 0;
			}
			.main-content ul li a {
				text-decoration: none;
				}
			.main-content ul li a:hover {
				text-decoration: underline;
				}

То есть форматирование таблицы стилей отражает структуру страницы, и помогает легче находить нужные фрагменты.

А разметку-позиционирование в отдельную таблицу не выношу, пока не увидел в этом для себя преимуществ. Конечно, если на сайте нет разделов с принципиально разной структурой страниц.

[Колос]

Все советуют делить таблицу стилей на несколько.

А не будет ли это замедлять загрузку страницы?

Edited February 27, 2009 by Колос

[rash]

Будет. В сумме у них размер будет одинаковый, потому что один и тот же набор правил просто будет разбит на несколько файлов, но при этом загрузка каждого файла требует установки нового TCP-соединения, а это довольно ресурсоемкая процедура. До установки соединения клиент и сервер должны обменяться тремя пакетами и дождаться ответа от другой стороны.

Думаю, ни вы, ни пользователи задержки не заметят, но она будет :-)

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

[Vlad]

Я лично разбиваю содержимое файла на блоки и комментирую их. Типа:

/* Футер */

#footer {}

/*—————*/

Так удобно сразу находить нужный фрагмент через поиск, да и путаницы меньше.

[Nekromancer]

вот примерный вариант моего построения CSS файла)

body { margin: 0; padding: 0; background: #ebd77e url('/images/bg.jpg') repeat-x; font-size: 12px; font-family: Arial;}
table {border:none;}
a {font-size: 100%;}
a:link {}
a:active {}
a:visited {color: blue;}
a:hover {text-decoration: none;}
.standart {width: 1077px; text-align: center;}
div#head-1 {background: url('/images/index_01.png') center center no-repeat; text-align: center; height: 303px;}
table#head-2 {height: 173px;}
td#head-2-1 {width: 702px; height: 173px; background: url('/images/index_02.png') center center no-repeat; text-align: center;}
td#head-2-2 {width: 122px; height: 173px; background: url('/images/index_03.png') center center no-repeat; text-align: center;}
td#head-2-3 {width: 253px; height: 173px; background: url('/images/index_04.png') center center no-repeat; text-align: center;}
table#menu {height: px;}
td#menu-1-1 {width: 1077px; height: 75px;  background: url('/images/index_05.png') center center no-repeat; text-align: left;}
td#menu-2-1 {width: 180px;  height: 278px; background: url('/images/index_06.png') center center no-repeat; text-align: center;}
td#menu-2-2 {width: 745px;  height: 278px; background: #f1ebdd center center no-repeat; text-align: center;}
td#menu-2-3 {width: 152px;  height: 278px; background: url('/images/index_10.png') center center no-repeat; text-align: center;}
td#menu-3-1 {width: 1077px; height: 103px; background: url('/images/index_12.png') center center no-repeat; text-align: center;}
table#content {height: 278px; width: 745px; vertical-align: top;}
td#content-1-1 {width: 335px; height: 251px; background: center center no-repeat; text-align: left; vertical-align: top;}
td#content-1-2 {width: 67px;  height: 251px; background: url('/images/index_08.jpg') center center no-repeat; text-align: center;}
td#content-1-3 {width: 343px; height: 251px; background: center center no-repeat; text-align: left; vertical-align: top;}
td#content-2 {width: 745px; height: 27px;  background: url('/images/index_11.jpg') center center no-repeat; text-align: center;}

если код начинается слишком разрастаться применяю комментарии..

Edited February 28, 2009 by Nekromancer