Как я должен организовать содержание своего файла (файлов) CSS?

Я ухаживаю к orgainize за своим css как это:

1. reset.css
2. base.css: Я установил расположение для основных разделов страницы
   1. общие стили
   2. Заголовок
   3. Военно-морской
   4. содержание
   5. нижний колонтитул
3. дополнительный - [название страницы] .css: классы, которые используются только на одной странице

Однако Вы находите самым легким читать!

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

Некоторые вещи я скажу хотя:

• Повреждение файла CSS в блоки действительно помогает Вам организовать его в голове, но это означает больше запросов от браузеров, который в конечном счете приводит к более медленному рабочему серверу (больше запросов), и это берет браузеры дольше для отображения страниц. Иметь это в виду.
• Разбивание файла просто, потому что это - произвольное число строк, глупо (за исключением того, что Вы имеете ужасного редактора - в этом случае, получаете нового)

Лично, я кодирую свой CSS как это:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

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

Я иду с этим порядком:

1. Общие правила стиля, обычно относился к пустым элементам (a, ul, ol, и т.д.), но они могли быть общими классами также (.button, .error)
2. , правила Макета страницы относились к большинству/всем страницам
3. Отдельные правила макета страницы

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

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

.class {border: 1px solid #000; padding: 0; margin: 0;}

Это является самым дружественным когда дело доходит до большой суммы объявлений.

г-н Snook записал об этом почти четыре года назад:) .

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

CSS Кроме который, связанные с группой правила вместе. И разделяет Ваши правила на несколько файлов..., если каждый странице на самом деле не нужно каждый правило.

Поскольку фактическое упорядочивание является жизненно важной частью того, как Ваш CSS применяется, кажется немного глупым продолжить "алфавитное" предложение.

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

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

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

, Например: reset.css, design.css, text.css и т.д. Когда я выпускаю конечный продукт, я делаю пюре из всех стилей в один файл.

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

, В то время как:

ul li
{
    margin-left: 10px;
    padding: 0;
}

хорошие Взгляды, это не легкое открытие правила, когда у Вас есть, скажем, 100 строк кода.

Вместо этого я использую этот формат:

rule { property: value; property: value; }

rule { property: value; property: value; }

Я раньше волновался об этом постоянно, но Firebug пришел на помощь.

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

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

Вот то, что я делаю. У меня есть индексная страница CSS без директив по нему и который называет различные файлы. Вот краткий образец:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

Это запускается с полного сброса. Следующий файл определяет цветовую палитру для легкой ссылки. Тогда я разрабатываю основное <div/> с, которые определяют расположение, заголовок, нижний колонтитул, число столбцов, где они соответствуют и т.д... Теги HTML definses <body/>, <h1/>, <p/>, t и т.д. Затем прибывают определенные разделы сайта.

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