Правила CSS для каждой страницы - где их разместить? - PullRequest
21 голосов
/ 21 апреля 2009

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

Мне не нравится определять конкретный класс или ID в моем базовом css-файле для сценария одноразового использования, и я боюсь создавать файлы .css для конкретной страницы. Что касается текущего сайта, над которым я работаю, я подумываю просто поместить определение стиля вверху страницы в элементе head. Что бы вы сделали?

Ответы [ 11 ]

12 голосов
/ 21 апреля 2009

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

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

Для CSS, который действительно, по правде говоря, никогда не будет использоваться ни для чего другого, я бы все равно прибегнул к введению правила #id в CSS для всего сайта.

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

5 голосов
/ 21 апреля 2009

Существует четыре основных случая:

  1. стиль = атрибут. Это наименее поддерживаемый, но самый простой код. Я лично считаю использование стиля = ошибкой.
    • page-specc css: это позволяет вам иметь чистый HTML и чистый основной CSS-файл. Однако это означает, что ваш клиент должен загружать много маленьких CSS-файлов, что увеличивает пропускную способность и задержку загрузки страницы. Однако его очень легко поддерживать.
    • один большой CSS для всего сайта: главное преимущество одного большого файла в том, что скачивать его можно только одним способом. Это гораздо более эффективно с точки зрения пропускной способности и задержки.

Если у вас есть какое-либо программирование на стороне сервера, вы можете просто динамически комбинировать несколько листов из # 3, чтобы получить эффект # 4.

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

Что касается ответа , который был принят, когда я писал это, Я не согласен с поиском «комбинации классов, которая дает желаемый результат». Для меня это звучит так, будто классы идентифицируют визуальный стиль вместо логической концепции. Ваши классы должны быть что-то вроде «titlebox», а не «red». Затем, если вам нужно изменить цвет текста на странице информации о пользователе, вы можете сказать

#userInfoPage .titlebox h1 { color : red; }

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

4 голосов
/ 21 апреля 2009

Я бы установил идентификатор для страницы, как

<body id="specific-page"> or <html id="specific-page">

и использовать механизм переопределения css в файле CSS для всех сайтов.

4 голосов
/ 21 апреля 2009

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

Я бы посоветовал сделать для него #Selector в главной таблице стилей для всего сайта. Загрязнение минимально, и если у вас действительно так много действительно уникальных случаев, вы можете переосмыслить то, как вы размечаете свои сайты.

4 голосов
/ 21 апреля 2009

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

3 голосов
/ 21 апреля 2009

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

3 голосов
/ 21 апреля 2009

Я бы поместил их в тег <style /> вверху страницы.

2 голосов
/ 21 апреля 2009

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

1 голос
/ 21 апреля 2009

Поместите его в то место, куда вы будете смотреть, если хотите знать, где был определен стиль.

Для меня это то же самое место, где я бы размещал стили, которые использовались 2 раза, 5 раз или 170 раз - я не вижу причин исключать стили из основной таблицы стилей в зависимости от количества использований.

1 голос
/ 21 апреля 2009

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

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