清理现有CSS /未使用样式的最佳实践

时间:2011-10-21 15:24:11

标签: css

  

可能重复:
  Is there any way to find unused css in a website?

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

我们可以将其设为社区维基吗?

1 个答案:

答案 0 :(得分:1)

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

使用CSS重置。

尝试删除真正的常规CSS语句,例如h1 {}#container em {}。您最好使用h1.section-title#container em.important {},因为如果您选择在文档中的某个位置使用h1em,那么您就不会这样做不得不担心覆盖任何现有代码。

如果您不需要,请不要在CSS选择器中过于具体。如果在特定部分中更改元素的显示方式,您实际上只需要具有高度的特异性。否则,为了使您的block类的代码可以重复使用,#container .content .block ...在许多情况下可以缩减为.block ...

查找CSS中的共性,看看是否可以创建可重用的类。如果您有类似的广告代码class="favorites"class="popular",请将其转为class="block block-favorites"class="block block-popular",并将共性放入.block

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

评论您的代码并将其分解为部分通常有助于使代码更具可读性。

当您实现更强大的CSS选择器时,您会惊讶于代码看起来更清晰。其中大多数是跨浏览器兼容的(IE7 +) 一些有价值的资源:When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors