CSS - 色彩的分离和位置

Question

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

你尽量保持位置CSS（布局）从颜色/风味CSS（颜色，背景颜色，背景中分离出来 - 图像，字体大小和家庭）？

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

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

Answer 1

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

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

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

Answer 2

更多的信息，我把一切都在一个文件中，只允许使用替代的风格不同的文件（例如，用于打印）。

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

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

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

Answer 3

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

Answer 4

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

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

编辑：

通常情况下，因为我工作的项目是相当大规模和有许多不同的模块，我们在某种层次的分隔方式;这是有道理的，因为CSS的工作方式 - 只要你不改变在“base”（或者在我们的例子中是global.css）的某处放置的样式规则，样式将会棒。这有助于我们修改我们网站的字体，所以我们只需在“body”标签处更改font-family规则，并将其传播到整个网站。

所以，我们的样式布局的工作是这样的：

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 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中，然后颜色风格默认。 CSS。 这种方式我有一个标准的风格，但用户也可以选择更改颜色。这不仅为用户提供了选择，而且可以轻松地在不触摸布局的情况下进行颜色更改（我倾向于更频繁地更改颜色）。

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

Answer 6

我曾经将它们分开，但它更难维护。问题在于许多“格式化”属性会对布局产生影响，而许多“布局”属性实际上可能是设计的。

一些例子：

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

“行高”与字体大小相关，可能被认为是“格式化”属性，但它对元素大小以及它们如何垂直对齐有很大影响。

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

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

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

Answer 7

我已经陷入了分离我的CSS成格局以下内容：

• 布局（页眉，页脚，徽标 - 一般铬）
• 排版（字体，大小，可重复使用的内嵌字体样式）
• 小工具

后一类一般由的CSS代码，我再利用项目之间，通常被自己劈了下来为：

• 形式（左对齐，右对齐，样式所需的字段，等）
• 网格（2-COL，4-COL，等等等等等等 - 约20个左右的品种）
• 黑客（IE /其他CSS黑客）
• 其他东西（AJAX部件，工具栏，评论框，等等 - 任何东西都可以重复使用）

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

Answer 8

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

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

.ourcolor {#some颜色}

它延长了类属性虽然： < DIV类= “元件ourcolor”>

但是，我可以重复使用颜色： < span class =“ourcolor”>一些文字

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

Answer 9

正如马克W指出的，Creating Sexy Stylesheets是一个梦幻般的阅读。有一件事他们倡导的是通过框架分离造型担忧：

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

如果按照这种模式，颜色会去你的typography.css和布局将是您的grid.css。