一般来说,外部 CSS 文件中是否有 "order" 基础知识

Generally speaking, is there an "order" to the basics in an External CSS file

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

我大致了解继承,但我认为我下面的问题与继承无关。我只想知道 CSS 文件中是否有标准顺序?

那么,第一个问题: 在三重边框 (3 table) 布局上,为什么两位作者都有一个 table 正文 ID,然后是访问过的 link 信息,然后他们转到中间的 Table ID边框,然后 Table 最里面(内容)边框的 ID?不能把3个border ID一一列出来,然后进入link部分吗?或者 link 部分是否需要在正文部分?

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

最后,有没有一种简单的方法来比较这 2 个文件,以便我可以将需要的项目移到 1 个 CSS 文件中?

CSS 是学习门槛极低,正如你提到的,组合多个 css 类 时继承元素会变得混乱。特别是如果您将相同的元素列出两次。理清头绪可能会让人抓狂。

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

@mdo 提供了 fantastic style guide which if followed, can eliminate the issues of merging external css style sheets. mdo talks specifically about attribute order here

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

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

  • 尝试:Gtmetrix

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

  • 尝试:CSSLint

    这可能有点矫枉过正,CSSLint 是另一个在线 css 分析器。但是在它处理的许多 lint rules 中是(说明重复属性) CSSLint 座右铭是 "Linting works best when we see the big picture, so give us everything you've got." 和 "Will hurt your feelings"

  • 尝试:Stylebot

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

  • 尝试:SnappySnip

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