生成CSS骨架的工具？

StackOverflow https://stackoverflow.com/questions/16926

  •  08-06-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

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

其他提示

我有一个穷人版本的这个我过去用过......这需要 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，一张用于班级。

当我第一次看到这个时，我想：“好问题！回答得好，丹布！”

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

  1. 减少空样式声明带来的混乱
  2. 通过在类级别编写所有内容而不是使用像 (#navigation ul li a) 这样的后代选择器，可以减少误用（或未充分使用）CSS 的诱惑。

我同意乔恩的观点，但我认为按照OP的要求去做没有问题*。使用提供的脚本，您会知道所有的类和 ID。在处理 CSS 时，您应该决定是否 需要 使用它们中的每一个。最后，或者当你觉得你已经很好地掌握了你正在做的事情时，通过优化器/压缩器运行它，这样它就会删除未使用的 ID 和类。

*操作假设：您要么没有写原始的HTML，要么您写了它，后来决定：“天哪，现在在这里真的很不错，我希望我能开始使用它。” :-)

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

此博客条目引用了与您需要的类似的内容 这里.

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

解决此问题的另一种方法是根据以下内容标准化您在 HTML 中使用的 id 和类名称： 某种命名约定.

我不同意乔恩的观点。虽然这个解决方案按照他描述的方式使用起来很糟糕，但这并不一定意味着它会。任何明智的开发人员或设计人员都会采用脚本生成的 css 类，并仅将真正需要的内容提取到 css 文件中。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top