假设您正在为网页的模块化部分创建一个 CSS 文件。 也许您是将 CSS 文件分成 header.css、sidebar.css、footer.css 等部分的人。 我偶然发现了一个我认为很聪明的主意，即您可以在 CSS 文件顶部将要进行样式化的基本标记包含为注释。 例如，sidebar.css 文件可能如下所示
/*
<aside>
<div class="widget">
<h5 class="widget-title">
<p></p>
</div>
<!-- other widgets -->
</aside>
*/
aside { background-color: #ccc; }
aside .widget { background-color: white; padding: 10px; }
aside .widget h5 { border-bottom: 1px solid black; }
/* etc. */这可能对您自己有用，因为您需要在查看标记和此 CSS 文件之间来回切换的次数更少。 当以下情况发生时，这更有用
- 标记由 JavaScript 生成，很难在其他地方看到，或者
- CSS 特定于插件或第三方附加组件
我从 mediaelements.js 的 CSS 文件 获得了这个想法，我认为这是一个完美的用例示例。
好主意。 我通常在我的大部分工作中使用单个样式表，但我通过显示带有每个 CSS“部分”层次结构的注释来做类似的事情。
很有道理，尤其是当您使用语法类似的 zencoding 时。
难道不会造成很多维护开销吗——在实际 HTML 更新时更新注释，在使用该 CSS 部分的其他地方添加实例……
现在，如果您能构建一个工具，该工具可以在 CSS 编辑器中从 CSS 追溯到 HTML，那么我就会喜欢使用它 :-)
我相信，如果有一个工具可以自动执行此操作，人们就会抱怨开销。
是的，这将需要维护。 如果这不能让您自己或您提供代码的人更容易，就不要这样做。
好吧，该工具可以将该 HTML 代码添加为 CSS 代码的工具提示，这样就不会太麻烦人们了……
我认为这个想法很好，只是让代码的可扩展性和与他人共享性降低。 我记得一位讲师告诉我，糟糕的/误导性的评论比没有评论更糟糕。 一旦您扩展/共享代码，就很容易进入一个有很多糟糕评论的地方。
很有趣的想法，但如果您在整个 CSS 中使用它，然后更改标记，那么您也必须更改注释，这实际上是让工作量翻倍。
我不确定复制/粘贴是否真的让工作量“翻倍”。 但在您可以投入很少时间/天的个人小型项目中，这可以让您更容易地重返工作。
感谢您的 RT 按钮，克里斯
有趣且简单的想法，我同意安吉洛的说法，这个想法让事情变得更容易，我认为它有助于从头开始编写 CSS 且没有错误。
好主意。 我在 Coda 中使用拆分视图，因此我不必来回切换，一旦您习惯以这种方式打开文件，它确实可以节省时间。
有趣的想法，但您不应该根据 HTML 顺序排列 CSS 吗？ 此外，一致的 ID 和类命名将有助于“猜测”选择器。
实际上，您只需要记住那个例子中的
您不需要对 h5 进行分类，因为您可以从级联中连接它
aside .widget h5 {
这里的东西
}
您的其他小部件最好相同，或者可以用类似的东西进行扩展
CSS 中的注释用于分隔部分、浏览器黑客/变通方法/WTF 是这个，而不是标记。
我喜欢那个想法，不确定它会增加多少代码膨胀，但适度使用我认为很棒
我在一个大型企业网站上继承了这种东西，我认为它将是一个有用的工具，可以了解我正在处理什么，但我不得不说是，虽然它在理论上很有用，但在生产环境中并不那么实用。
不过，我会说它可能有一些用途，正如 Chris 在上面所说，如果你不想使用它，就不要使用它。
在真实的生产环境中，这没有任何意义。 但是，它确实有助于开发环境。 当您被要求处理随机部分时，添加这样的注释确实有助于其他团队成员以及继承您应用程序维护的人员。
请注意，在真实的生产环境中，您的 CSS 是被最小化的，对吗？ 这将删除所有注释。
在 CSS 文件中添加标记并不会提高其可读性。 我也是坚信好的代码不需要很多注释的人。 如果你想在代码中放置注释，你首先应该问问自己，是否不能简化代码，而不是编写解释性注释。
有很多因素，假设您知道您的代码会被很多新手查看，并且您希望他们理解，那么您就会解释它，并且能够在 CSS 旁边查看 HTML 将非常适合学习。
但我认为注释确实提高了可读性，对我来说，我会对 CSS 块进行注释，以便更容易找到哪些 CSS 代码对哪些标记部分进行样式化。
但你说得对，如果可能，请尽量使其尽可能简单。
这是一个好主意，但我认为它可能只对非常非常非常特定的工作有用。 尤其是较小的工作。 太复杂的标记结构会导致对架构信息的误解。 即使是单个开发人员也是如此。 它可能对教学也有用。 谢谢分享！
不得不说，我从来没有想到过这一点，这是一个很棒的想法，在 HTML 和 CSS 之间来回切换确实很烦人。
我其实不确定我认为这是一个好主意还是坏主意。 我想不出我个人何时会认为它比只添加一个说“这是导航的样式”之类的注释更合适。
我使用非常类似的方法：显示到组件模板文件的链接。
这就是我所做的，我发现它效果很好。 它是单行，而不是多行。
克里斯,
我有很多 CSS 模板（即屏幕、导航、打印、表单等），它们包含一些非常基本的规则，我经常在各种客户项目中重复使用它们，因此添加标记将证明非常有用，因为它可以作为代码片段，这些代码片段也可以在实际的 HTML 文件中重复使用。
感谢你的建议。
-MC
哦，克里斯，太棒的想法了。
我通常倾向于使用一个 CSS 文件，但我会大量注释它。
而且我确实发现自己一直来回切换，所以我很高兴你把这个想法提出来。
再次感谢！
虽然我不会在所有地方都使用它，但我可以看到某些情况下这真的很不错。 如果你无论如何都要编译你的 CSS（使用 Sass/Compass？），那么这甚至更好。
感谢您发布此内容！
CSS 文件越来越大。 如果您拥有带有大量 CSS 的大型网站，您的加载时间会更长吗？ 很多人说你应该编写简短的 CSS 并压缩它。 我不知道哪种更好。 很高兴看到是什么是什么。
我喜欢这个想法！ 在向下滚动到评论之前，我想，“有人会抱怨文件大小”，事实证明！ 但正如你所说，在某些地方，选择性地，这可能很好。 谢谢！
这是一个很棒的想法，我已经使用了一年左右了。只要你压缩了 CSS，所有的注释都会被删除，所以它真的有助于开发（而且我必须说，它非常有帮助）。
我喜欢这个想法的可读性！
我一直听说过，最好只使用一个样式表，所以我一直都是这样处理我的 CSS。
有时我会厌倦滚动一个很长的样式表来查找特定部分（即使有注释）。这种方法可能在一个地方会带来一些额外的工作，但在另一个地方却能为你节省时间。
通过一些额外的（可重用）工作，你可以轻松地像这样编写 CSS，并使用类似 PHP 的东西将其全部整合到一个样式表中……我认为？我在这方面还是个新手，但至少在我的想象中它可以实现。可能是一个值得尝试的酷炫想法 :)
我这样做（类似的想法）
body{ width: 100%; margin: 0; etc: etc; }
#container{ width: 80%; min-width: 600px; margin: 0 auto; etc: etc; }
#banner{ width: 100%; height: 145px; background: 'neausea green'; etc: etc; }
#banner h1{ font-family: 'palatino linotype', serif; color: 'sky blue'; }
#banner p{ padding: 1.5em; etc: etc; }
.column{ width: 30%; margin: 2em; display: inline; etc: etc; }
.column a{ color: orange; }
#etc...
（好吧，我让它全部缩进以反映标记的层次结构，但我猜 <pre> 标签没有提醒 WordPress 保留额外的空白……！）
:)
如果你在大型应用程序上工作，并创建像乐高积木一样工作的样式，并且许多开发人员最终都会使用这些样式，那么你就必须这样做。它实际上可以作为文件中的文档。结合目录，你就可以与那些在他们的硬核编程文件中期望看到相同类型注释的硬核开发人员交朋友。谁不想这样做呢？只是确保你使用的解决方案在你发布之前会删除注释。
如何反转这个想法？我认为在 HTML 注释中添加 CSS 标记，然后用某种脚本收集它们会更好。例如
http://gist.github.com/533702
在这种情况下，所有 CSS 和 HTML 标记都将在同一个文件中 :)
有趣的想法。我想它在某些情况下会起作用。对 CSS 进行注释总是一件好事，因为它可以让 CSS 更易于理解和维护。:-)
我非常喜欢这个想法，并能看到它能让我的工作更轻松。太棒了！
我把它归档到我的“显而易见”文件夹中
W3C 是否允许使用“aside”元素，这样它仍然是 W3C 有效的 HTML 吗？
哇，我从未想过可以这样做到，谢谢你让我了解到这些我不知道的新事物
谢谢，这是我将来可能会用到的另一个想法。LT
我完全同意你的观点。
为什么不在你的 HTML 文档（WordPress 标头）中放置 CSS？更简单。设计完成后，将其剪切并粘贴到新的样式表中。
Message Corp 将文本消息传递提升到了一个新的高度。
我们的互动文本消息传递使客户能够参与
高度个性化且完全自动化的客户对话。
因此，客户可以访问产品咨询、授权
付款，并确认交易——方便地从他们的
手机上进行，无需客服人员协助。对于
那些需要特殊处理的客户互动，
我们让您的客服人员能够通过文本无缝地与
您的客户进行互动。