أداة لتوليد هيكل CSS؟

Question

لقد تم ترميز كل HTML الخاص بي، وهو جاهز لتشغيل CSS.المشكلة هي أنني يجب أن أعود وأكتشف كل أسماء المعرفات والفئات الخاصة بي حتى أتمكن من البدء.ما أحتاج إليه هو أداة تقوم بتحليل HTML الخاص بي وتنتج ورقة أنماط تحتوي على جميع العناصر الممكنة الجاهزة للتصميم (ربما حتى مع بعض الإعدادات الافتراضية).هل توجد مثل هذه الأداة؟

Answer 1

http://lab.xms.pl/css-generator/ يبدو أن تناسب الوصف.

Answer 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>

أنا فقط أقوم بتحميل الصفحة التي تحتوي على هذا البرنامج النصي هناك، ثم أقوم بقص النتائج ولصقها من Firebug...ثم من الواضح، إزالة البرنامج النصي :)

ستحتاج إلى إزالة التكرارات يدويًا أو مجرد إدخال بعض منطق التحقق من التكرارات البسيط باستخدام خريطة أو مصفوفة أو شيء من هذا القبيل.واحد للمعرفات والآخر للفصول الدراسية.

Answer 3

عندما رأيت هذا لأول مرة، فكرت "سؤال عظيم!إجابة واضحة، دانب!"

بعد قليل من التفكير، لست متأكدًا من أن هذه فكرة جيدة.إنه يشبه إلى حد ما إنشاء معالجات الأحداث لجميع عناصر التحكم في صفحة ASP.NET، أو إنشاء إجراءات CRUD لجميع الجداول في قاعدة البيانات.أعتقد أنه من الأفضل إنشاؤها حسب الحاجة لسببين:

1. فوضى أقل من إعلانات النمط الفارغة
2. إغراء أقل لإساءة استخدام (أو قلة استخدام) CSS عن طريق كتابة كل شيء على مستوى الفصل بدلاً من استخدام المحددات التابعة مثل (#navigation ul li a).

Answer 4

أنا أتفق مع جون، لكنني لا أرى مشكلة* في فعل ما يريده OP.باستخدام البرنامج النصي المقدم، ستعرف جميع فئاتك ومعرفاتك.أثناء العمل على CSS الخاص بك، يجب أن تقرر ما إذا كنت يحتاج لاستخدام كل واحد منهم.في النهاية، أو عندما تشعر أنك تجيد التعامل مع ما تفعله، قم بتشغيله من خلال مُحسِّن/ضاغط بحيث يزيل المعرفات والفئات غير المستخدمة.

* افتراض التشغيل:إما أنك لم تكتب HTML الأصلي أو كتبت ذلك وقررت لاحقًا أن "Gosh CSS سيكون لطيفًا حقًا هنا الآن ، أتمنى لو كنت سأبدأ به". :-)

Answer 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>

يمكنك إزالة كل شيء باستثناء المعرف الموجود في div وستظل قادرًا على تصميم كل شيء هناك حسب موضعه؛ومن الواضح أن النص لن يظهر لك كل شيء أولئك محددات المحتملة، أليس كذلك؟

بمعنى آخر، التركيز الضيق على CSS كشيء يتم إجراؤه على الفئات والمعرفات هو أمر مثير للقلق.

Answer 6

يشير إدخال المدونة هذا إلى شيء مشابه لما تحتاجه هنا.

يحتوي على رابط لبرنامج نصي Perl يسمى "stylizator.pl'.يقوم هذا البرنامج النصي بتحليل HTML للبحث عن عناصر CSS المحتملة وإخراجها إلى ملف.

Answer 7

هناك طريقة أخرى للتعامل مع ذلك وهي توحيد أسماء المعرفات والفئات التي تستخدمها في HTML الخاص بك وفقًا لـ نوع من اصطلاح التسمية.

Answer 8

أنا لا أتفق مع جون.وفي حين أن هذا الحل يمكن استخدامه بشكل سيئ بالطريقة التي يصفها، إلا أن هذا لا يعني بالضرورة أنه سيفعل ذلك.أي مطور أو مصمم حكيم سيأخذ فئات CSS التي تم إنشاؤها بواسطة البرنامج النصي ويسحب فقط ما هو مطلوب حقًا في ملف CSS.

لا يزال الحل يحل سؤال البروتوكول الاختياري.