19

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

4

9 回答 9

10

我有一个我过去使用过的穷人版本......这需要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>

我只是在那里加载带有该脚本的页面，然后从萤火虫中剪切并粘贴结果......然后显然，删除脚本:)

您需要手动删除 dup，或者只是使用地图或数组或其他东西加入一些简单的 dup 检查逻辑。一个用于 ID，一个用于类。

于 2008-08-19T21:26:01.947 回答
7

当我第一次看到这个的时候，我想“好问题！很好的答案，danb！”

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

  1. 减少空样式声明的混乱
  2. 通过在类级别编写所有内容而不是使用像 (#navigation ul li a) 这样的后代选择器来减少滥用（或未充分使用）CSS 的诱惑。
于 2008-08-19T22:18:36.480 回答
3

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

于 2008-12-01T07:44:43.330 回答
2

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

*操作假设：您要么没有编写原始 HTML，要么您编写了它，后来决定“gosh CSS 现在在这里会非常好，我希望我能从它开始。” :-)

于 2008-08-20T16:02:39.090 回答
2

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

于 2008-12-01T12:18:46.037 回答
1

此博客条目引用了与您在此处需要的内容类似的内容。

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

于 2008-08-19T21:39:17.820 回答
1

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

于 2008-08-20T09:21:04.593 回答
1

我不同意乔恩。虽然按照他描述的方式，这个解决方案可能会被很好地使用，但这并不一定意味着它会。任何明智的开发人员或设计人员都会使用脚本生成的 css 类，并且只将真正需要的内容放入 css 文件中。

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

于 2008-08-20T15:31:16.247 回答
0

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

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

于 2021-04-20T12:46:09.247 回答