Кто как CSS пишет?

[Great Rash]

Все пишут стили по разному. Я, например, мысленно разделяю стили для элементов на такие группы:

.class {
	display: ...; <-- сначала как он будет отображаться

	position: ...; <-- потом как он будет позиционироваться
	top: ...;
	left: ...;
	bottom: ...;
	right: ...;

	overflow: ...; <-- потом перекрытие
	float: ...; <-- затем будет ли он плавающим

	width: ...;
	height: ...; <-- затем размеры

	margin: ...; <-- внешний отступ
	padding: ...; <-- внутренний отступ

	font: ...; <--  стили для шрифта

	стили для текста

	border: ...; <-- рамка
	background: ...; <-- и в самом конце бекграунд
}

А как вы привыкли писать CSS? И почему?

P.S. Еще, в последнее время пишу стили в одну строку, вот так:

.class {width: 100px; height: 100px; ...}
	.class element {width: 10px; height: 10px; ...}

Тоже достаточно удобно и здорово размер файла экономит.

[psywalker]

А я кстати никогда не следовал алфавиту или очерёдности стилей в правиле. Остальное киданул в личку

[stars]

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

1) как элемент представлен на странице(display)

2) размеры элемента.

3) перекрытие(overflow)

4) отступы.

5) позиционирование.

6) обтекании.

7) стилизирование. (от размера шрифта до фона)

Edited October 29, 2010 by stars

[Veseloff]

Я разделяю каждое свойство на отдельную строку — так читабельнее. Что касается алфавитных порядков — бред. Всё равно не буду искать «визуально» — воспользуюсь поиском по селектору. Остальное как придётся — всё равно получается нормально и читабельно.

[WalkMan]

пишу в одну строку, что бы проще было визуально искать а не юзать поиск

в отношении последовательности стилей:

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

[ShumNo]

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

[mishka]

пишу в одну строку, что бы проще было визуально искать а не юзать поиск

Фига ссе. Чего то я вообще ничего не могу разобрать когда записано в одну строку. И я нахожу это жутко неудобным.

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

Правила в для селекторов никак не группирую.

Группирую селекторы

1. Сброс

2. Хедер

3. Контент

4. Сайдбар

5. Футер

6. Остальное (элементы которые могут встречаться в любом месте)

[WalkMan]

Фига ссе. Чего то я вообще ничего не могу разобрать когда записано в одну строку. И я нахожу это жутко неудобным.

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

хз

мот не правильно выразился

/* description state */
.stateDesc{ position: absolute;  }
.stateDesc h3 {  }
.stateDesc p {   }
.stateDesc .scroll-pane { height: 415px; }
/* help block */
.helpBlock {  padding: 25px 30px 0px 17px;}
.helpBlock li { padding-left: 58px; position: relative; zoom: 1; font-size: 13px; color: #2b5a56; font-weight: bold; line-height: 22px; margin-bottom: 55px; }

кароч вот такого плана

и всё удобно)

тут дело привычки)))

[Great Rash]

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

Это не удобно.

Во-первых, нужно хранить 2 файла (нормальный и пожатый), если нормальный потеряется, то дописывание (переписывание) css превратится в мало приятное занятие.

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

[Vlad]

Сжимать хорошо, если это на стороне сервера автоматом делается. Минимизация плюс GZIP идут на ура. Исходники же в любом виде можно хранить, главное, чтобы их редактировать можно было легко и удобно.

[Great Rash]

Как их в SVN хранить? Отдельную ветку делать?

[Veseloff]

А при чём тут SVN вообще? Все исходники коммитятся как обчычно. А как надо на сервер залить, то делаем export и сжимаем. Для автоматизации можно хук поставить на export, например.

[Great Rash]

Не понял, а исходники то куда коммитятся? Не на сервер разве? Т.е. надо делать 2 ветки - тест и продакшн я правильно понимаю? Если при выливке на продакшн возникает конфликт, который заресолвить автоматом не получается, не геморно ли будет мерджить?

[Vlad]

Не понял про SVN, чего ради он всплыл, речь про CSS изначально.

[Great Rash]

Ну типа версионность в CSS не нужна разве?

[rash]

Не понял, а исходники то куда коммитятся? Не на сервер разве? Т.е. надо делать 2 ветки - тест и продакшн я правильно понимаю? Если при выливке на продакшн возникает конфликт, который заресолвить автоматом не получается, не геморно ли будет мерджить?

Мержишь несжатые, после мержа - жмешь.

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

[ZI DAN]

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

.panel
{
   background-color: silver;
   border-style: solid;
   border-width: 1px;
   border-color: gray;
}

.colorDef
{
   color: black;
}

.colorDisabled
{
   color: gray;
}

Теперь можно использовать для пунктов меню "colorDisabled", для выделенных пунктов меню "colorDef", для блоков с текстом "panel colorDef", для других блоков с текстом "panel colorDisabled". Пример, сильно упрощён, но суть, я думаю, ясна.

[deadrash]

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

[Non Stop]

/* Стили */

* {margin:0; padding:0;}

body {background:#CCCCCC;}

/*Блоки*/

#header {width:980px; margin:0 auto;}

#content {width:700px; float:left;}

/*Ссылки*/

a:link {text-decoration:none; color:#0033FF;}....

Удобно и понятно

[barman]

Пишу в строчку.

Уточню, без разници как писать?

хоть так 
[b]body { font: blabla; background: blabla; }[/b] 
или так 
[b]body {font: blabla; background: blabla;} [/b]
хоть вот эдак
[b]body { 
   font: blabla; 
   background: blabla;
} [/b]

[deadrash]

хоть так

[b]body{font:blabla;background:blabla}[/b] 

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

Edited January 4, 2011 by deadrash

[barman]

хоть так

[b]body{font:blabla;background:blabla}[/b] 

хз, однажды без точки с запятой после последнего значения браузер криво отобразил страничку, хотя я где-то читал, что не обязателен в конце ;

[Shift-Web]

Я пишу в каждой строке отдельно, компаную прпавила короткими аналогами -- смысл есть, код короче(читать удобнее) и переопределять отдельные части удобнее. Как только css и вёрстка готовы делаю бэкап и жму css в одну строку, если на движке нет пакера. Оба файлика кладу рядом.

Сами свойства стараюсь группировать по логическому воздействию или так, если мне нужно не забыть что-то перепроверить. Обычно не заморачиваюсь с порядком и алфавитом, так всё понятно ))) Тестовые и экспериментальные вещи обычно кидаю в хвост конструкции, проще править.

По поводу сокращений:

.panel
{
   background-color: silver;
   border-style: solid;
   border-width: 1px;
   border-color: gray;
}

Ну как бэ ... пальцы стереть можно, если так всё писать.

 background: transparent url('.....')  0px 50% repeat-y;

и аналогично -- разница есть

  background-color: transparent;
  background-image: url('....');
  background-position: 0px 50%;
  background-repeat: repeat-y;

тоже с бордером и фонтами. если надо переопределить для деток, то просто полное свойство пишу, например:

<div id="root">
<p>Inside</p>
</div>

#root {
font: normal 17px Tahoma;
}
#root p {
font-size: 19px;
}

Имхо, сокращения - сила

Edited January 4, 2011 by Shift-Web

[deadrash]

Как только css и вёрстка готовы делаю бэкап и жму css в одну строку, если на движке нет пакера. Оба файлика кладу рядом.

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

[Shift-Web]

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

Да есть, но если css выходит плотнячковый, то пытаешься хоть как-то умениьшить дополнительно... Знаю, экономия на спичках и пахнет паранойей ))))