Question

我的HTML已全部标记，准备让它下雨CSS。问题是我必须回去找出我所有的id和类名，以便我可以开始。我需要的是一个工具，它解析我的HTML并吐出一个样式表，其中包含所有可能的样式元素（甚至可能有一些默认值）。这样的工具是否存在？

Answer 1

我有一个我以前用过的穷人版本......这需要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中......然后显然，删除脚本:)）

你需要手动删除复制品，或者只是用一张地图或数组或其他东西来复制一些简单的复制逻辑。一个用于ID，一个用于类。

Answer 2

当我第一次看到这个时，我想“很好的问题！整齐的回答，呐喊！”

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

空样式声明中的混乱不足
通过在类级别编写所有内容而不是使用后代选择器（如#navigation ul li a）来减少滥用（或使用不足）CSS的诱惑。

Answer 3

http://lab.xms.pl/css-generator/似乎符合描述。

Answer 4

我同意乔恩的观点，但我认为做OP想要的事情并没有问题。使用提供的脚本，您将了解所有类和ID。在处理CSS时，您应该决定是否需要来使用它们。最后，或者你觉得你已经很好地处理了你正在做的事情，通过优化器/压缩器运行它，以便删除未使用的id和类。

*操作假设：你要么没有写原始HTML，要么你写了它，后来决定“gosh CSS现在非常好用，我希望我能开始使用它。” ： - ）

Answer 5

并不是说这个问题不是一个明智的答案，但它向我暗示了人们在不理解位置选择器时创建的那种不必要标记的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做了一些事情。

Answer 6

此博客条目引用类似于您所需的内容here。

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

Answer 7

另一种解决方法是根据some sort of naming convention标准化您在HTML中使用的ID和类名称。

Answer 8

我不赞同乔恩。虽然这种解决方案的描述方式可能很差，但并不一定意味着它会。任何明智的开发人员或设计人员都会采用脚本生成的css类，只将实际需要的内容提取到css文件中。

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

Answer 9

我制作了一个生成器，可以为您生成 html 和 css = https://www.andy-howard.com/css-skeleton-screen-generator/

没什么好说的，它利用了 css 中的 :empty 选择器。

生成CSS骨架的工具？

9 个答案: