我刚从伦敦回来，在那里我在未来网络应用大会上发表了演讲。 我的演讲题目是“写出更好的 HTML & CSS”，听起来很普通。 幻灯片无法与真实的演讲相比，但我还是喜欢发布它们，以防其中包含一些有用的内容：
这是一场三部分的演讲。 我从高层次谈论 Wufoo 如何处理 CSS，这是一个我希望更多人谈论的话题（例如，中等/大型公司在前端资源方面的规划/方法/架构）。 然后，我谈论了如何编写更不具体、更友好的 CSS 选择器，以通过避免自相矛盾的方式使我们的生活更轻松。 最后，我深入浅出地介绍了我的伪元素演讲的修改版。
此外，我在上面嵌入了来自 Speaker Deck 的幻灯片，这是一个由 Ordered List 团队创建的非常简洁漂亮的网络应用程序，用于分享幻灯片。
感谢分享。 有计划发布视频吗？ 将您的文字和想法与幻灯片一起展示将非常有用。
也许吧，但可能不会发布视频。 别担心，我将来可能会再做几次这个演讲，它会变得更好，也许其中一个会公开录制。
好的，Chris，谢谢。 我看到了圣杯图像（以及其他图像），非常想听听你舞台上的表现。
感谢分享。
太棒了！ 我很想看或听配套的视频/音频。 谢谢，Chris！
真的很享受。 现在肯定要重新考虑一些问题了。
同意，视频会有帮助，但我感觉那不在你的掌控之中。 :)
不过，我还是从幻灯片中学习了一些东西。 我可能爱上了伪元素。 :D
我不想深入探讨，而且我可能也错了，但我从这些幻灯片中看到的一点是，这些建议似乎适合那些还在努力使用动态服务器页面的人。
我的意思是，在 200 个地方高效的一种方法是利用任何服务器端语言来动态生成代码。
用一个类和一些 CSS 添加的内容替换一个元素会增加复杂性，最终结果充其量是值得怀疑的。
这对我来说就像是一种强迫性的思考方式，为了在桌面上呈现出与众不同的东西。 嗯，与众不同并不一定更好。 至少它看起来并不更简洁。 对我来说 :)
“带有图标的按钮”是否是你要传达的内容的一个不幸的案例研究？
除了明显的差异之外，为什么 CSS :before 比 CSS 背景更好？
按钮的背景是渐变。 你无法通过附加类向元素添加额外的背景图像。 此语法即将推出，但目前不可用。
关于你的第一个评论，我不明白你在说什么。 可能很难只通过幻灯片理解我的观点。
啊，我明白了。 你在那里解决了一个混合背景（图像 + 渐变）的问题。
我不信服。 你首先错误地创建了这个问题，因为你选择了将 img 元素添加到锚点的背景中来支持你的渐变选择。 我不会那样做，所以我一开始就不会遇到这个问题。
此外，你的 IE7 7% 将看不到任何内容。 同时，使用 img 和自定义 IE .Microsoft.gradient 将为 IE 提供完整的体验。
关于我的第一个评论：只有那些没有使用任何服务器端语言的人才需要在样式更改时进行 200 次修改。 那些使用服务器端支持语言的人不会遇到这个问题，因为他们的代码不是静态的。
HTML 就是 HTML。 无论它是由服务器端花哨的东西生成还是其他方式生成，都没有关系。 如果服务器端花哨的东西生成了 200 行不需要的 HTML 代码，那仍然不好，如果你可以将其抽象到 CSS 中，那就很好。 我明白你的意思，但这并不算什么大问题，也很容易修复。
伪元素部分演讲的总体概念是，任何“设计花哨”但没有语义/内容价值的东西都是从标记中取出并放入 CSS 的绝佳选择。
让我看看
你是说通过用 CSS 生成 *内容*，你就可以为 *表现* 目的编写更少的 HTML 代码？！
我仍然认为你没有以最佳方式解决问题 :)
或者，至少，你试图解决的 img 解决方案一开始就不应该被认为是可行的。
1. 用 CSS 生成 HTML 内容：一个可能的更清晰的标记源；额外创建的标记最终会出现在 DOM 中（嗯，有点，但将来可能也会改变）；关于编码和内容与样式之间分离的非常模糊的领域
2. 用服务器端生成 HTML 内容：一个明确的更清晰的标记源；增加了功能；额外创建的动态标记最终会出现在 DOM 中；编码和内容与样式之间的明确分离
前提仍然是使用 img 来解决问题只会创造另一个问题，这将是一个可行的解决方案 ;)
出于好奇，你穿的还是同一件衬衫吗？
哈哈！
太好了，我希望有视频或音频出现。
喜欢你所有作品中都流露出来的幽默感，Chris。 网页开发者可能会（这并不总是真的，但有时确实如此）比较枯燥，但你绝对不是！
和其他人一样，我也很喜欢听音频，因为你有一种独特的幽默感，除此之外，我很喜欢这些幻灯片。
SpriteCow.com - 我想不起来，谢谢！
不错的图形幻灯片。 干得好！
OMG！ 这太精妙了。 我可能在 .NET 和 IIS 中实现了类似的策略。 Chris，你的新网站主题只附加了一个样式表。 你在这里也使用过同样的技术吗？
Chris，有机会让我获得 AutoVersion.php 文件来玩玩吗？ 如果它能处理我项目中有时需要的各种 .css 文件，而无需在我的 html 中创建一个巨大的混乱代码块，那就太好了。 你知道它是否会遍历这些文件并收集单个 css 文件，还是你必须在其中硬编码它们？
我在 AutoVersion.php 上搜索了一下，找到了一些有用的信息。 “在运行时压缩 css”。 Chris，这里的想法很棒（和往常一样）。 谢谢。
我们将来应该讨厌 ID 选择器吗？
哇，Chris。一如既往，您的信息棒极了！我从未想过使用 :before & Content 来制作一个超级酷的按钮！您会去加拿大演讲吗？:) 另外，您小时候的照片也很酷。
有用的文章，谢谢。
Chris，你能发布 AutoVersion.php 的链接吗？谢谢。
有人有帖子中提到的 AutoVersion 类吗？
哪里有点赞按钮？感谢分享！
+1
这个很棒，也很有趣！:o)
我也对获取您版本的 autoversion php 函数（它是否也压缩 CSS？）以及演示文稿的音频感兴趣。
我在 YouTube 上观看了您关于 :before 和 :after 伪元素的演讲，现在我更了解幻灯片了，但音频会很棒。
是否有关于您在 .htaccess 文件中所做的操作的逐步教程，以便仅将每个页面内的必要 CSS 文件包含在内？
使用伪元素添加内容让我大开眼界。很棒的幻灯片，Chris——希望我当时能够到场！
太棒了！感谢分享。学到了很多。现在要练习并应用我学到的东西。
感谢分享！您的演讲很棒。我本想今年参加 FOWA，但最后我的公司没有为此支付费用。:P
喜欢第 55 张幻灯片！我从未想过可以在“内容”中包含图像路径！
嗨，Chris，很棒的幻灯片。我们一直在尝试拆分 CSS 文件并使用自动版本控制脚本。您有机会将其发布在 GitHub 上吗？这将非常棒！再次感谢，期待听到演示文稿的音频或视频。
Jenny
差点忘了，我也想看看您创建的 Smarty 自动版本控制函数。谢谢，Chris！