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

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

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

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

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

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

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

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

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

Я недавно разделил свое расположение и цветные стили, и у меня теперь есть несколько файлов 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 мои параметры цвета обнаруживаются в меню представления под "Стилем страницы".

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

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

Редактирование:

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

Так, наши разметки таблицы стилей что-то вроде этого:

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.

Сообщенный мне, если Вам нужно больше информации. Я рад, что это полезно Вам.

Я следовал модели выделения моего CSS в следующее:

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

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

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

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

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

.element {поле, дополнение, материал расположения}

.ourcolor {#some цвет}

Это удлиняет атрибут класса хотя: < класс отделения = "элемент ourcolor">

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

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

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

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

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

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

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

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

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