CSS और SVGs में बड़ी संख्या में मैजिक नंबर स्वीकार्य क्यों हैं?

63

अक्सर मैं हॉट नेटवर्क क्वेश्चन लिस्ट के सवालों को इस तरह से देखता हूं कि मूल रूप से "मैं CSS में इस मनमाने आकार को कैसे आकर्षित करता हूं" पूछते हैं। निश्चित रूप से उत्तर सीएसएस या एसवीजी डेटा के ब्लॉक के एक जोड़े के साथ प्रतीत होता है यादृच्छिक हार्ड-कोडेड मानों का एक गुच्छा है जो अनुरोधित आकृति बनाते हैं।

जब मैं इसे देखता हूं, तो मुझे लगता है कि 'हाँ! कोड का एक बदसूरत ब्लॉक क्या है। मुझे उम्मीद है कि मैं अपने प्रोजेक्ट में इस तरह का सामान कभी नहीं देख पाऊंगा '। हालाँकि, मैं इन प्रकारों को क्यू एंड ऐज के रूप में देखता हूं और बहुत अधिक संख्या में उत्थान करता हूं, इसलिए स्पष्ट रूप से समुदाय को नहीं लगता कि वे खराब हैं।

लेकिन यह स्वीकार्य क्यों है? मेरे बैक-एंड अनुभव से आने से मुझे कोई मतलब नहीं है। तो यह CSS / SVG के लिए ठीक क्यों है?

— मोनिका को बहाल करो
स्रोत

38

एक ड्राइंग क्या है, अगर जादू की संख्या का एक यादृच्छिक गुच्छा नहीं है (2 के बीच स्ट्रोक के बारे में सोचें (x, y) अंक, या पिक्सेल के सरणियों, आदि) जो अच्छे दिखने के लिए होते हैं?

68

क्या सीएसएस के चर हैं? एसवीजी करता है?

— ओडेड

36

यही कारण है कि कई बड़ी परियोजनाओं में SASS या LESS जैसी CSS प्रीप्रोसेसर है जो चर का समर्थन करती है।

— Ixrec

2

@ सीएसएस के लिए, चर के लिए कुछ 40% वैश्विक समर्थन है (इसलिए, अनुशंसित नहीं जब तक कि आप अपने सभी Microsoft आगंतुकों को नहीं बताना चाहते कि वे स्वागत नहीं कर रहे हैं)। Microsoft संभवतः एज में प्रवृत्ति का पालन करेगा, और मोबाइल डिवाइस अंततः पकड़ लेंगे। दूसरी ओर, एसवीजी के पास कुछ जाली मसौदा स्थिति दस्तावेज में चर की अवधारणा है, लेकिन वे शायद कभी भी लागू नहीं होंगे।

— फेयरफॉक्स

12

क्यों? क्योंकि वे जादुई संख्या नहीं हैं। निर्देश रखने वाले प्रोग्राम के विपरीत, सीएसएस डेटा रखता है। हालाँकि CSS यकीनन पूरा ट्यूरिंग है, लेकिन यह एक प्रोग्रामिंग लैंग्वेज नहीं है।

— डेरेक 會功夫

118

सबसे पहले, चर या स्थिरांक का उपयोग करके प्रोग्रामिंग में जादू के मूल्यों से बचा जाता है। CSS वैरिएबल का समर्थन नहीं करता है, इसलिए भले ही जादू के मूल्यों पर फेंक दिया गया हो, आपके पास बहुत अधिक विकल्प नहीं हैं (सिस के रूप में एक प्रीप्रोसेसर का उपयोग करने के अलावा, लेकिन आप एक स्निपेट के लिए ऐसा नहीं करेंगे)।

दूसरे, सीएसएस जैसी डोमेन विशिष्ट भाषा में मान उतना जादू नहीं हो सकता है। प्रोग्रामिंग में, एक जादू की संख्या एक संख्या है जहां अर्थ या इरादा स्पष्ट नहीं है। यदि कोई रेखा कहती है:

x += 23;

आप पूछेंगे "क्यों 23"? तर्क क्या है? एक चर मंशा स्पष्ट कर सकता है:

x += defaultHttpTimeoutSeconds;

ऐसा इसलिए है क्योंकि एक अकेला नंबर सामान्य प्रयोजन कोड में बिल्कुल कुछ भी हो सकता है। लेकिन सीएसएस पर विचार करें:

background-color: #ffffff;
font-size: 16px;

ऊंचाई और रंग जादू नहीं है, क्योंकि अर्थ संदर्भ से पूरी तरह से स्पष्ट है। और स्थानिक मूल्य चुनने का कारण सरल है क्योंकि डिजाइनरों ने सोचा कि यह अच्छा लगेगा। एक चर का परिचय कुछ भी मदद नहीं करेगा, क्योंकि आप इसे वैसे भी " defaultBackgroundColor" और " defaultFontSize" कुछ भी नाम देंगे ।

— JacquesB
स्रोत

16

कुछ मूल्य वास्तव में सिर्फ इसलिए चुने जाते हैं क्योंकि "वे अच्छे दिखते हैं"। लेकिन ओपी से जुड़े उदाहरण में कई बार समान मूल्य होता है, लेकिन यह स्पष्ट नहीं है कि वे एक ही चीज़ का प्रतिनिधित्व करते हैं या केवल एक ही मूल्य संयोग से है। इसके अलावा यह एक मूल्य का उपयोग करता है 198pxजो किसी और चीज के आकार का अंतर है ( 200px) और एक 2pxसीमा।

— कोडइन्चोअस

1

@CodesInChaos: हाँ, कुछ मामले हैं जहाँ चर या किसी प्रकार की निर्भरता के भाव शांत होंगे।

— जाकबीस

21

ध्यान दें कि सीएसएस करता है समर्थन चर

— phihag

28

चश्मा में @phihag, हाँ, लेकिन जंगल में सही कह रही है, नहीं इतना (मैं 40% वैश्विक समर्थन इस टिप्पणी के समय पर विचार नहीं करते "के रूप में व्यापक रूप से समर्थित"। हालांकि, अगर आप कर रहे हैं कि, में भविष्य में , हमारे पास सीएसएस चर होंगे। और मैंने आज कुछ नया सीखा है, इसलिए इसके लिए धन्यवाद।

— phyrfox

2

@JaredSmith यह अपेक्षाकृत बड़े पैमाने पर वेबएप्प के लिए ठीक है, हालांकि एक विशाल पॉलीफिल सहित आम (शायद स्थिर) पृष्ठों के लिए ओवरकिल है।

— डेरेक 會功夫

81

यह स्वीकार्य है क्योंकि ये प्रारूप कोड नहीं हैं , बल्कि डेटा हैं । यदि आप सभी "मैजिक नंबर" को हटाना चाहते थे, तो आप अनिवार्य रूप से हर लेबल को डुप्लिकेट करेंगे, और हास्यास्पद दिखने वाली फ़ाइलों के साथ समाप्त होंगे:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

हर बार जब आपको कुछ डेटा बदलने की आवश्यकता होती है, तो आपको दो स्थानों पर देखना होगा। दी गई, ऐसी परिस्थितियाँ हैं जहाँ दोहराव से बचना अच्छा है, जैसे यदि आपके पास एक रंग है जिसे बार-बार दोहराया जाता है और आप विषयों को बदलने के लिए बदलना चाह सकते हैं। उन स्थितियों को संबोधित करने के लिए प्रीप्रोसेसर और प्रस्तावित एक्सटेंशन हैं, लेकिन सामान्य तौर पर, डेटा प्रारूप में संरचना के साथ संख्याओं का होना वांछनीय है।

— कार्ल बेवफेल्ड
स्रोत

22

+1 क्योंकि: "यह स्वीकार्य है क्योंकि ये प्रारूप कोड नहीं हैं, लेकिन डेटा हैं।"

— पीटर बी

1

"दी गई, ऐसी परिस्थितियाँ हैं जहाँ दोहराव से बचना अच्छा है, जैसे अगर आपके पास एक रंग है जिसे बार-बार दोहराया जाता है और आप विषयों को बदलने के लिए बदलना चाह सकते हैं।" - शायद वैसे भी कक्षाओं के साथ बेहतर किया जाता है: .main_color { color: .. }और उस वर्ग का उपयोग करने की विधि है

— इज़्काता

कोड जो किसी एप्लिकेशन के लुक और फील को निर्धारित करता है वह अभी भी कोड है न कि डेटा।

— ESR

26

जादू की संख्या पर प्रतिबंध इस डिजाइन सिद्धांत का मूल संस्करण है:

एक जगह निर्णय लें ।

लेकिन ये मैजिक नंबर नहीं हैं । कम से कम, जहाँ तक मुझे पता है किसी भी कोडिंग स्टाइल गाइड का संबंध नहीं है।

चौड़ाई: 200px;
ऊंचाई: 200 पीएक्स;

उन्हें स्पष्ट रूप से लेबल किया गया है। निश्चित ही, संख्याएँ समान होती हैं। लेकिन चौड़ाई चौड़ाई है और ऊंचाई ऊंचाई है। वे स्वतंत्र रूप से भिन्न होने के लिए डिज़ाइन किए गए हैं।

अब आप 5 वस्तुओं है कि सभी है, तो था ही चौड़ाई और प्रत्येक स्वतंत्र रूप से अपने चौड़ाई hardcoded मैं तुम्हारे साथ हरा होता अविवेक छड़ी।

यदि उन्हें लेबल किया जाता है, तो मैं उन्हें जादू की संख्या नहीं कहूंगा, लेकिन मैं आपको अप्रत्यक्ष छड़ी से हरा दूंगा ।

— candied_orange
स्रोत

4

यदि आपके पास एक चर की आवश्यकता के लिए पर्याप्त वस्तुएं थीं, तो आपके पास एक नई कक्षा बनाने के लिए पर्याप्त वस्तुएं हैं।

— Jaketr00

1

यह सबसे अच्छा जवाब है, क्योंकि यह इस बिंदु को दर्शाता है: वे जादू नंबर नहीं हैं।

— TheBlastOne

2

"5 वस्तुएं जो सभी के पास समान चौड़ाई की थीं और प्रत्येक ने स्वतंत्र रूप से उनकी चौड़ाई को हार्डकोड किया, मैं आपको छड़ी से हरा दूंगा।" वेब डिज़ाइन की मजेदार दुनिया में आपका स्वागत है।

— whatsisname

2

मैजिक नंबर न केवल "एक जगह निर्णय लेने" (उर्फ DRY) के कारण समस्याग्रस्त हैं, बल्कि इसलिए भी क्योंकि उन्हें समझना कठिन है।

— 11

क्या छड़ी से पीटने का कोई विकल्प है?

— djechlin

11

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

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

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

सबसे पहले हम अपने कोड में कई मैजिक नंबर दर्ज करेंगे। मार्जिन की चौड़ाई, पाठ की ऊँचाई, इंडेंटेशन इत्यादि।

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

इसलिए हम मैजिक नंबरों को निकालते हैं, और उन्हें हमारी फाइल के ऊपर रख देते हैं।

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

अब यह थोड़ा बदसूरत है। हम एक कॉन्फ़िगरेशन फ़ाइल से अपने चर संख्याओं को पढ़ते हैं।

margin 100
table 500
text size 12

एमएम, यह थोड़ा अस्पष्ट है ... उन संख्याओं का क्या मतलब है? उन नामों का क्या मतलब है? इसे थोड़ा औपचारिक करते हैं।

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

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

आपको लगता है कि यह कहां जा रहा है, आखिरकार आप सीएसएस के रूप में पहुंचते हैं। (और एक ब्राउज़र इसे रेंडर करने के लिए।)

क्या हमें अपनी कॉन्फ़िगरेशन फ़ाइल में क्षमताओं को जोड़ना चाहिए ताकि हम फिर से जादू की संख्या से बच सकें? चर जोड़ें? हमारे CSS फ़ाइल के लिए एक कॉन्फ़िगरेशन फ़ाइल जोड़ें? यह थोड़ा व्यर्थ लगता है यदि आपको याद है कि हमारी CSS फाइल पहले से ही बहुत ही विन्यास फाइल है।

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

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

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

अंत में, आप अपनी कॉन्फ़िगरेशन फ़ाइल में बहुत सारे जादुई नंबर नहीं चाहते हैं :-)

— Dorus
स्रोत

यह क्यों मायने रखता है कि अतिरेक कहाँ है? क्या रखरखाव कोई समस्या नहीं है, चाहे वह कहीं भी हो?

— पीटर मोर्टेंसन

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

— डोरस

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

— डोरस

काफी दिलचस्प मैं बस इस सवाल में भाग गया कि अमूर्त को बहुत दूर ले जाने की बात करता है, और स्थिरता और विकास के समय दोनों को खो देता है।

— डोरस

5

ऐसा क्यों है [सीएसएस / एसवीजी के लिए ठीक प्रतीत होने वाले यादृच्छिक-कोडित मूल्यों का एक गुच्छा] ठीक है?

यह ठीक नहीं है। यह संभव लिखने और सादे ".css" फ़ाइलें बनाए रखने के लिए, लेकिन अंत में यादृच्छिक हार्ड-कोडेड मूल्यों एक प्रचलित बोझ बन जाएगा।

अत्यंत सरल वेबपेजों के अलावा किसी भी चीज़ के लिए, आपको या तो एक अनुशासित "खोज और प्रतिस्थापित" रणनीति विकसित करनी होगी, या चर के साथ CSS प्रीप्रोसेसर का उपयोग करना होगा, या जावास्क्रिप्ट के माध्यम से शैलियों को परिभाषित करना होगा।

— जैक्सन
स्रोत