【问题标题】:CSS - Separation of Color and PositionCSS - 颜色和位置的分离
【发布时间】:2010-10-04 11:58:59
【问题描述】:

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

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

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

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

【问题讨论】:

  • 一个有趣的问题。我实际上并没有考虑过这个......我期待看到答案:) +1
  • 我看到哪个项目允许您在 CSS 中放置变量?喜欢命名自己的颜色?那是从 Ruby 世界出来的吗?也许 Rubyist 可以启发我。
  • @Bruno - 我想你说的是 SASS,它是 HAML 的 CSS 对应物,一种 Ruby 模板语言。它确实对 CSS 变量和宏有基本的支持。 haml.hamptoncatlin.com

标签: css themes color-scheme dynamic-css


【解决方案1】:

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

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

更多信息请访问 Jina Bolton 的http://creatingsexystylesheets.com/

【讨论】:

  • 哦,顺便说一句,在 Scripps (foodnetwork.com, hgtv.com),我们根据它们的用途(即 header.css、footer.css、search .css)并在将它们推送到生产之前将它们连接到开发服务器上。
  • @Mark W:你有什么特别的方法吗?我一直在考虑这样做,然后通过缩小器传递它。您使用的是简单的脚本还是软件包?
  • 马克,斯克里普斯实际上是我们的客户之一 :) 小世界!
  • @Ross:我们的前端服务器上有一个脚本,它获取所有这些单独的 CSS 文件,然后通过 CSS 压缩器将它们推送,然后将它们连接到一个文件中。然后我们获取该文件的输出并将其用作我们的生产样式表。 @Plan B:酷!
  • 这周我得在家多看看这个网站。不幸的是,网站名称/URL 对代理不太友好。
【解决方案2】:

您会发现,在大型项目中,布局和颜色/风格 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 文件时,我们几乎没有要编写的样式,因为大多数其他重要的东西实际上已经自行解决了。

就像我说的,计划非常重要。我发现这种方法可以更轻松地“调试”我的样式,而且我几乎不使用任何 hack,通常只用于愚蠢的 ie6 东西。

如果您需要更多信息,请告诉我。很高兴这对您有帮助。

【讨论】:

  • 这确实有帮助。您能否更新您的答案以包含其他一些细节?就像它没有进入 global.css 它去哪里?您对文件有哪些命名约定。
【解决方案3】:

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

一些例子:

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

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

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

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

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

【讨论】:

    【解决方案4】:

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

    【讨论】:

    • +1 - 我对注释部分做了类似的事情 - 虽然,我没有一个编辑器可以对这些信息做任何事情。我是 Windows / Linux 人,对于这些平台有什么类似 CSSEdit 的吗?
    【解决方案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 中,我的颜色选项显示在“页面样式”下的视图菜单中。

    【讨论】:

    • +1 - 我以前没有见过这种“备用样式表”的东西。仅适用于 Firefox 吗?我看过一些博客/网站,他们(开发人员)在其中更改样式表参考服务器端以允许用户选择自己的配色方案。
    • 这对备用样式表有很好的解释。 alistapart.com/articles/alternate
    • 其他样式表也可以在 Opera 中使用(是的,不是最常见的浏览器 - 但它是我使用的浏览器 ;-)
    【解决方案6】:

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

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

    后一类通常由我在项目之间重复使用的 CSS 代码组成,并且通常会被拆分为:

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

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

    【讨论】:

      【解决方案7】:

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

      .element{margin, padding, layout stuff}

      .ourcolor{#some color}

      虽然它延长了类属性:

      但是,我可以重复使用颜色: 一些文字

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

      【讨论】:

        【解决方案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中。

        【讨论】:

        • 我对我的公司如何将我们的样式表连接在一起的回答发表了评论。我建议您在生产站点上做类似的做法,因为每个 @import 都是一个额外的 HTTP 请求,会减慢页面加载时间。
        • +1。我喜欢这些想法。我还没有开始使用reset.css。以前看过。不过,我可能会在下一个项目中尝试一下。
        【解决方案9】:

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

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

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

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

        【讨论】:

        • 我也喜欢这种风格。也许只是 CSS 文件会变得如此庞大且难以维护。我认为我认为许多更好的 WordPress 主题都使用这种 CSS 样式。 (+1)
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-04-27
        • 1970-01-01
        • 2021-06-04
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多