css कहत सीएसएस कंकाल बनाने के लिए उपकरण?




हड्डियों के नाम (7)

http://lab.xms.pl/css-generator/ विवरण को फिट करने के लिए लगता है

मेरा एचटीएमएल सभी को चिन्हित है, इसे सीएसएस को बारिश करने के लिए तैयार है। समस्या यह है कि मुझे वापस जाना होगा और पता चलेगा कि मेरे सभी आईडी और वर्ग के नाम इतने हैं कि मैं आरंभ कर सकता हूं। मुझे क्या चाहिए एक उपकरण जो मेरे एचटीएमएल को पार्स करता है और स्टाइलशीट के बाहर सभी संभव तत्वों के साथ स्टाइल करने के लिए तैयार होता है (शायद कुछ चूक के साथ भी) क्या ऐसा उपकरण मौजूद है?


ऐसा नहीं है कि यह एक समझदार जवाब के साथ एक समझदार प्रश्न नहीं है, लेकिन यह मेरे लिए अनावश्यक रूप से चिह्नित अपारदर्शिता है जो लोग बनाते हैं जब वे स्थितिगत चयनकर्ताओं को नहीं समझते हैं: कोड का प्रकार जहां सब कुछ एक वर्ग और एक है आईडी।

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

आप डिवी पर आईडी को छोड़कर सब कुछ निकाल सकते हैं और फिर भी अपनी स्थिति के अनुसार सब कुछ शैली में सक्षम हो सकते हैं; और जाहिर है, स्क्रिप्ट आपको उन सभी संभावित चयनकर्ताओं को नहीं दिखाएगा, है ना?

दूसरे शब्दों में, सीएसएस पर एक संकीर्ण फोकस वर्गों और आईडी के लिए कुछ किया जाता है एक चिंता का विषय है।


जब मैंने इसे पहले देखा था, मैंने सोचा "महान सवाल! साफ जवाब, डैनब!"

थोड़ा सा विचार करने के बाद, मुझे यकीन नहीं है कि यह एक अच्छा विचार है। यह एक एएसपी.नेट पृष्ठ में सभी नियंत्रकों के लिए इवेंट हैंडल बनाने जैसे कुछ है, या डेटाबेस में सभी तालिकाओं के लिए CRUD प्रक्रियाओं को उत्पन्न करना मुझे लगता है कि इसे दो कारणों के लिए आवश्यक बनाने के लिए बेहतर है:

  1. खाली शैली घोषणाओं से कम अव्यवस्था
  2. वंशानुगत चयनकर्ताओं जैसे (# नेविगेशन उल ली) का उपयोग करने के बजाय कक्षा स्तर पर सबकुछ लिखकर सीएसएस का दुरुपयोग करने के लिए कम प्रलोभन।

इस ब्लॉग प्रविष्टि का कुछ इसी तरह का संदर्भ है जो आपको यहां की आवश्यकता है

इसमें पर्ल स्क्रिप्ट का एक लिंक होता है जिसे ' स्टाइलिज़ेटर.प्ल ' कहा जाता है। यह स्क्रिप्ट संभव सीएसएस तत्वों को देखने के लिए html को पार्स करता है और उन्हें एक फ़ाइल में आउटपुट करता है।


इस पर विचार करने के लिए एक और तरीका है कि नामकरण परंपरा के अनुसार आपके HTML में उपयोग किए जाने वाले आईडी और कक्षा नामों को मानकीकृत करना है।


मैं जॉन के साथ असहमत हूं हालांकि यह समाधान जिस तरह से वह वर्णन करता है, उसमें खराब तरीके से इस्तेमाल किया जा सकता है, इसका जरूरी मतलब यह नहीं है कि यह होगा। कोई भी बुद्धिमान डेवलपर या डिजाइनर सीएसएस वर्ग उत्पन्न करने वाली स्क्रिप्ट को लेकर जा रहे हैं और केवल सीएसएस फ़ाइल में वास्तव में क्या आवश्यक है।

समाधान अभी भी ओपी सवाल हल।


मेरे पास एक गरीब आदमी का संस्करण है जिसका मैंने पहले इस्तेमाल किया है ... इसकी आवश्यकता है 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>

मैं उस पेज में उस स्क्रिप्ट के साथ बस लोड करता हूं, फिर परिणाम निकालकर फायरबग से चिपकाएं ... फिर स्पष्ट रूप से, स्क्रिप्ट को हटा दें :)

आपको मैन्युअल रूप से डुप्ले को हटाने या मैन्युअल रूप से किसी नक्शा या सरणी या कुछ चीज़ों के साथ कुछ साधारण डुप्लिकेट जाँच तर्क में टॉस करना होगा .. एक आईडी के लिए और कक्षाओं के लिए एक





markup