Собственные правила CSS - где их ставить?

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

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

#userInfoPage .titlebox h1 { color : red; }

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

Я бы установил id для страницы, например

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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