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

Question

Мой HTML весь размечен, готов сделать его дождевым CSS. Проблема в том, что я должен вернуться и выяснить, каковы все мои идентификаторы и имена классов, чтобы я мог начать. Мне нужен инструмент, который анализирует мой 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 ... затем, очевидно, удаляю сценарий:)

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

Answer 2

Когда я впервые увидел это, я подумал: «Отличный вопрос! Отличный ответ, Данб!»

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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

Решение все еще решает вопрос ОП.

Answer 7

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

Answer 8

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

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