Инструмент для создания скелета CSS?

У меня есть версия этого бедняка, которую я использовал в прошлом... для этого требуется 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 {}

если вы хотите, чтобы они были в порядке "natural" страниц вместо этого...

<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... тогда, очевидно, удалите скрипт :)

вам нужно будет удалить dups вручную или просто добавить какую-нибудь простую логику проверки dup с картой или массивом или чем-то еще.. один для IDs и один для классов.

Когда я впервые увидел это, я подумал "Great question! Neat answer, danb!"

Немного подумав, я уже не уверен, что это хорошая идея. Это немного похоже на создание обработчиков событий для всех элементов управления на странице ASP.NET или создание процедур CRUD для всех таблиц в базе данных. Я думаю, что лучше создавать их по мере необходимости по двум причинам:

1. Меньше беспорядка от пустых объявлений стилей
2. Меньше соблазна злоупотреблять (или недоиспользовать) CSS, записывая все на уровне класса, а не используя селекторы потомков, такие как (#navigation ul li a).

http://lab.xms.pl/css-generator/ кажется, подходит под описание.

Я согласен с Джоном, но я не вижу problem* с тем, чтобы делать то, что хочет OP. Используя предоставленный сценарий, вы будете знать все свои классы и идентификаторы. Работая над своим CSS, вы должны решить, нужно ли вам использовать каждый из них. В конце или в тот момент, когда вы чувствуете, что у вас есть хороший контроль над тем, что вы делаете, запустите его через оптимизатор / компрессор, чтобы он удалил неиспользуемые идентификаторы и классы.

Предположение *Operating: вы либо не написали оригинал HTML, либо написали его и позже решили, что "gosh CSS был бы действительно хорош здесь сейчас, я бы хотел начать с него." :-)

Не то чтобы это был неразумный вопрос с разумным ответом, но он подразумевал для меня вид излишне маркированного HTML, который люди создают, когда они не понимают позиционных селекторов: вид кода, где все имеет класс и идентификатор.

<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, и все равно сможете стилизовать все там по его положению; и, очевидно, скрипт не покажет вам все эти возможные селекторы, не так ли?

Другими словами, узкий фокус на CSS как что-то сделанное с классами и идентификаторами вызывает беспокойство.

Другой способ приблизиться к этому-стандартизировать id и имена классов, которые вы используете в своем HTML, в соответствии с каким-то Соглашением об именовании .

Я не согласен с Джоном. Хотя это решение может быть использовано плохо в том виде, как он описывает, это не обязательно означает, что оно будет. Любой мудрый разработчик или дизайнер собирается взять сгенерированный скриптом css классов и вытащить только то, что действительно необходимо в файл css.

Решение по-прежнему решает вопрос OP.

Эта запись в блоге ссылается на что-то похожее на то, что вам нужно здесь .

Он содержит ссылку на скрипт Perl под названием ' stylizator.pl '. Этот скрипт анализирует html для поиска возможных элементов CSS и выводит их в файл.