CSS - разделение цвета и позиции - PullRequest
20 голосов
/ 30 января 2009

Мне просто интересно, что другие делают в этом отношении:

Пытаетесь ли вы сохранить позиционный CSS (макет) отдельно от CSS цвета / аромата (цвет, цвет фона, фоновые изображения, размер шрифта и семейство)?

Использовать две таблицы стилей? Объединить две таблицы стилей на стороне сервера? Слой абстракции для CSS? или ты даже не попробуешь?

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

Ответы [ 9 ]

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

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

Тем не менее, я предлагаю вам прочитать Создание сексуальных таблиц стилей на сайте thinkvitamin.com. Одна вещь, которую я делаю, это перечисляет правила в определенном порядке каждый раз, поэтому я знаю в блоке объявлений, где найти то, что я хочу.

Больше информации у Джины Болтон http://creatingsexystylesheets.com/

5 голосов
/ 30 января 2009

Вы обнаружите, что в крупных проектах макет и цвет / цвет CSS (если вы умны) обычно оказываются раздельными. Во-первых, если вы ловите себя на том, что снова и снова устанавливаете правила стиля color / font-size / font-family, вы теряете время. Обычно вы должны определять свои шрифты в одном месте: тег body. Любые дополнительные шрифты должны быть определены в их соответствующих тегах ... h1, h2, p и т. Д. По моему мнению, не стоит давать эти теги позиционным директивам; они должны быть помещены в div, который будет отвечать за их расположение. То же самое касается цвета и размера шрифта. Я думаю, что единственным исключением из этого правила, как правило, являются фоновые элементы, что особенно верно, если у вас много градиентов и подобных вещей.

На самом деле все сводится к планированию; Хорошо спланированный проект требует очень мало правил стиля цвета / аромата. Поэтому, чтобы ответить на ваш вопрос, да, у меня обычно есть файл «Global.css», который определяет все мои шрифты и цвета для h1-h5, a, p и любых других тегов, которые будут содержать текст.

Edit:

Обычно, поскольку проекты, в которых я работаю, являются довольно крупномасштабными и имеют ряд различных модулей, мы разделяем стили в некоторой иерархии; это имеет смысл из-за того, как работает CSS - до тех пор, пока вы не измените правила стиля, установленные в «base» (или в нашем случае, global.css) где-то внизу, стили будут придерживаться. Это помогает, потому что когда мы хотим изменить шрифт нашего сайта, мы просто меняем правило font-family в теге «body», и оно будет распространяться по всему сайту.

Итак, наш макет таблицы стилей работает примерно так:

Global.css (Fonts/Text/Primary font colors)
--> genericBase.css (basic page structures such as columns that are used throughout the site)
--> nav.css (left-hand nav and/or top nav bar)
--> formLayout.css (labels, inputs, fieldsets, any other form stuff)
-----> forums.css (individual modules' styles that may deviate a bit from the usual structures, or simply things specific to those pages)
-----> blogs.css
-----> messages.css (etc etc etc)

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

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

Итак, как я уже сказал, планирование жизненно важно. Я обнаружил, что эта методология облегчает «отладку» моих стилей, и я почти не использую хаки, обычно только для глупых вещей ie6.

Дайте мне знать, если вам нужна дополнительная информация. Я рад, что это полезно для вас.

3 голосов
/ 30 января 2009

Раньше я их разделял, но поддерживать было сложнее. Проблема заключается в том, что многие свойства «форматирования» будут влиять на макет, а многие свойства «макета» могут фактически быть дизайном.

Некоторые примеры:

Хотя свойство border можно считать свойством «форматирования», оно занимает некоторое пространство, поэтому вам придется корректировать макет при установке или удалении границ.

"line-height" привязан к размеру шрифта и может считаться свойством "форматирования", но он оказывает огромное влияние на размер ваших элементов и то, как они вертикально выравнивают друг друга.

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

Если задуматься над этим, очень мало свойств, которые на самом деле являются чисто форматирующими или просто макетированными.

Часто проще просто сохранить все в одном файле и попытаться сохранить его в чистоте, сгруппировав ваши заказы объявлений, связанные свойства и т. Д.

2 голосов
/ 30 января 2009

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

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

Как отметил Марк У, Создание сексуальных таблиц стилей - фантастическое чтение. Одна вещь, которую они отстаивают, - это разделение проблем стиля с помощью фреймворка:

  • screen.css - экранный CSS-файл может содержать все ваши стили, которые вы хотите использовать на экране, и / или может импортировать дополнительные стили, такие как следующие:
    • reset.css - CSS-файл сброса можно использовать для «сброса» всех стилей браузера по умолчанию, что может помочь в достижении кросс-браузерной совместимости.
    • typography.css - типографский CSS-файл может определять ваши шрифты, размеры, начальный, кернинг и, возможно, даже цвет.
    • grid.css - CSS-файл сетки может иметь структуру вашего макета (и выступать в роли каркаса вашего сайта, определяя базовый заголовок, нижний колонтитул и настройки столбца).
  • print.css - файл CSS для печати будет включать ваши стили, которые вы хотите использовать при печати страницы.

Если вы следуете этому шаблону, цвета будут добавлены в ваш typography.css, а макет будет в вашем grid.css.

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

Я начал использовать классы для конкретной обработки цветов.

.element {margin, padding, layout layout}

.ourcolor {#some color}

Это удлиняет атрибут класса, хотя:

Однако я могу повторно использовать цвет: Некоторый текст

Пока что я предпочитаю это, так как регулировать цвета намного проще.

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

Я попал в схему разделения моего CSS на следующее:

  • Макет (верхние и нижние колонтитулы, логотипы - общий хром)
  • Типография (шрифты, размеры, многоразовые стили встроенных шрифтов)
  • Виджеты

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

  • Формы (по левому краю, по правому краю, стили для обязательных полей и т. Д.)
  • Сетки (2-х, 4-х и т. Д. И т. Д. - около 20 или около того разновидностей)
  • Хаки (IE / другие CSS-хаки)
  • Другие вещи (виджеты AJAX, панели инструментов, поля для комментариев и т. Д. - все, что можно использовать повторно)

Что касается цветов, я просто храню текстовый файл с шпаргалкой. Хранение их в отдельной таблице стилей, вероятно, будет работать, только если вы очень, очень дисциплинированы.

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

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

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style-default.css" title="Default Style" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="style-bw.css" title="Black and White" media="screen" />

Все макеты находятся в style.css, затем цвета в style-default.css. Таким образом, у меня есть стандартный стиль, но у пользователей также есть возможность изменить цвета. Это не только предлагает пользователю опции, но и позволяет легко менять цвета, не касаясь макета (я склонен менять свои цвета гораздо чаще).

В Firefox мои параметры цвета отображаются в меню «Стиль страницы».

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

Я храню все в одном файле и предоставляю только разные файлы для альтернативных стилей (например, для печати).

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

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

Я хотел бы иметь возможность определять цвета один раз в таблице стилей, назначать им декларативное имя (например, «HeadingColour») и затем использовать это имя при назначении цвета селектору ...

...