2009-04-21 1 views
20

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

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

ответ

12

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

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

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

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

+1

Жаль, что я не мог дать ответ всем, но ваш был самым многословным, так что вы его получили. Я закончил разработку класса, который мог бы быть достаточно общим для того, чтобы идти в основной файл css, не загромождая вещи. Спасибо за внимание к кешированию и размеру страницы, я тоже забыл об этом подумать. – Chris

+0

Отличный ответ. Это лучше формулирует точки в моем посте. Отлично сработано. –

3

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

1

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

1

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

1

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

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

4

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

3

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

4

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

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

2

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

4

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

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

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

5

Есть четыре основных случая:

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

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

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

Что касается answer that was accepted when I wrote this, Я не согласен с поиском «комбинации классов, которые дают вам нужный результат». Это звучит для меня как классы, которые определяют визуальный стиль, а не логическую концепцию. Ваши классы должны быть чем-то вроде «titlebox», а не «red». Тогда, если вам нужно изменить цвет текста на странице информации пользователя, вы можете сказать,

#userInfoPage .titlebox h1 { color : red; } 

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

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