生成CSS骨架的工具？

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过程.我认为最好根据需要创建它们有两个原因:

1. 空样式声明不那么混乱
2. 通过在类级别编写所有内容而不是使用后代选择器(#navigation ul li a)来减少滥用(或使用不足)CSS的诱惑.

Answer 3

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