最佳实践 – CSS主题

前端之家收集整理的这篇文章主要介绍了最佳实践 – CSS主题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
很多时候,当我为客户设计网站时,我使用构成整个表示层的一个(或多个)CSS文件来设计他的网站。通常情况下,客户的需求在“网站主题”方面发生了巨大变化。他最终可能会根据自己的口味要求从基于蓝/绿色的主题改为基于红色/橙色的主题。问题是,我的文件包含所有信息,包括

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

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

我的可能做法清单如下:

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

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

>使用SASS,(最好用Compass @see Andrew Vit撰写)特别是他们的“Mixins”功能。它需要CSS并引入了一种非常干燥的程序化方法。您可以使用它覆盖现有的类。 –treefrog
>使用OOCSS方法。 –Andrew Vit
>一种名为independent blocks(俄语文章)的技术,它使用类前缀模拟一种命名空间来分隔特定的块。 –angryobject
>三种基础样式表。分离排版,位置和由Eric Meyer. –David Thomas提供的重置样式表
>使用已知组织使用的标准化方法,例如Dojo库,jQuery UI等。
S .Jones

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

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

解决方法

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

Link

猜你在找的CSS相关文章