Question

我只是想知道别人在这方面做了什么：

您是否尝试将位置CSS（布局）与颜色/风味CSS（颜色，背景颜色，背景图像，字体大小和族）分开？

使用两个样式表？结合服务器端的两个样式表？ CSS的抽象层？或者你甚至不尝试？

我知道有时候在同一个网络项目上工作六个月后，我通常可以使用位置CSS但最终想要更改颜色/图像。

Answer 1

我倾向于将所有CSS保持在一起，而不将“颜色样式”与“位置样式”或“布局样式”分开。我发现当我经常尝试调试特定的“模块”时，将所有CSS规则应用于一个选择器更容易，而不是在样式表上展开。

但是，我建议您在thinkvitamin.com上阅读Creating Sexy Stylesheets。我做的一件事是每次按特定顺序列出规则，所以我知道在声明块中找到我想要的东西。

Jina Bolton的http://creatingsexystylesheets.com/

更多信息

Answer 2

你会发现，在大型项目中，布局和颜色/风味CSS（如果你很聪明的话）通常恰好是分开的。首先，如果您一次又一次地设置颜色/字体大小/字体系列样式规则，那么您就是在浪费时间。通常，您应该在一个地方定义字体：body标签。任何其他字体都应该在它们各自的标签中定义... h1，h2，p等。在我看来，给这些标签定位指令并不好。它们应放在一个负责布局的div中。颜色和字体大小也一样。我认为规则的唯一例外通常是背景材料，如果你有很多渐变和花哨的东西，尤其如此。

真正归结为规划;精心策划的项目需要很少的颜色/风味规则。所以回答你的问题，是的，我通常有一个“Global.css”文件，它定义了h1-h5，a，p以及任何其他包含文本的标签的所有字体和颜色。

编辑：

通常，由于我工作的项目规模相当大，并且有许多不同的模块，我们将这些样式分成一个层次结构;这是有道理的，因为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东西。

如果您需要更多信息，请与我们联系。我很高兴这对你很有帮助。

Answer 3

我曾经将它们分开，但维护起来比较困难。问题是许多“格式化”属性会对布局产生影响，并且实际上可能会设计许多“布局”属性。

一些例子：

虽然“border”可能被视为“格式化”属性，但它们确实占用了一些空间，因此您在设置或删除边框时需要调整布局。

“line-height”与font-size相关联，可能被视为“格式化”属性，但它会对元素的大小以及它们彼此垂直对齐的方式产生巨大影响。

布局有时需要边距和填充，有时仅用于格式化。

如果您认真考虑，很少有属性实际上是纯格式或纯粹布局。

将所有内容保存在同一个文件中并尝试通过声明命令，相关属性分组等来保持清洁，通常会更容易。

Answer 4

我将所有内容保存在一个文件中，然后使用CSSEdit中的文件夹功能使其保持整洁。网页设计公司Viget有一篇关于这项技术的博客文章here。

Answer 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中，然后颜色在style-default.css中。这样我有一个标准样式，但用户也可以选择更改颜色。这不仅为用户提供了选项，而且还可以在不触及布局的情况下轻松进行颜色更改（我倾向于更频繁地更改颜色）。

在Firefox中，我的颜色选项显示在“页面样式”下的视图菜单中。

Answer 6

我已经陷入了将CSS分成以下内容的模式：

布局（页眉，页脚，徽标 - 一般铬合金）
排版（字体，大小，可重复使用的内联字体样式）
窗口小部件

后一类通常由我在项目之间重复使用的CSS代码组成，通常会自行拆分为：

表单（左对齐，右对齐，必填字段的样式等）
网格（2-col，4-col等等 - 约20种左右）
黑客（IE /其他CSS黑客）
其他内容（AJAX小部件，工具栏，评论框等 - 任何可重复使用的内容）

对于颜色，我只是保留一个备忘单文本文件。将它们保存在单独的样式表中可能只有在你非常非常自律的情况下才有效。

Answer 7

我已经开始使用类来专门处理颜色。

.element {margin，padding，layout stuff}

.ourcolor {#some color}

它延长了class属性：＆LT; div class =“element ourcolor”＆gt;

但是，我可以重复使用颜色：＆LT; span class =“ourcolor”＆gt;一些文字

到目前为止，我更喜欢它，因为调整颜色更容易。

Answer 8

正如Mark W所指出的那样，Creating Sexy Stylesheets是一本很棒的读物。他们提倡的一件事是通过框架分离样式问题：

screen.css - 屏幕CSS文件可以包含您希望在屏幕上使用的所有样式，和/或可以导入其他样式，例如：

reset.css - 重置CSS文件可用于“重置”所有默认浏览器样式，这有助于更轻松地实现跨浏览器兼容性。

typography.css - 排版CSS文件可以定义您的字体，大小，前导，字距，甚至可能是颜色。

grid.css - 网格CSS文件可以具有您的布局结构（并通过定义基本页眉，页脚和列设置来充当您网站的线框）。



print.css - 打印CSS文件将包含您希望在打印页面时使用的样式。

如果你遵循这种模式，颜色会出现在你的typography.css中，而布局也会出现在你的grid.css中。

Answer 9

我将所有内容保存在一个文件中，并仅为其他样式提供不同的文件（例如，用于打印）。

在该文件中，我保持整体布局（列，标题和页脚）与实际内容（段落，标题，列表......）分开。

我习惯于思考面向对象，所以我将不同对象（菜单，博客文章）的样式组合在一起。从这个角度来看，颜色和位置都属于同一个对象，因此保持在一起。

我希望能够在样式表中定义一次颜色，为它们指定一个声明性名称（例如'HeadingColour'），然后在将颜色分配给选择器时使用该名称......

CSS - 颜色和位置的分离

9 个答案: