如何重构我的CSS?

Possible Duplicate:
07000

我打算用一致的样式和连贯的CSS方案构建我的网站。但是当我微调单个页面(特别是主要的搜索表单)时,样式已经失控了。

我已经经历了这个过程,一次破坏风格,几乎从头开始重建,现在看来再次这样做了。我怎么能有效率呢?我正在寻找一种方法,而不是一个软件实用程序(虽然我可以建议,除非他们花钱…)。

补充说明:我正在使用CSS框架,很难保持填充和边距的协调。

补充说明2:对这篇文章的初步回答是关于CSS的最佳做法。我们假设我已经试图遵循最佳做法(实际上我已经做到了)。现在是我正在寻找的清理程序。

补充说明3:截至6月14日,结合this response(我刚刚发现)与我的帖子可能是一个全面的答案。

关闭注意事项

我知道我的问题太笼统,因此我希望我没有发表。 (也许这就是为什么它有一个投票…我永远不会知道没有评论来解释原因。)另一方面,我得到了我需要的,所以我很高兴我发布了。

我感到惊讶的是,我没有得到我的回答,即使是别人的无价的投入,我觉得它挺好的。

我的接受程度在很大程度上取决于答案的可用性,从我的观点来看,一个悲伤的消息是无法消化一些更加精彩和全面的反应。

封闭为精确重复

我只是试着再次发布(主题,身体,标签),看看是否会提示“如何管理CSS爆炸”的帖子。有趣的是,它没有。我将标签重构添加到该帖子。

解决方法

将您的CSS分割成单独的文件

>将一个文件放在一个文件中,重新设置CSS(如果使用的话)
>然后创建一个global.css文件,您将放置全局样式
适用于所有页面
>然后为各个页面创建单独的文件

然后开始设计您的页面样式。每次找到一个在许多页面上可重用的样式规则时,它将成为一个CSS类,并将其放在global.css文件中。避免使用css ID。你会发现你更经常地重复使用或将来会重用。在这种情况下,您将使用CSS课程。

最终你会发现在你的global.css中,你会发现CSS类规则和html标签规则。

在您的个人页面CSS文件中,您将会找到每个页面的特定样式。

这应该给你一个很好的第一级组织在你的CSS。您可以尝试通过整个开发过程保持这种分离,并且对于发布将CSS文件合并到一个并将其缩小。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效