20

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

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

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

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

4

9 回答 9

11

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

但是，我建议您在 thinkvitamin.com 上阅读创建性感样式表。我要做的一件事是每次都按特定顺序列出规则，这样我就知道在声明块中可以在哪里找到我想要的东西。

更多信息在 Jina Bolton 的http://creatingsexystylesheets.com/

于 2009-01-30T15:37:31.250 回答
5

你会发现在大型项目中，布局和颜色/风格 CSS（如果你很聪明的话）通常恰好是分开的。首先，如果您发现自己一遍又一遍地设置颜色/字体大小/字体系列样式规则，那么您就是在浪费时间。通常你应该在一个地方定义你的字体：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 东西。

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

于 2009-01-30T15:49:13.113 回答
3

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

一些例子：

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

“line-height” 与 font-size 相关联，可能被视为“格式”属性，但它对元素的大小以及它们如何垂直对齐有很大的影响。

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

如果您仔细考虑一下，实际上很少有属性是纯格式或纯布局的。

将所有内容保存在同一个文件中并尝试通过将声明顺序、相关属性分组等来保持它的整洁通常更容易。

于 2009-01-30T16:36:08.840 回答
2

我将所有内容放在一个文件中，并使用CSSEdit中的文件夹功能使其井井有条。网页设计公司 Viget 在这里有一篇关于这种技术的博文。

于 2009-01-30T15:42:36.670 回答
1

我最近分离了我的布局和颜色样式，现在我有几个 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 中，我的颜色选项显示在“页面样式”下的视图菜单中。

于 2009-01-30T16:07:58.287 回答
1

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

  • 布局（页眉、页脚、徽标 - 通用 chrome）
  • 排版（字体、大小、可重复使用的内联字体样式）
  • 小部件

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

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

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

于 2009-01-30T16:55:52.107 回答
1

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

.element{margin, padding, layout stuff}

.ourcolor{#一些颜色}

它虽然延长了类属性：< div class="element ourcolor">

但是，我可以重复使用颜色：< span class="ourcolor" >Some text

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

于 2009-01-30T17:01:19.227 回答
1

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

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

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

于 2009-01-30T18:23:58.887 回答
0

我将所有内容保存在一个文件中，并且只为替代样式（例如打印）提供不同的文件。

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

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

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

于 2009-01-30T15:38:56.147 回答