CSS, JS और HTML के लिए कोड समीक्षा दिशानिर्देश


9

मुझे CSS, JS और HTML की समीक्षा के लिए दिशानिर्देश बनाने के लिए कहा गया है। मुझे पता है कि JS के लिए कोडिंग दिशानिर्देश हैं लेकिन मुझे HTML और CSS के बारे में कोई जानकारी नहीं है। जेएस की समीक्षा करने के लिए मैं निश्चित रूप से उन दिशानिर्देशों का पालन करूंगा और उनका उल्लेख करूंगा। लेकिन CSS और HTML के बारे में क्या? तार्किक त्रुटियों और इंडेंटेशन मुद्दों के अलावा, क्या कोई विशिष्ट चीजें हैं जिन्हें मुझे जांचने की आवश्यकता है जब मैं मार्कअप और सीएसएस की समीक्षा करता हूं?


1
यह अभी एचएन पर था, शुरू करने के लिए एक अच्छी जगह हो सकती है। taitems.github.com/Front-End-Development-Guidelines
मई'11

जवाबों:


5

देखने के लिए कुछ चीजें:

  • उपयुक्त HTML टैग का उपयोग करके संरचित जानकारी की पहचान की जाती है? H1- H6शीर्षकों के लिए, UL/ OLऔर LIसूचियों के लिए, आदि?
  • कोई विरासत HTML टैग (कर रहे हैं <b>, <i>, <center>, <font>) का इस्तेमाल किया?
  • क्या साइट कम से कम मार्कअप की राशि का उपयोग करती है?
  • क्या स्टाइल की जानकारी CSS फाइलों में बाहरी है?
  • क्या सभी जावास्क्रिप्ट बाहरी है? घटना संचालकों सहित?
  • क्या सीएसएस श्रेणी के नाम पृष्ठ ( img-caption), और फॉर्म ( bold-red) या सामग्री ( pink-elephant) में फ़ंक्शन को संदर्भित करते हैं ?
  • क्या उपयुक्त प्रारूप में चित्र (PNG या JPEG, प्रकार के आधार पर) हैं?
  • क्या जावास्क्रिप्ट पुस्तकालयों के न्यूनतम संस्करणों का उपयोग किया गया है?
  • वैकल्पिक रूप से, सभी स्थानीय रूप से विकसित जावास्क्रिप्ट और सीएसएस फ़ाइलों को कम से कम किया गया है?
  • क्या HTML / CSS मान्य है?
  • प्रदर्शन की जांच / अनुकूलन के लिए YSlow (या समान) का उपयोग किया गया है?
  • (ज्यादातर) [एसईओ] क्या जावास्क्रिप्ट के साथ सुलभ साइट बंद हो गई है?
  • [एसईओ] HTML के शीर्ष पर पाया जाने वाला सबसे प्रासंगिक सामग्री है?

मुझे बस तेजी से वेबसाइटों पर स्टीव सौन्डर्स की पुस्तक मिली। इसके काफी मददगार और आपके द्वारा बताए गए कुछ बिंदु अच्छे हैं।
कुमार

0

HTML में एक अच्छी शैली के महत्वपूर्ण तत्वों में से एक प्रगतिशील वृद्धि है । इसका मतलब है कि HTML लेआउट सीएसएस या जावास्क्रिप्ट के बिना भी अच्छा प्रस्तुत करेगा। फिर, एक बार JS / CSS संसाधित होने के बाद, यह बेहतर दिखाई देगा (जैसे पुरानी शैली की HTML <select>ड्रॉपडाउन एनिमेटेड हो जाएगी)।

यह भी गैर-घुसपैठ मार्कअप के साथ करना है। <font style="color:red;font-size:16pt">Hello</font>एक के बजाय एक का उपयोग करेगा <div class="red-colored-big-fond">Hello</div>

जावास्क्रिप्ट के साथ भी। <button onclick="javascript:alert('a');">Clickme</button>एक के बजाय एक बटन वर्ग / आईडी निर्दिष्ट करेगा और इसे जावास्क्रिप्ट से लक्षित करेगा। यह आपके मार्कअप कोड को बनाए रखना भी आसान बनाता है।


0

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

इसके अतिरिक्त, एलेक्स एक गोल चक्कर रास्ते में एक महान बिंदु लाता है। सुनिश्चित करें कि कोई भी "लाल-लाल-बड़े-फ़ॉन्ट" जैसे उपनामों का उपयोग नहीं करता है, क्योंकि वास्तविक किसी के लिए तैनात किए जाने के लगभग 20 सेकंड बाद इसे छोटे नीले फ़ॉन्ट में बदलने जा रहा है। मैंने वास्तव में इस सीएसएस को देखा है:

.arial12pt { font-family: Verdana; font-size: 8pt; }

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


0

जहाँ तक HTML जाता है, मैं हमेशा अपनी फ़ाइलों में पदानुक्रम और इंडेंटेशन के लिए एक बिंदु बनाता हूं। उदाहरण के लिए, यदि मेरे पास divs का एक गुच्छा है:

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

मुझे लगता है कि यह उन लोगों के लिए काफी स्पष्ट है जो लेआउट और टेम्प्लेट बनाते हैं, लेकिन अधिक से अधिक बार मैं सिर्फ ऐसे HTML को नहीं देखता हूं जिसमें कोई संरचनात्मक पदानुक्रम नहीं है, जिससे किसी अन्य व्यक्ति के लिए पढ़ना मुश्किल हो जाता है। मुझे लगता है कि अधिक सीएस पृष्ठभूमि से आने का अनुमान है, यह कुछ ऐसा है जो मेरे दिमाग में चिपक जाता है। वही CSS के लिए भी जाता है। मान लीजिए कि आप एक div स्टाइल कर रहे हैं:

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

इंडेंटेशन को पढ़ने में बहुत आसानी होती है जब आप किसी अन्य भाषा जैसे PHP / Ruby / जो कुछ भी करते हैं, उसे जल्दी से पढ़ सकते हैं। फिर से, यह इस बात पर निर्भर करता है कि आप कैसे सबसे अच्छा काम करते हैं, लेकिन जब अन्य लोग मेरे HTML को पढ़ते हैं, तो मैं इसे वास्तव में संगठित करना पसंद करता हूं :)।

इसके अलावा, जैसा कि ऊपर कहा गया है, अपने CSS वर्गों को नाम देना और अपने लेआउट के लिए प्रासंगिक नामों को आईडी करना हमेशा एक बहुत अच्छा विचार है, खासकर जब यह बालों को मिलता है (अन्य भाषाओं में नामकरण और विधियों की तरह)। हाशिये, पैडिंग्स और अन्य संरेखण मुद्दों के बारे में जानने के लिए कुछ और खतरनाक "अनुमान और जांच" है। मैं अक्सर बचने की कोशिश करता हूं अपने मार्जिन और पैडिंग में नकारात्मक संख्या डाल रहा हूं। यह भ्रमित कर सकता है यदि आपने लेआउट को खुद नहीं बनाया है और यदि आप बाद में इसे वापस आना चाहते हैं और इसे संशोधित करना चाहते हैं, तो आपको इसे ओवरहाल करना पड़ सकता है। मेरी राय में, यह हमेशा एक अच्छा विचार है कि सीएसएस में कुछ भी होके या "कुल्डी" की कोशिश न करें, भले ही यह अच्छा लगे; आमतौर पर इसे करने का एक बेहतर तरीका है, भले ही आपको अपने सीएसएस का पुनर्गठन करना पड़े!


0

जावास्क्रिप्ट के लिए मैं हमेशा इसे JSLint के साथ मान्य करना चाहूंगा, मैं इतने सारे कीड़े के बारे में सोच सकता हूं कि JSLint पकड़ता है कि इसका उपयोग नहीं करना सिर्फ पागल है।


0

मुझे इस मानक दस्तावेज़ के बारे में पता चला जो मुझे पसंद आया। मैं यह भी प्रतिध्वनित करूंगा कि प्रगतिशील वृद्धि के बारे में क्या कहा गया था। सामान्य तौर पर, यदि कोई अन्य व्यक्ति HTML / CSS लिखता है, तो आपको इसे बाद में लाइन में लगने में सक्षम होना चाहिए और सुखद आश्चर्य होगा कि मार्कअप कितना खराब है और सरल शैली को आसानी से और कुशलता से बनाने में सक्षम होना चाहिए।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.