CSS - 颜色和位置的分离

Question

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

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

使用两个样式表？在服务器端组合两个样式表？CSS 的抽象层？或者你根本不尝试？

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

Answer 1

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

不过，我建议你阅读创建性感样式表在thinkvitamin.com 的过。有一件事我做的是列出按照一定的顺序每次规则，所以我知道该声明块中在哪里可以找到我想要的东西。

在集纳博尔顿的 http://creatingsexystylesheets.com/

Answer 2

您会发现，在大型项目，布局和颜色/风味CSS会（如果你态度聪明的）通常只是碰巧是分开的。首先，如果你赶上自己一遍又一遍设置颜色/字体大小/ FONT-FAMILY样式规则，你是在浪费你的时间。身体标记：通常你应该在一个地方定义字体。任何额外的字体应该在各自的标记...... H1，H2，P等在我看来这不是好的做法，让这些标签位置指令来定义;它们应该放在一个div，将负责其布局内。这同样适用于颜色和字体大小。我认为唯一的例外通常会背景的东西，如果你有很多梯度和花哨的东西一样，这是尤其如此。

实际上它归结为是规划是什么;一场精心策划的项目需要很少的颜色/香味样式规则。因此，要回答你的问题，是的，我通常有一个“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愚蠢的东西。

让我知道如果你需要更多的信息。我很高兴，这是对您有所帮助。

Answer 3

我以前将它们分开，但它是更难以维持。的问题是，许多“格式化”属性将具有上的布局和许多“布局”的属性的效果实际上可能设计。

一些示例：

在“边界”可以被认为是“格式化”属性，他们需要的空间量，因此您需要调整您的布局设置或删除边框时。

“行高”是联系在一起的字体大小，并且可以被认为是“格式化的”属性，但对你的元件的尺寸了巨大的影响，以及它们如何垂直对齐彼此。

边距和补有时所需的布局，有时只是用于格式化使用。

如果你好好想想吧，也有极少数的属性，实际上是纯粹的格式或纯粹的布局。

只是把一切都在同一个文件中，并尽量保持它的清洁通过使你的声明的订单往往更容易一些，相关的属性组合，等等。

Answer 4

我在一个文件中把一切都在一起，并使用该文件夹中 CSSEdit ，以保持它的组织功能。网页设计公司Viget的有一个博客文章关于这项技术的这里

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 列、4 列等 - 大约 20 种左右）
• 黑客攻击（IE/其他 CSS 黑客攻击）
• 其他东西（AJAX 小部件、工具栏、评论框等 - 任何可重复使用的东西）

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

Answer 7

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

.element {保证金，填充布局东西}

.ourcolor {#some颜色}

它延长了类属性虽然：

然而，我可以重用的颜色： <跨度类= “ourcolor”>某些文本

到目前为止我喜欢它作为调整颜色要容易得多。

Answer 8

正如马克·W 指出的那样， 创建性感的样式表 是一本很棒的读物。他们提倡的一件事是通过框架分离样式问题：

• screen.css - 屏幕 CSS 文件可以包含您想要在屏幕上使用的所有样式，和/或可以导入其他样式，如下所示：
  • reset.css - 重置 CSS 文件可用于“重置”所有默认浏览器样式，这有助于更轻松地实现跨浏览器兼容性。
  • typography.css - 版式 CSS 文件可以定义您的字体、大小、行距、字偶距，甚至可能是颜色。
  • grid.css - 网格 CSS 文件可以具有您的布局结构（并通过定义基本页眉、页脚和列设置充当站点的线框）。
• print.css - 打印 CSS 文件将包含打印页面时要使用的样式。

如果您遵循此模式，颜色将位于您的typography.css中，布局将位于您的grid.css中。

Answer 9

我把一切都在一个文件中并只提供替代样式（例如，用于打印）。

不同的文件

在这个文件我保持整体布局（列，headeer和页脚）单独从实际内容（段落，标题，列表...）

我用思维面向对象的，所以I组的样式不同的对象（菜单，博客帖子）在一起。从这个角度来看，颜色和位置都属于同一个对象，并因此被保持在一起。

我希望用于向在样式表中定义一次颜色的能力，为它们分配一个声明名称（例如“HeadingColour”），然后分配颜色到选择时所使用的名称...