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

Мой HTML весь размечен, готов сделать его дождь CSS. Проблема в том, что я должен вернуться и выяснить, каковы все мои идентификаторы и имена классов, чтобы я мог начать. Мне нужен инструмент, который анализирует мой HTML и выкладывает таблицу стилей со всеми возможными элементами, готовыми к стилю (возможно, даже с некоторыми значениями по умолчанию). Существует ли такой инструмент?

19.08.2008 20:49:47
8 ОТВЕТОВ
РЕШЕНИЕ

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

3
1.12.2008 07:44:43

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

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

10
19.08.2008 21:26:01

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

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

1
19.08.2008 21:39:17

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

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

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

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

1
20.08.2008 09:21:04

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

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

1
20.08.2008 15:31:16

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

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

2
20.08.2008 16:02:39

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

2
1.12.2008 12:18:46