我如何重构我的CSS？

Question

可能重复:
如何管理CSS爆炸

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

我已经完成了一次破坏样式和几乎从头开始重建的过程,现在看起来是时候再次这样做了.我怎么能有效率呢？我正在寻找一种方法,而不是软件实用程序(虽然我愿意接受那些建议......除非他们花钱......).

补充说明: 我使用的是CSS框架,很难保持padding和margin协调.

补充说明2: 此帖子的初始回复是关于CSS的最佳做法.我们假设我已经尝试过遵循最佳实践(事实上,我做过).现在这是我正在寻找的清理程序.

添加了注释3: 截至6月14日,将此回复(我刚发现)与下面的帖子相结合可能是一个全面的答案.

关闭说明:

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

我很惊讶我没有对我的答案进行投票 - 即使有其他人无价的投入,我认为它很好.

从我的观点来看,我的接受主要取​​决于答案的可用性 - 这一观点令人遗憾地无法消化一些更令人兴奋和全面的答案.

作为完全重复关闭

我只是尝试再次发布这个(主题,正文,标签),看看是否会建议帖子"如何管理CSS爆炸".有趣的是,它没有.我在refactoring该帖子中添加了标签.

Answer 1

将您的CSS拆分为单独的文件.

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

然后开始设置您的页面样式.每当您发现可在多个页面上重用的样式规则时,请将其设置为CSS类并将其放在global.css文件中.避免使用css ID.您会发现您经常会重复使用或将来重复使用.在这种情况下,您使用课程CSS类.

最后你会发现在你的global.css中你会发现大多数CSS类规则和html标签规则.

在您的单个页面CSS文件中,您将找到每个页面的特定样式.

这应该会为您提供CSS中良好的第一级组织.您可以尝试在整个开发过程中保持这种分离,并且对于发行版,将CSS文件合并为一个并缩小它.

Answer 2

我的2p值得关于css清理,来自之前的类似问题: 清理和维护大型css文件的提示

希望这可以帮助你和别人的答案!

1. 开始分支项目(这里我假设您使用的是版本控制工具) - 这将允许您独立玩代码并标记您将达到的任何里程碑.

2. 使用美化器格式化您的CSS - 它将提高可读性并有助于搜索特定声明而不会遗漏任何实例.

3. 尝试识别未使用/冗余的CSS并摆脱它.

4. 你可以尝试让你的选择器更短(例如.main .foo .bar可能没那么好.bar) - 它会提高可读性并提高性能,但是如果事情开始就准备好了在你采取的每一步中打破.

5. 尝试消除,如果可能,任何!重要 - 如果需要,使选择器更具体.如果大多数重要的声明用于修复特定于浏览器的问题,那么css重置可能会有所帮助,否则现在引入css重置可能会增加更多问题而不是解决它们 - 如果您的应用中没有css重置所有.

6. 将css分解并重新组合成不同的模块(如果有帮助则将文件重新组合) - 面向对象的CSS是一种可以使事物更易于维护的技术,如果你从它开始它最有效,但它也可以帮助你进行重构.https://github.com/stubbornella/oocss/wiki是一个有效的,但有一些替代方案,你可以考虑,如SMACSS.

7. 在那之后,您可以考虑使用诸如Less或Sass之类的css预处理器,允许您定义变量和mixins(类似于函数),模块化等等 - 这可能最终成为一项非常昂贵的任务,因此请仔细评估是否会给你带来比痛苦更多的好处.

8. 尽可能多地进行测试,考虑单元测试以确保您所做的任何更改不会破坏其他任何地方.

9. 有时重写一切可能比重构更省时,所以如果你的评估表明重构不会带来足够的好处,所以不要害怕保留原样.

编辑

事情发生了变化,并且发展顺利; 关于OOCSS/SMACSS方法,我很高兴地关注了一段时间,Yandex的 CSS 的BEM方法,我想将其作为上述的附加建议添加到上面