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

Ответ 1

http://lab.xms.pl/css-generator/, похоже, соответствует описанию.

Ответ 2

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

Я просто загружаю страницу с этим script там, затем вырезаю и вставляю результаты из firebug... тогда, очевидно, удалите script:)

вам нужно будет удалить дубликаты вручную или просто бросить в какую-то простую логику проверки дубликатов с помощью карты или массива или что-то в этом роде. один для идентификаторов и один для классов.

Ответ 3

Когда я впервые увидел это, я подумал: "Отличный вопрос! Нежный ответ, danb!"

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

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

Ответ 4

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

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

Ответ 5

Не то, чтобы с разумным ответом это был не разумный вопрос, но он подразумевал для меня такой ненужный помеченный 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>

вы можете удалить все, кроме id на div, и по-прежнему сможете стилизовать все по своему положению; и, очевидно, script не покажет вам все эти возможные селектора, не так ли?

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

Ответ 6

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

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

Ответ 7

Еще один способ приблизиться к этому - стандартизировать имена идентификаторов и классов, которые вы используете в своем HTML, в соответствии с своеобразное соглашение об именах.

Ответ 8

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

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