最佳实践 - CSS主题

Question

很多时候,当我为客户设计网站时,我使用构成整个表示层的一个(或多个)CSS文件来设计他的网站.通常情况下,客户的需求在"网站主题"方面发生了巨大变化.他可能会根据自己的口味要求从基于蓝/绿色的主题改为基于红色/橙色的主题.问题是,我的文件包含所有信息,包括:

• 元素的定位
• 容器的背景图像
• 字体大小,颜色

什么是"解耦"CSS文件以使其"主题"意识到的最佳实践,同时保持其所有关于定位的信息？

我的可能做法清单如下:

1. 使用包含通用信息和定位的默认CSS文件,使用仅实现背景图像,字体大小和颜色的子CSS文件
2. 命名你的第一个CSS文件(比如说蓝色/绿色的文件名为"sky").实现基于天空的另一个主题,覆盖更改主题所需的任何CSS属性并命名它(例如,红色/橙色将是"深红色").

编辑:根据下面提供的很好的答案,我更新了我的列表中的其他可能的解决方案列表:

1. 使用SASS(最好用Compass @see Andrew Vit撰写)特别是他们的"Mixins"功能.它需要CSS并引入了一种非常干燥的程序化方法.您可以使用它覆盖现有的类.- treefrog
2. 使用OOCSS方法.- 安德鲁维特
3. 一种称为独立块(俄语文章)的技术,它使用类前缀模拟一种命名空间来分隔特定块.- angryobject
4. 三种基础样式表.分离排版,位置和Eric Meyer提供的重置样式表.- 大卫托马斯
5. 使用已知组织使用的标准化方法,如Dojo库,jQuery UI等.
   - S .Jones

在哪种情况下哪个更好？还有其他易于维护和灵活的方式吗？

迄今为止的最佳答案:使用SASS制作非常灵活的样式表.当然,这意味着轻微的学习曲线,但根据一些评论,SASS似乎是动态样式表(以及HAML)的下一个方法.

Answer 1

您应该查看SASS,特别是他们的"Mixins"功能.它需要CSS并引入了一种非常干燥的程序化方法.您可以使用它覆盖现有的类,使其非常适合我认为您正在尝试的内容.

链接