我的HTML都已标记完毕，准备使其下雨CSS。问题是我必须回去找出我所有的ID和类名是什么，这样我才能开始。我需要的是一个工具，该工具可以解析HTML并显示出样式表，其中包含所有可能要设置样式的元素(甚至可能带有一些默认值)。是否存在这样的工具？

解决方案

回答

我有一个我以前用过的可怜人的版本...这需要jquery和firebug ...

<script type="text/javascript">
    $(document).ready(function() {

        $('*[@id]').each(function() {
            console.log('#' + this.id + ' {}');
        });
        $('*[@class]').each(function() {
            $.each($(this).attr('class').split(" "), function() {
                console.log('.' + this + ' {}');
            });
        });
     });
</script>

它给你这样的东西：

#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}

如果我们希望它们以"自然"页面顺序显示，则...

<script type="text/javascript">
    $(document).ready(function() {
         $('*').each(function() {
             if($(this).is('[@id]')) {
                 console.log('#' + this.id + ' {}');
             }
             if($(this).is('[@class]')) {
                 $.each($(this).attr('class').split(" "), function() {
                     console.log('.' + this + ' {}');
                 });
             }
         });
     });
</script>

我只是在其中加载带有该脚本的页面，然后将结果剪切并粘贴到Firebug中……然后，显然，删除该脚本:)

我们将需要手动删除公仔，或者只是使用映射或者数组之类的一些简单的dup检查逻辑来扔掉公仔。

回答

此博客条目引用的内容与我们在此处需要的内容相似。

它包含指向名为" stylizator.pl"的Perl脚本的链接。该脚本解析html以查找可能的CSS元素，并将它们输出到文件中。

回答

当我第一次看到这个问题时，我想："好问题！好答案，丹伯！"

经过一番思考，我不确定这是一个好主意。这有点像为ASP.NET页中的所有控件生成事件处理程序，或者为数据库中的所有表生成CRUD过程。我认为最好根据需要创建它们，原因有两个：

• 空样式声明减少混乱
• 通过在类级别编写所有内容而不是使用类似(#navigation ul li a)的后代选择器，减少了滥用(或者使用不足)CSS的诱惑。

回答

解决此问题的另一种方法是根据某种命名约定来标准化我们在HTML中使用的id和类名。

回答

我不同意乔恩。尽管此解决方案的使用方式不佳，但不一定表示会使用。任何明智的开发人员或者设计人员都将采用脚本生成的css类，并将仅真正需要的内容拉入css文件。

该解决方案仍然可以解决OP的问题。

回答

我同意乔恩的观点，但我认为OP要做的事情没有问题*。使用提供的脚本，我们将知道所有的类和ID。在使用CSS时，应确定是否需要使用它们中的每一个。最后，或者我们觉得自己对正在做的事情有一个很好的了解，请通过优化器/压缩器运行它，以便删除未使用的id和类。

*操作假设：我们或者没有编写原始HTML或者就编写了它，后来又决定"现在这里的不错的CSS，我希望我会从这里开始。" :-)

回答

http://lab.xms.pl/css-generator/似乎符合说明。

回答

并不是说这不是一个明智的问题，而是一个明智的答案，但它向我暗示了人们在不了解位置选择器时创建的不必要的标记HTML：这种代码中的所有内容都有一个类和一个ID。

<div id="nav">
  <ul id="nav_list">
    <li class="nav_list_item">
        <a class="navlist_item_link" href="foo">foo</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="bar">bar</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="baz">baz</a>
    </li>
  </ul>
</div>

我们可以删除除div上的id以外的所有内容，并且仍然可以通过其位置在其中设置样式；显然，该脚本不会向我们显示所有可能的选择器，对吗？

换句话说，关注CSS作为对类和id所做的事情是一个令人关注的问题。