Как вы структурируете файлы css для веб-проекта?

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

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

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

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

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

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

Две вещи:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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