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

StackOverflow https://stackoverflow.com/questions/16926

  •  08-06-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

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

*Операционное допущение:Вы либо не писали оригинальный HTML, либо написали его, а позже решили, что "черт возьми, 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 как на чем-то, что делается с классами и идентификаторами.

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top