清理现有CSS/未使用样式的最佳做法 [英] Best Practices for Cleaning up Existing CSS/unused styles

问题描述

可能重复:
可以通过任何方法在网站?

我正在寻找有关如何清理现有样式表以及内联样式的最佳实践.我现在有一些样式表，我想清理一下膨胀，以便将来可以更容易维护.

I'm looking for best practices on how to clean up existing style sheets and also inline styles. I have some style sheets in existance, and I'd like to clean up the bloat so they are more maintainable in the future.

我们可以使它成为社区Wiki吗?

Can we make this a community wiki?

推荐答案

关于CSS的最佳实践方法可以说很多.我会坚持要点.

There is so much that can be said about best-practice methods for CSS. I'll try to stick to the main points.

使用CSS重置.

尝试删除真正通用的CSS语句，例如 h1 {} 和 #container em {} .您最好使用 h1.section-title 和 #container em.important {} ，因为如果您选择使用 h1 或 em 在文档中某处的另一种方式，您不必担心会覆盖任何现有代码.

Try to remove really general CSS statements like h1 {} and #container em {}. You're much better off using h1.section-title and #container em.important {}, because that way if you choose to use h1 or em a different way somewhere in your document, you don't have to worry about overriding any existing code.

如果不需要，在CSS选择器中不要太具体.实际上，只有在特定部分中更改元素的显示方式时，才需要具有高度的特异性.否则，为了使您的 block 类的代码可重用，可以将 #container .content .block ... 简化为 .block ... 在许多情况下.

Don't be too specific in your CSS selectors if you don't have to. You really only need to have high degrees of specificity if being in a specific section changes how the element is going to be displayed. Otherwise, to make your code for your block class reusable, #container .content .block ... could be reduced to .block ... in many cases.

在CSS中查找通用性，看看是否可以创建可重用的类.如果您有类似的代码块 class ="favorites" 和 class ="popular" ，请将其转换为 class ="block block-favorites" class ="block block-popular" ，然后将通用性放入 .block .

Look for commonalities in your CSS and see if you can create reusable classes. If you have similar blocks class="favorites" and class="popular", turn it into class="block block-favorites" and class="block block-popular", and put the commonalities into .block.

养成使CSS中的区域具有自动宽度(可以隐式完成)的习惯，以使它们增长到容器的宽度.这使得将部分从网站的狭窄部分移动到网站的大部分变得非常容易，而无需更改任何代码.

Get in the habit of making areas in your CSS have an auto-width (can be done implicitly) so that they grow to the width of your containers. This makes it incredibly easier to move sections from a narrow portion of your website to a wide portion of your website without having to change any code.

注释您的代码并将其分为多个部分通常有助于使代码更具可读性.

Commenting your code and breaking it down into sections usually helps make code more readable.

当您实现更强大的CSS选择器时，您会惊讶代码看起来更干净.它们大多数都与跨浏览器兼容(IE7 +).
一些有价值的资源: 我什么时候可以使用... -

You'd be surprised how much cleaner your code looks when you implement more powerful CSS selectors. Most of them are cross-browser compatible (IE7+).
Some valuable resources: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

这篇关于清理现有CSS/未使用样式的最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！