CSS - 颜色和位置的分离

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

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

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

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

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

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

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

您会发现,在大型项目中,布局和颜色/风味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东西.

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