css - 一般来说，外部CSS文件中的基础知识是否有 "order"

Question

我刚刚在几个人的帮助下学习外部 CSS。我正在尝试比较两张纸并将其合并为一张，但因为是 2 个人写的，所以我需要整理出他们为 ID 和类提供的名称。一张纸变得非常广泛，但另一张纸有一些我想保留的更新信息。

我一般理解继承，但我认为我下面的问题与继承无关。我只想知道是否有在 CSS 文件中使用的标准顺序？

那么，第一个问题:在三边框(3 表)布局上，为什么两位作者都有一个用于正文的表 ID，后跟访问的链接信息，然后他们转到中间边框的表 ID，然后是最内层(内容)边框的表 ID？不能把3个border ID一个接一个地列出来，然后进入链接部分吗？或者链接部分是否需要在正文部分？

是否有任何我必须对这些部分使用的特定顺序，例如页面字体、H1-H6 大小、单元格表格(相对于 borer 表格)样式等？

最后，有没有一种简单的方法来比较这 2 个文件，以便我可以将需要的元素移到 1 个 CSS 文件中？

Answer 1

CSS 的学习阈值极低，正如您所提到的，组合多个 css 类时继承元素可能会变得困惑。特别是如果您将相同的元素列出两次。理清头绪可能会让人抓狂。

最佳实践设计模式(当你有奢侈的时候)是使用 css 标准并坚持下去:

@mdo 提供了一个 fantastic style guide如果遵循，可以消除合并外部 css 样式表的问题。 mdo 专门讨论属性顺序 here .

此外，请阅读 Krasimir 关于 CSSSteel 的帖子.这是关于如何处理在具有复杂 css 元素的站点中添加 css 的绝妙视角。

除了手动之外，这里有一些自动化工具可能会有所帮助:

• 尝试:Gtmetrix

  在线 css 分析器，gtmetrix 是一个 css 工具，可以自动分析网站的 css。我无法想象它是完美的，成功的程度是与 css 工作表的复杂性成正比。

• 尝试:CSSLint

  这可能有点矫枉过正，CSLint 是另一个在线 css 分析器。但是在众多lint rules它处理的是(说明重复属性)CSLint 的座右铭是“当我们看到全局时，Linting 效果最好，所以请把你拥有的一切都给我们。”和“会伤害你的感情”

• 尝试:Stylebot

  作为 chrome 插件，Stylebot 允许您选择一个元素并从编辑器中选择您想要进行的任何更改。您可以更改字体、颜色、边距、可见性等等。您也可以手动编写 CSS。这可能有助于确定合并样式表的重复问题。

• 尝试:SnappySnip

  这个 chrome 插件的优点在于，它允许您轻松地从所选元素中提取 CSS 和 HTML。然后一键发送到CodePen、jsFiddle或JSBin。