重新学习CSS的正确方式

Question

我是一名程序员，已经从事网站开发工作超过两年。虽然我过去两年一直在从事前端工程，但我并不认为我做得正确。

例如：

• 我仍然使用表格而非纯CSS来进行布局。我仍然没有找到正确呈现数据对齐和表格化的方式。
• 我不知道display: none和visibility: hidden之间的区别（好了，我现在知道了。但有很多类似的情况-填充、边距、溢出等）
• 我几乎没有遵循继承的方式来编写CSS。几乎每种样式都以#而不是类开始。
• 每当页面加载缓慢时，HTML元素就会脱离原位，只有当页面完全加载后才会排序。
• 我不知道火狐浏览器中的这张图片传达了什么信息（顺便说一句，Firebug是我的救星。如果没有Firebug，生活将是不可能的）

• 每当布局混乱时，我就会想要使用position:absolute。但最终会导致更大的混乱。

我知道我做了很多错误的事情（我需要把它做对），但我设法将事情放到正确的位置，并以某种方式展示出来，只是看到在不同浏览器中混乱了。

我不想进行CSS初学者指南或CSS入门教程。我知道更多。我想学习正确的CSS。专注于像我上面所示的例子的问题并加以纠正。

你能给我指点资源或添加CSS开发人员常用的建议和技巧，以正确地处理这些问题吗？

- Quintin Par

---

你的第一点有些自相矛盾。标记数据正是HTML表格标签的用途。如果要显示数据，请使用表格。如果要布局页面元素或为表格添加其他装饰，则可以考虑使用CSS。 - tschaible

@tschaible，我不知道正确的术语来表达我的意图。你是对的，我正在尝试做布局。 - Quintin Par

Answer 1

请查看由杰弗里·泽尔德曼（Jeffrey Zeldman）撰写的《设计与Web标准》。

- Daniel Pryden

---

这背后有个有趣的故事。在看到这篇答案受到关注后，我通过他的网站联系了 Zeldman，请他回答这个问题。他回复邮件说，这正是他刚开始时所面临的问题。他回答：“我希望我能在你的网页上用一两个评论来回答您的问题，但我不能。我确实在《设计Web标准》中回答了这些问题（以及更多问题），特别是在即将在两天内推出的全新第三版中。将您的地址发送给我抄送此电子邮件的绅士，我们会确保您获得一份免费副本。” 这本书非常棒，必须拥有！ - Quintin Par

考虑到这本书是十年前写的，它仍然是最值得开始的地方吗？ - Tristan Warner-Smith

@TreeUK：第三版于2009年发布，时间并不算太久远。这是一个好问题，现在可能有更好的学习CSS的书籍，但我不知道有哪些。 - Daniel Pryden

Answer 2

以下是一些通用的规则：

• 表格适用于表格数据。如果您要呈现的数据应该放在表格中，请不要费力地将其转化为<div>的网格布局，这没有意义。
• 就布局而言，使用<div>标签，远离表格。好好熟悉float属性。随着CSS3的发展，display属性的标准也会有新的改进。学习它们。
• display: none完全将元素从视口中移除。相反，visibility: hidden则保留了元素原本所占据的空白空间。在两种情况下，元素仍然存在于DOM中。
• 关于类和ID的通用规则。页面元素和ID应该在每个页面上具有一对一的关系。例如，#Column1、#Column2、#Footer、#Header。另一方面，页面元素和类应该是多对一的关系，比如：.container或.navLink。当您知道自己会经常使用特定元素时，请使用类。
• 以效率为出发点。样式规则越少，页面加载速度就越快，同时样式问题也更容易调试。

我还有无数其他的建议，但是这应该可以让您有一个好的起点。

- Bryan A

Answer 3

关于以布局驱动的CSS，请务必查看《Everything You Know About CSS Is Wrong》。这本书有点前卫，因为IE 7不支持display：table（我知道很可惜），但它确实涵盖了传统布局CSS技术，例如浮动和绝对定位，并提供了从基于表格的布局向CSS布局的良好过渡。我强烈推荐。

我不知道您是在使用任何动态语言构建还是只是编写原始HTML，但您应该考虑在项目中使用SASS，因为我认为它有助于迫使您更加关注继承。否则，回顾更多“基础”教程（例如CSS for Dummies）可能会有所帮助，因为它们详细介绍了CSS的许多基本原则。

最后，当您拥有语义正确（x）HTML时，CSS可以发挥最佳效果。在我的观点中，当您拥有良好的语义正确HTML时，最容易看到和学习“好”的CSS。这里有关于何时使用哪些标记的很好的概述。通常，我发现最好先完全不考虑以后它将如何呈现我的内容，然后稍后使用CSS使其美观。

像往常一样，您可以在CSS Tricks上学习很多有用的技巧和窍门，这总是帮助我学习语言的正确用法（就像我学到overflow: auto用于包含浮动元素！天才！）。

希望这有所帮助！

- neezer

Answer 4

1. 访问CSS Zen Garden，了解仅使用CSS可以做什么。

2. 访问W3 schools并按照教程进行学习。这可能对您来说很简单，但您将学习基础知识。

3. 访问一些网站，如A list Apart，了解如何实现某些功能并学习技巧。

4. 看看是否需要使用CSS框架（例如960 Grid）来满足您的需求。

- Anax

---

+1 for CSS Zen Garden 和 A List Apart -- 二者都是非常好的资源。 - Daniel Pryden

Answer 5

我假设您已经安装了Firebug？

另外，http://www.doctype.com 或许会得到更相关的结果。

- Dean J

---

嗯，doctype很难用而且通常答案不太有帮助。我希望SO建立一个HTML/CSS交流平台，评论、徽章，整个系统都非常出色几乎无瑕疵。 - eozzy

Answer 6

练习，练习，再练习。你知道自己不懂的是成功的关键所在。每个项目都要尝试提高技能水平，最终做正确的事情就会变得轻而易举。

Eric Meyer的Cascading Style Sheets 2.0 Programmer's Reference 是一个很好的资源，可以帮助您了解选择器和规则的工作原理，并作为一个很好的参考资料。

以下是对您发布内容的一些想法。

• 使用Master Reset样式表可以帮助解决浏览器差异问题。

• 表格数据应该使用表格标签。布局应该避免使用表格标签，而是使用CSS。

- Matthew Vines

---

E.Meyer 是大师 :) - ChrisR

Answer 7

这里有很多人都提供了好的建议，我只想再补充两点：

• 首先，尽量编写有效的(X)HTML。您可以使用W3C的HTML验证器轻松测试您的HTML代码。主要关注内容而不是样式。
• 其次，尝试编写有效的CSS，最好在单独的.css文件中。避免使用style属性。（如果您想支持来自Redmond的某些旧浏览器，则此部分可能很难）。您可以使用W3C的CSS验证器测试您的CSS。

- Stephan202

Answer 8

阅读Eric Meyer的CSS权威指南。他解释了为什么创建了CSS，它如何工作（根据标准），并将为您提供理解更细微的要点的背景知识。它还是一个很好的参考资料。

- Nathan Long

Answer 9

在Firebug中进行实验

我不知道Firebug中的这张图片是在传达什么信息

Firebug本身可以帮助你。按照以下步骤：

• 创建一个带有一些文本的div。
• 使用CSS为其设置 padding: 5px; margin: 5px; border: 1px solid black;
• 像你在问题中展示的那样，在Firebug中检查它。
• 点击盒模型中的任何一个数字，然后开始按上下箭头（或键入不同的数字）。
• 看到它实时变化了吗？这是Firebug最好的功能之一：它让你在不重新加载页面的情况下进行调整，然后在看起来正确时修改你的样式表。
• 继续这样做，直到你理解填充、边距和边框的工作原理。

- Nathan Long

Answer 10

我认为你应该使用所谓的"CSS框架"（例如960.gs）来满足你的布局需求。

它们足够快速和可靠，可以构建跨浏览器的布局，并且易于阅读和理解，因此您可以在编码时学习所有良好的实践。

CSS很容易，不是真正的编程语言：不要害怕"框架"这个词 ;)

- gbr