Как вы структурируете CSS-файлы для веб-проекта? - PullRequest
2 голосов
/ 08 января 2009

В моем проекте я поместил все свои классы CSS в таблицы стилей.

Структура, которой я следую, была

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

Хотя я говорю об asp.net, это не должно иметь никакого значения для любой другой среды веб-разработки.

Этот способ структурирования css файлов в порядке? Как другие размещают свои css файлы и почему?

Спасибо.

Смежный вопрос

Как лучше организовать правила CSS

Ответы [ 10 ]

12 голосов
/ 08 января 2009

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

У меня обычно есть основной файл CSS, а затем, возможно, дополнительные файлы для других основных частей моего сайта (например, раздел личного администрирования и т. Д.)

4 голосов
/ 08 января 2009

Две вещи:

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

Во-вторых, найдите время, чтобы изучить «Темы», если вы работаете в ASP.NET. Это позволит вам, например, создать один класс CSS для одного общего вида сайта (например, «синяя» тема), а затем поменять весь внешний вид на другой (например, «зеленая» тема). Он также предлагает вам возможность упорядочивать как ваш CSS, так и изображения, на которые они ссылаются, так, как я думаю, вам понравится (вы можете предоставить несколько альтернативных файлов CSS и каталогов изображений для настройки внешнего вида вашего сайта). *

4 голосов
/ 08 января 2009

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

Я ТОЛЬКО добавляю дополнительные CSS-файлы, если есть особая необходимость. Если на одной странице есть элементы, необходимые для ПРОСТО этой страницы. Я обычно добавляю их в блок стиля, встроенный в эту страницу. Чтобы избежать необходимости в дополнительном HTTP-запросе.

1 голос
/ 09 января 2009

Я хотел бы поблагодарить веб-сайт Yahoo Exceptional Performance , который содержит целую кучу полезных советов по передовым инженерным проблемам, которые могут иметь драматический эффект на время загрузки страницы. В нем обсуждаются такие вопросы, как уменьшение количества HTTP-запросов на представление, эффективная загрузка CSS и JavaScript, максимальная кешируемость и т. Д.

Строго говоря, это не ответ на ваш вопрос, но стоит помнить, когда вы решаете, как работать с CSS и т. П. В новом проекте.

1 голос
/ 08 января 2009

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

1 голос
/ 08 января 2009

Для каждого макета я использую один файл CSS.

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

0 голосов
/ 11 января 2009

Мы используем одну таблицу стилей, которая применима ко всему сайту, и дополнительные таблицы стилей, где это применимо, на определенных страницах. Например, на некоторых наших страницах у нас есть сетки, поэтому у нас есть файл grids.css. Нет смысла добавлять все эти CSS в одну таблицу стилей, когда иногда это не нужно.

0 голосов
/ 09 января 2009

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

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

Прогрессивное улучшение с помощью CSS - список отдельно
Я призываю всех веб-разработчиков прочитать эту статью.

0 голосов
/ 09 января 2009

Поскольку вы упомянули ASP.NET в своем вопросе, я бы повторил рекомендацию другого пользователя, чтобы проверить Темы. У меня есть один «набор» .css файлов для каждой темы ASP.NET на моем сайте. Я функционально делю свои CSS-селекторы на файлы; например, я создаю отдельные файлы .css для:

  • стили макета страницы верхнего уровня (используются почти исключительно на моих главных страницах)
  • стилей для встроенных элементов HTML (p, a, h1-h6 и т. Д.)
  • пользовательские стили уровня блока (для элементов div)
  • Пользовательские встроенные стили (для пролетов)
  • таблицы стилей

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

0 голосов
/ 08 января 2009

Это действительно зависит от потребностей проекта и от того, каков ваш план по поддержанию CSS в будущем. Я работаю над большим проектом, в котором мне не всегда удается изменить HTML-код в шаблоне, поэтому мне требуется очень детальное управление CSS.

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

Основным преимуществом этого является то, что, поскольку все происходит каскадно, я могу определять подавляющее большинство своих стилей в глобальных таблицах и на уровне шаблонов, но при этом иметь возможность переопределять отдельные правила на уровне страниц. По сути, я могу подклассифицировать свой CSS, изменяя только те части, которые мне нужно изменить. Таким образом, мне также не придется иметь дело с тоннами и тоннами уникальных имен. Обе страницы могут иметь область #left-column, но реализовать ее можно по-разному. Думайте об этом как о полиморфизме CSS.

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

Как правило, я нахожу, что если весь CSS хранится в одном файле (в большом проекте), он всплывает и быстро становится неуправляемым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...