संपत्ति के लिए नामकरण सम्मेलन (चित्र, सीएसएस, जेएस)?

Question

मैं अभी भी अपनी वेब परियोजनाओं में उपयोग की जाने वाली छवियों, जेएस और सीएसएस फ़ाइलों जैसी परिसंपत्तियों के लिए एक अच्छा नामकरण सम्मेलन खोजने के लिए संघर्ष कर रहा हूं।

तो, मेरा वर्तमान होगा:

सीएसएस: style-{name}.css
उदाहरण: style-main.css, style-no_flash.css, style-print.cssआदि

जे एस: script-{name}.js
उदाहरण: script-main.js, script-nav.jsआदि

छवियाँ: {imageType}-{name}.{imageExtension}
{imageType} इनमें से कोई भी है

• आइकन (उदाहरण के लिए मदद सामग्री के लिए प्रश्न चिह्न आइकन)
• img (उदाहरण के लिए <img />तत्व द्वारा डाली गई हेडर इमेज )
• बटन (जैसे एक चित्रमय सबमिट बटन)
• bg (छवि का उपयोग css में पृष्ठभूमि चित्र के रूप में किया जाता है)
• स्प्राइट (छवि का उपयोग css में पृष्ठभूमि चित्र के रूप में किया जाता है और इसमें कई "संस्करण" होते हैं)

उदाहरण-नाम होगा: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gifआदि

तो, आप क्या सोचते हैं और आपका नामकरण सम्मेलन क्या है ?

Comments

के बारे में Javascript File Naming Conventionsकेवल पढ़ने के लिए, (बहुत) के बारे में अधिक stackoverflow.com/questions/7273316/...

— एड्रियन बनें

Answer 1

मैं सीएसएस फ़ाइलों को एक फ़ोल्डर में css, जावास्क्रिप्ट में js, छवियों में जगह देता हूं images... जैसा कि आप फिट देखते हैं सबफ़ोल्डर्स जोड़ें। व्यक्तिगत फ़ाइलों के स्तर पर किसी भी नामकरण सम्मेलन की आवश्यकता नहीं है।

Comments

मैं असहमत हूं। इस तथ्य पर विचार करें कि कई ज्ञात परियोजनाओं में नामकरण परंपराएं हैं। jQuery देखें, इसका उपयोग करता है <product-name>.<plugin>-<ver.sion>.<filetype>.js, जैसे कि jquery-1.4.2.min.js, या jquery.plugin-0.1.js।

— एड्रिएन बी

Answer 2

मैंने देखा है दृश्यपटल डेवलपर्स के एक बहुत से दूर आगे बढ़ रहे हैं cssऔर jsके पक्ष में stylesऔर scriptsवहाँ आम तौर पर इस तरह के रूप में वहाँ के अन्य सामान है, क्योंकि .less, .stylऔर .sassसाथ ही साथ, कुछ के लिए, .coffee। तथ्य यह है कि आपकी पसंद के संगठन फ़ोल्डर में विशिष्ट प्रौद्योगिकी चयन का उपयोग करना एक बुरा विचार है, भले ही हर कोई ऐसा करता हो। मैं इन उच्च सम्मानित डेवलपर्स से अपने द्वारा देखे जाने वाले मानक का उपयोग करना जारी रखूंगा:

• src/html
• src/images
• src/styles
• src/styles/fonts
• src/scripts

और उनके गंतव्य समकक्ष का निर्माण करते हैं, जो कभी-कभी उनके निर्माण के destआधार पर उपसर्ग करते हैं:

• ./
• images
• styles
• styles/fonts
• scripts

यह उन सभी फ़ाइलों को एक साथ रखने की अनुमति देता है (एक srcनिर्देशिका को तोड़ने के बजाय ) कि रखने के लिए और चीजों को स्पष्ट रूप से उन लोगों के लिए जुड़ा रहता है जो बाहर तोड़ते हैं।

मैं वास्तव में थोड़ा वायदा करता हूं और जोड़ता हूं

• scripts/before
• scripts/after

जो दो main-before.min.jsऔर main-after.min.jsलिपियों में सुस्पष्ट हो जाते हैं, एक हैडर के लिए (आवश्यक तत्वों के साथ normalizeऔर modernizrजिसे जल्दी चलना होता है, उदाहरण के लिए) और afterशरीर में अंतिम चीज के लिए क्योंकि जावास्क्रिप्ट इंतजार कर सकता है। ये पढ़ने के लिए अभिप्रेत नहीं हैं, बहुत कुछ Google के मुख्य पृष्ठ की तरह।

यदि स्क्रिप्ट्स और स्टाइल शीट हैं, जो कि एक विशेष कैश प्रबंधन दृष्टिकोण के निर्माण में ध्यान रखने योग्य होने के कारण लिंक करने और अकेले छोड़ने के लिए समझ में आता है।

इन दिनों, यदि आप कुछ प्रकार की निर्माण प्रक्रिया का उपयोग नहीं कर रहे हैं, जैसे कि गल्प या ग्रंट , तो आप संभवतः उन मोबाइल केंद्रित प्रदर्शन लक्ष्यों तक नहीं पहुंच रहे हैं, जिनके बारे में आपको विचार करना चाहिए।

Comments

क्या फॉन्ट फाइलें (.ttf, .eot, आदि) स्टाइल / फोंट में स्थित हैं?

— एंड्रयू सेवचुक

यह उच्च उचित विचार है। धन्यवाद!

— zhibirc

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

— पाब्लो-कोई

Answer 3

/ आस्तियों /
  / Css
  /इमेजिस
  / जावास्क्रिप्ट (या स्क्रिप्ट)
    / Minified
    / स्रोत

क्या मैंने जो सबसे अच्छी संरचना देखी है और जो मुझे पसंद है। फ़ोल्डरों के साथ आपको अपने सीएसएस आदि को वर्णनात्मक नामों के साथ उपसर्ग करने की आवश्यकता नहीं है।

Comments

मुझे यह पसंद है लेकिन मुझे लगता है कि अधिक सामान्य रूट फ़ोल्डर "सार्वजनिक" या "सामग्री" है।

— ब्रायन Boatright

पहली बार जब मैंने 'एसेट्स' के लिए यह फाइल स्ट्रक्चर देखा था, जब मैंने एंगुलर सिंगल पेज एप्स को डिलीट किया था। इसका उपयोग बहुत सारे एंगुलर सिंगल पेज ऐप ट्यूटोरियल में होता है - मुझे यह पसंद है।

— काइल वासेला

Answer 4

बड़ी साइटों के लिए जहां सीएसएस बहुत सारी पृष्ठभूमि छवियों को परिभाषित कर सकता है, उन परिसंपत्तियों के लिए एक फ़ाइल नामकरण सम्मेलन वास्तव में बाद में बदलाव करने के लिए काम में आता है।

उदाहरण के लिए:

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

हमने तत्व प्रकार में जोड़ने पर भी चर्चा की है, लेकिन यह निश्चित नहीं है कि यह कितना उपयोगी है और संभवतः भविष्य में आवश्यक परिवर्तनों के लिए भ्रामक हो सकता है:

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png

Answer 5

आप इसे इस तरह नाम दे सकते हैं:

/ संपत्ति / सीएसएस / - सीएसएस फ़ाइलों के लिए

/ आस्तियों / फ़ॉन्ट / - फ़ॉन्ट फ़ाइलों के लिए। (अधिकतर आप केवल Google फ़ॉन्ट्स पर जा सकते हैं ताकि उपयोग योग्य फोंट की खोज की जा सके।)

/ आस्तियों / छवियों / - छवियों फ़ाइलों के लिए।

जावास्क्रिप्ट फ़ाइलों के लिए / संपत्ति / स्क्रिप्ट / या / संपत्ति / जेएस / -।

/ संपत्ति / मीडिया / - वीडियो और मिसकैरेज के लिए। फ़ाइलें।

आप "संपत्ति" को "संसाधन" या "फाइल" फ़ोल्डर नाम से भी बदल सकते हैं और इसका नाम सबफ़ोल्डर्स रख सकते हैं। इस तरह एक आदेश फ़ोल्डर संरचना होने बहुत महत्वपूर्ण नहीं है केवल महत्वपूर्ण यह है कि आप बस अपनी फ़ाइलों को इसके प्रारूप द्वारा व्यवस्थित करना है। सीएसएस फ़ाइलों के लिए एक फ़ोल्डर "/ css /" बनाने के लिए या छवि फ़ाइलों के लिए "/ चित्र /"।

Answer 6

सबसे पहले, मैं फ़ोल्डर्स में विभाजित: css, js, img।

सीएसएस और जेएस के भीतर, मैं परियोजना के नाम के साथ फाइलें उपसर्ग करता हूं क्योंकि आपकी साइट में जेएस और सीएसएस फाइलें शामिल हो सकती हैं जो घटक हैं, इससे यह स्पष्ट होता है कि आपकी साइट के लिए फाइलें कहां हैं या प्लगइन्स से संबंधित हैं।

css/mysite.main.css css/mysite.main.js

अन्य फाइलें पसंद हो सकती हैं

js/jquery-1.6.1.js js/jquery.validate.js

अंत में छवियों को उनके उपयोग से विभाजित किया गया है।

• img/btn/submit.png एक बटन
• img/lgo/mysite-logo.png एक लोगो
• img/bkg/header.gif पृष्ठभूमि
• img/dcl/top-left-widget.jpg एक decal तत्व
• img/con/portait-of-something.jpg एक सामग्री छवि

छवियों को व्यवस्थित रखना महत्वपूर्ण है क्योंकि 100 से अधिक हो सकते हैं और आसानी से पूरी तरह से एक साथ और भ्रमित-नाम मिल सकते हैं।

Comments

img/con? मैं अनुमान लगा रहा हूँ कि आप इनमें से किसी भी फाइल को विंडोज़ आधारित सिस्टम पर स्टोर नहीं कर रहे हैं? टर्न आउट कोन एक आरक्षित MS-DOS डिवाइस ड्राइवर नाम है और इसे फ़ाइल नाम के रूप में उपयोग नहीं किया जा सकता है ।

— ᴍᴀᴛᴛ ᴍᴀᴛᴛ

मुझे एक फ़ोल्डर नाम के रूप में img पसंद है क्योंकि यह मुझे याद दिलाता है कि टैग नाम भी img है , छवि नहीं ।

— 15:

Answer 7

मैं कुछ भी सामान्य से बचने के लिए करते हैं, जैसे कि smdrager ने क्या सुझाव दिया है। "mysite.main.css" का कोई मतलब नहीं है।

"मायसाइट" क्या है ?? यह एक मैं पर काम कर रहा हूँ? यदि ऐसा है तो वास्तव में स्पष्ट है, लेकिन यह पहले से ही सोच रहा है कि यह क्या हो सकता है और यदि यह स्पष्ट है!

"मुख्य" क्या है? शब्द "मेन" की कोडर्स के बाहर कोई परिभाषा नहीं है कि सीएसएस फ़ाइल के भीतर क्या है।

जबकि कुछ परिदृश्यों में ठीक है, "टॉप" या "लेफ्ट" जैसे नामों से भी बचें: "टॉप-नेवी.केएस" या "टॉप-मेन-लोगो.पिंग"।
आप कहीं और एक ही चीज़ का उपयोग करना चाहते हैं, और किसी चित्र को पाद लेख में या मुख्य पृष्ठ सामग्री के भीतर "टॉप-बैनर.पिंग" कह सकते हैं, बहुत भ्रामक है!

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

मुझे नहीं लगता कि आपको सीएसएस फाइलनाम में "सीएसएस" या "स्टाइल" को बताने की आवश्यकता है, क्योंकि यह "सीएसएस" या "शैलियों" फ़ोल्डर में है और इसका विस्तार है .cssऔर मुख्य रूप से इन फ़ाइलों को केवल कभी कहा जाता है में<head> क्षेत्र, मैं बहुत स्पष्ट रूप से वे क्या कर रहे हैं पता है।

उस ने कहा, मैं पुस्तकालय, जेएस और विन्यास (आदि) फ़ाइलों के साथ ऐसा करता हूं। उदाहरण के लिए libSomeLibrary.php, या JSSomeScript.php। चूंकि PHP और JS फाइलें अन्य फाइलों के भीतर विभिन्न क्षेत्रों में शामिल या उपयोग की जाती हैं, और नाम के भीतर फाइल का मुख्य उद्देश्य क्या है, इसकी जानकारी होना उपयोगी है।

उदाहरण: फ़ाइल नाम देखना require('libContactFormValidation.php');उपयोगी है। मुझे पता है कि यह एक पुस्तकालय फ़ाइल (lib) है और नाम से यह क्या करता है।

छवि फ़ोल्डर के लिए, मेरे पास आमतौर पर है images/content-images/औरimages/style-images/ । मुझे नहीं लगता कि आगे कोई अलगाव होने की जरूरत है, लेकिन फिर से यह परियोजना पर निर्भर करता है।

फिर प्रत्येक छवि को उसके अनुसार नाम दिया जाएगा, और फिर मुझे नहीं लगता कि फ़ाइल को परिभाषित करने की कोई आवश्यकता है फ़ाइल नाम के भीतर एक छवि है। आकार उपयोगी हो सकते हैं, खासकर जब छवियों के विभिन्न आकार होते हैं।

site-logo-150x150.png
साइट-लोगो-35x35.png
शॉप-चेकआउट-बटन -40x40.png
शॉप- रिमूवल -आइटम -20x20.png
आदि

---

पालन ​​करने के लिए एक अच्छा नियम है: यदि कोई नया डेवलपर फ़ाइलों के लिए आया है, तो क्या वे घंटों तक अपना सिर खुजलाते रहेंगे, या वे यह समझ पाएंगे कि चीजें क्या करती हैं और केवल थोड़े समय के शोध की आवश्यकता है (जो कि अपरिहार्य है)?

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

Comments

छवि आकार मैं के बीच बहस कर रहा हूँ के लिए अस्पष्टता दूर करने के लिए site-logo-150w-150h.png, site-logo-w150x150h.pngया site-logo-150w150h.pngविचार -?

— डैनियल सोकोलोस्की

Answer 8

यह एक पुराना प्रश्न है, लेकिन फिर भी मान्य है।

मेरी वर्तमान सिफारिश है कि इस पंक्तियों में कुछ जाना चाहिए:

• एसेट्स (या एसेट्स-वेब या एसेट्स-www); यह ग्राहक (ब्राउज़र) द्वारा उपयोग की जाने वाली स्थिर सामग्री के लिए अभिप्रेत है
  • डेटा; कुछ xml फ़ाइलें और अन्य सामान
  • फोंट्स
  • इमेजिस
  • मीडिया
  • शैलियों
  • स्क्रिप्ट
  • lib (या तृतीय-पक्ष); यह एक ऐसा कोड है जिसे आप बनाते या संशोधित करते हैं, पुस्तकालयों को आप प्राप्त करते हैं
  • lib-modded (या तृतीय-पक्ष-संशोधित); यह उस कोड के लिए अभिप्रेत है जिसे आप संशोधित करने की उम्मीद नहीं कर रहे थे, लेकिन इस तरह से एक वर्कअराउंड / फिक्स लागू करना था, इस बीच पुस्तकालय प्रदाता ने इसे लागू कर दिया।
• inc (या एसेट्स-सर्वर या एसेट्स-लोकल); यह सर्वर द्वारा उपयोग की जाने वाली सामग्री के लिए अभिप्रेत है, क्लाइंट द्वारा उपयोग नहीं किया जाना चाहिए, जैसे PHP या सर्वर स्क्रिप्ट जैसी भाषाओं में, जैसे कि bash फाइलें
  • फोंट्स
  • lib
  • लिब-modded

मैंने सामान्य लोगों को बोल्ड में चिह्नित किया, अन्य सामान्य सामग्री नहीं हैं।

मुख्य विभाजन का कारण, भविष्य में आप सुरक्षा कारणों से सीडीएन से वेब परिसंपत्तियों को सर्वर पर लाने या क्लाइंट संपत्तियों को प्रतिबंधित करने का निर्णय ले सकते हैं।

उदाहरण के लिए, लायब्रेरी के बारे में वर्णनात्मक होने के लिए मेरे द्वारा उपयोग की जाने वाली लिबरी डाइरेक्टरीज़ के अंदर

• lib
  • jquery.com
    • jQuery
      • vX.YZ
  • GitHub
    • [पथ]
      • [पुस्तकालय / परियोजना का नाम]
        • vX.YZ (संस्करण)

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

इसके अलावा, अपने उपयोग के अनुसार सामग्री को व्यवस्थित करने के लिए स्वतंत्र महसूस करें, इसलिए कुछ परियोजनाओं में चित्र / लोगो और चित्र / आइकन अपेक्षित निर्देशिका हैं।

एक साइड नोट के रूप में, संपत्ति का नाम सार्थक है, न केवल अर्थ है कि हमारे पास वहां संसाधन हैं, बल्कि इसका अर्थ है कि परियोजना के लिए संसाधनों का मूल्य होना चाहिए और मृत वजन नहीं होना चाहिए।

Comments

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

— पाब्लो-कोई

Answer 9

बीबीसी में वेब विकास से संबंधित कई मानक हैं।

उनका मानक CSS फाइलों के लिए काफी सरल है:

http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml

आप उनकी मुख्य साइट पर कुछ उपयोगी पा सकते हैं:

http://www.bbc.co.uk/guidelines/futuremedia/