CSS - разделение цвета и позиции
Мне просто интересно, что другие делают в этом отношении:
Пытаетесь ли вы сохранить позиционный CSS (макет) отдельно от CSS цвета / аромата (цвет, фоновый цвет, фоновые изображения, размер шрифта и семейство)?
Использовать две таблицы стилей? Объединить две таблицы стилей на стороне сервера? Слой абстракции для CSS? или ты даже не попробовал?
Иногда я знаю, что после шести месяцев работы над одним и тем же веб-проектом я могу жить с позиционным CSS, но в конечном итоге хочу изменить цвета / изображения.
9 ответов
Я стараюсь держать все CSS вместе, не отделяя "цветовые стили" от "позиционных стилей" или "стилей макета". Я обнаружил, что, когда я часто пытаюсь отладить определенный "модуль", проще применить все правила CSS к одному селектору, а не распределить их по таблице стилей.
Тем не менее, я рекомендую вам прочитать " Создание сексуальных стилей" на сайте thinkvitamin.com. Одна вещь, которую я делаю, это перечисляет правила в определенном порядке каждый раз, поэтому я знаю в блоке объявлений, где найти то, что я хочу.
Больше информации на сайте Джины Болтон http://creatingsexystylesheets.com/
Вы обнаружите, что в крупных проектах макет и цвет / цвет CSS (если вы умны) обычно оказываются раздельными. Во-первых, если вы ловите себя на том, что снова и снова устанавливаете правила стиля color /font-size /font-family, вы теряете время. Обычно вы должны определять свои шрифты в одном месте: тег body. Любые дополнительные шрифты должны быть определены в их соответствующих тегах... h1, h2, p и т. Д. По моему мнению, не стоит давать эти теги позиционным директивам; они должны быть помещены в div, который будет отвечать за их расположение. То же самое касается цвета и размера шрифта. Я думаю, что единственным исключением из этого правила, как правило, являются фоновые данные, что особенно верно, если у вас много градиентов и подобных вещей.
На самом деле все сводится к планированию; Хорошо спланированный проект требует очень мало правил стиля цвета / аромата. Поэтому, чтобы ответить на ваш вопрос, да, у меня обычно есть файл "Global.css", в котором определены все мои шрифты и цвета для h1-h5, a, p и любых других тегов, которые будут содержать текст.
Редактировать:
Обычно, так как проекты, в которых я работаю, являются достаточно крупномасштабными и имеют несколько различных модулей, мы разделяем стили в некоторой иерархии; это имеет смысл из-за того, как работает CSS - до тех пор, пока вы не измените правила стиля, установленные в "base" (или в нашем случае, в 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.
Дайте мне знать, если вам нужна дополнительная информация. Я рад, что это полезно для вас.
Раньше я их разделял, но поддерживать было сложнее. Проблема заключается в том, что многие свойства "форматирования" будут влиять на макет, а многие свойства "макета" могут фактически быть дизайном.
Некоторые примеры:
Хотя свойство "рамка" можно считать свойством "форматирования", оно занимает некоторое пространство, поэтому вам нужно будет настроить макет при установке или удалении границ.
"line-height" привязан к размеру шрифта и может рассматриваться как свойство "formatting", но он оказывает огромное влияние на размер ваших элементов и их вертикальное выравнивание друг с другом.
Поля и отступы иногда необходимы для макета, а иногда используются только для форматирования.
Если вы задумаетесь об этом, то очень мало свойств, которые на самом деле являются чисто форматирующими или макетирующими.
Часто проще просто сохранить все в одном файле и попытаться сохранить его в чистоте, сгруппировав свои порядки объявлений, связанные свойства и т. Д.
Недавно я разделил стили макета и цвета, и теперь у меня есть несколько 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 мои параметры цвета отображаются в меню "Стиль страницы".
Как отметил Марк У, " Создание сексуальных таблиц стилей" - фантастическое чтение. Одна вещь, которую они защищают, - это разделение проблем стиля через структуру:
- screen.css - экранный CSS-файл может иметь все ваши стили, которые вы хотите использовать на экране, и / или может импортировать дополнительные стили, такие как следующие:
- reset.css - CSS-файл сброса может быть использован для "сброса" всех стилей браузера по умолчанию, что поможет упростить кросс-браузерную совместимость.
- typography.css - типографский CSS-файл может определять ваши шрифты, размеры, начальный, кернинг и, возможно, даже цвет.
- grid.css - CSS-файл сетки может иметь структуру вашего макета (и выступать в роли каркаса вашего сайта, определяя основной заголовок, нижний колонтитул и настройку столбца).
- print.css - файл CSS для печати будет включать ваши стили, которые вы хотите использовать при печати страницы.
Если вы будете следовать этому шаблону, цвета будут помещены в ваш typography.css, а макет будет в вашем grid.css.
Я попал в схему разделения моего CSS на следующее:
- Макет (колонтитулы, логотипы - общий хром)
- Типография (шрифты, размеры, многократно используемые встроенные стили шрифтов)
- Виджеты
Последняя категория обычно состоит из кода CSS, который я повторно использую между проектами, и обычно разделяется на:
- Формы (выровненные по левому краю, выровненные по правому краю, стили для обязательных полей и т. Д.)
- Сетки (2-х, 4-х и т. Д. И т. Д. - около 20 или около того разновидностей)
- Хаки (IE/ другие CSS-хаки)
- Другие вещи (виджеты AJAX, панели инструментов, поля для комментариев и т. Д. - все, что можно использовать повторно)
Для цветов, я просто держу текстовый файл шпаргалки вокруг. Хранение их в отдельной таблице стилей, вероятно, будет работать, только если вы очень, очень дисциплинированы.
Я начал использовать классы для обработки цветов.
.element {margin, padding, layout layout}
.ourcolor {#some color}
Это удлиняет атрибут класса, хотя:
Тем не менее, я могу повторно использовать цвет:Некоторый текст
Пока что я предпочитаю это, поскольку регулировка цветов намного проще.
Я храню все в одном файле и предоставляю только разные файлы для альтернативных стилей (например, для печати).
В этом файле я держу общий макет (столбцы, верхний и нижний колонтитулы) отдельно от фактического содержимого (абзацы, заголовки, списки...)
Я привык думать об объектно-ориентированном, поэтому я группирую стили для разных объектов (меню, записи в блогах) вместе. С этой точки зрения, цвет и положение принадлежат одному и тому же объекту и поэтому сохраняются вместе.
Я желаю иметь возможность определять цвета один раз в таблице стилей, назначать им декларативное имя (например, "HeadingColour"), а затем использовать это имя при назначении цвета селектору...