在CSS注释中显示标记

假设您正在为网页的模块化位创建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文件之间来回翻转。 在以下情况下，此功能更加有用：

1. 标记是由JavaScript生成的，很难在其他任何地方看到，或者，
2. CSS特定于插件或第三方插件

我从mediaelements.js的CSS文件中得到了这个想法，我认为这是一个完美的用例示例。

翻译自: https://css-tricks.com/show-markup-in-css-comments/