CSS - Разделение цвета и положения

Ответ 1

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

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

Дополнительная информация в Jina Bolton http://creatingsexystylesheets.com/

Ответ 2

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

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

Edit:

Обычно, поскольку проекты, над которыми я работаю, довольно масштабны и имеют несколько различных модулей, мы разделяем стили в виде иерархии; это имеет смысл из-за того, как работает CSS - до тех пор, пока вы не меняете правила стиля, установленные на "базе" (или, в нашем случае, global.css) где-то по линии, стили будут придерживаться. Это помогает, потому что, когда мы хотим изменить шрифт нашего сайта, мы просто изменяем правило семейства шрифтов в теге 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

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

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

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

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

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

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

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

Ответ 4

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

Ответ 5

Недавно я разделил стили макета и цвета, и теперь у меня есть несколько файлов 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, затем цвета находятся в стиле-default.css. Таким образом, у меня стандартный стиль, но у пользователей также есть возможность изменять цвета. Это не только предлагает варианты для пользователя, но и позволяет легко изменять цвет, не касаясь макета (я чаще меняю свои цвета).

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

Ответ 6

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

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

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

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

Для цветов, я просто храню текстовый файл обложек. Сохранение их в отдельной таблице стилей, вероятно, будет работать только в том случае, если вы очень, очень дисциплинированы.

Ответ 7

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

.element {margin, padding, layout stuff}

.ourcolor {# some color}

Он удлиняет атрибут класса: < div class= "элемент ourcolor" >

Однако я могу повторно использовать цвет: < span class= "ourcolor" > Некоторые тексты

До сих пор я предпочитаю это, так как корректировка цветов намного проще.

Ответ 8

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

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

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

Ответ 9

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

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

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

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