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

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

आप अपनी परियोजना में फ़ॉन्ट आकारों को कैसे परिभाषित करते हैं? क्या यह कस्टम चर के साथ ऐसा कुछ दिखता है:

:जड़ { / * फ़ॉन्ट आकार चर */ -स्मॉल: 12px; -मध्यम: 16px; --बड़ा: 24px; }

]

अच्छा। थोड़ी देर के बाद, मान लें कि डिजाइनर एक नायक अनुभाग के लिए एक नया

शीर्षक जोड़ता है। और यह बहुत

:root {
  /* Font size variables */
  --small: 12px;
  --medium: 16px;
  --large: 24px;
}

अगले दिन, डिजाइनर एक अच्छा फॉर्म लेबल बनाता है, जिसमें फिर से एक नया फ़ॉन्ट आकार है। यह नया आकार, हालांकि, छोटे से बड़ा है, लेकिन माध्यम से छोटा है।

ये रहा। आपको इसे क्या कहना चाहिए? $ छोटा-मध्यम? $ छोटा -2? $ Smedium? आप जो भी इसे नाम देते हैं, आप इससे खुश नहीं होंगे। क्योंकि उसके लिए कोई शब्द नहीं है।

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

मैं एक पैमाने पर पालन करने का सुझाव देता हूं, हमेशा। एक आसान फिक्स आगे के अमूर्तता, शायद कार्यात्मक नामों के पक्ष में संख्या और आकारों को खाई, $ छोटे-2 या $ xsmall के बजाय $ फॉर्म-लेबल की तरह होगा।

लेकिन इस तरह के फ़ॉन्ट आकारों का एक सेट होने की कल्पना करें:

$ छोटा: 12px; $ फॉर्म-लेबल: 14px; $ मध्यम: 16px; $ बड़ा: 24px;

यह एक टूटा हुआ पैमाना है। यह एक आकार की अवधारणा है और एक घटक अवधारणा एक साथ मिश्रित है। यह सवाल उठाता है। क्या अलर्ट या एक बटन को $ फॉर्म-लेबल का उपयोग करने की अनुमति दी जानी चाहिए? Yuck।

] मुझे आपसे पूछना चाहिए, फिर $ अल्फा से बड़ा क्या है? $ अल्फा-लार्ज? या प्रतीक्षा करें, क्या $ अल्फा

छोटा है

एक?

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

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

H1 { फ़ॉन्ट-आकार: क्लैंप (var (-पाठ-आकार-बड़े), calc (var (-पाठ-आकार-आधार) * var (-पाठ-आकार-स्केलर)), var (-पाठ-आकार-ह्यूज)); } हमें एक बेहतर सिस्टम की आवश्यकता है

] यह आधुनिक दिन का विकास है - mvp

, फुर्तीली, और अन्य सभी गर्म buzzwords।

जो हमें चाहिए वह एक स्केल सिंटैक्स है जो परिवर्तनों के लिए जगह की अनुमति देता है। ब्रेकिंग परिवर्तनों को पेश किए बिना पैमाने पर एक नया आकार जोड़ना आसान होना चाहिए। मैं एक तरह के पैमाने के बारे में सोच रहा हूं जो दोनों

लचीला

h1 {
  font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}

अनंत

है। यह $ छोटे, $ मध्यम और $ बड़े से अधिक परिष्कृत होना चाहिए।

] अधिमानतः, आपको सेटिंग्स फ़ाइल या कॉन्फ़िगरेशन में, या जहाँ भी आप इन चीजों को संग्रहीत करते हैं, में चर नामों को नहीं देखना चाहिए। यदि $ एप्सिलॉन $ सिग्मा से पहले या बाद में आता है तो मेरे पास मामूली सुराग नहीं है। क्या आप?

मौजूदा सिस्टम का उपयोग करना कुछ नया आविष्कार करने की कोशिश करने से पहले, क्या कोई मौजूदा वाक्यविन्यास या सिस्टम है जिसका हम लाभ उठा सकते हैं? यहाँ कुछ मैं सामना कर रहा हूँ। इकाइयों की अंतर्राष्ट्रीय प्रणाली

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

] महाद्वीप और देश के आधार पर नाम अलग -अलग हैं। इसके अलावा, एक ही नाम के अलग -अलग आकार हो सकते हैं, इसलिए ... काफी भ्रामक।

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

कई प्रकार के मिर्च मिर्च हैं। $ Habanero, $ Cayenne की तुलना में गर्म है, जो $ Jalapeno की तुलना में गर्म है। यह मजेदार होगा, हाँ?

] यदि आप मिर्च में नहीं हैं, तो आप यह नहीं जान सकते कि कौन सी काली मिर्च किसी अन्य काली मिर्च की तुलना में गर्म है - इसलिए, यह सार्वभौमिक रूप से सहज नहीं है। इसके अलावा, बेल मिर्च स्कोविल स्केल पर 0 है, और कुछ भी नीचे नहीं है। कैरोलिना रीपर दुनिया की सबसे गर्म काली मिर्च है, इसलिए पैमाना परिमित है।

और हाँ, मिर्च स्केल-वार बड़े या छोटे नहीं हैं, वे गर्म हैं। खराब अवधारणा। शायद कुछ अधिक सामान्य, जैसे गेंदों के प्रकार?

विभिन्न प्रकार की गेंदों की एक बड़ी रेंज है। आपके पास हैंडबॉल, सॉकर बॉल, वॉलीबॉल आदि हैं। दवा की गेंद से कुछ बड़ा करने की जरूरत है? $ समुद्र तट का उपयोग करें। टेनिस बॉल से कुछ छोटा? $ पिंगपोंग का उपयोग करें। यह बहुत सहज है, जैसा कि मैंने कल्पना की है कि हर कोई किसी बिंदु पर सभी प्रकार की गेंदों के साथ खेला है, या कम से कम खेल से उनसे परिचित हैं।

लेकिन क्या एक पिंग पोंग बॉल एक गोल्फ बॉल से बड़ी है? कौन जानता है? इसके अलावा, एक बॉलिंग बॉल और एक फुटबॉल बॉल वास्तव में एक ही आकार की हैं। तो ... फिर से, सही नहीं।

]

सीधे-अप संख्याओं के बारे में कैसे? हम अकेले संख्याओं का उपयोग करने में असमर्थ हैं क्योंकि स्टाइललिन्टर जैसे उपकरण विरोध करेंगे। लेकिन इस काम की तरह कुछ होगा:

$ font-14: 14px; $ font-16: 16px; $ font-24: 24px;

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

पशु साम्राज्य के बारे में क्या?

] कुछ इस तरह की कल्पना करें:

$ माउस: 12px; $ कुत्ता: 16px; $ हिप्पो: 24px;

एक माउस से कुछ छोटा चाहिए? $ मधुमक्खी, $ चींटी या $ पिस्सू का उपयोग करें। एक भालू से बड़ा? $ मूस या $ हिप्पो का प्रयास करें। एक हाथी से बड़ा? खैर, आपके पास $ व्हेल, या बिल्ली है, हम प्रागैतिहासिक जा सकते हैं और $ टी-रेक्स का उपयोग कर सकते हैं। यहाँ निचोड़ने के लिए हमेशा एक जानवर होता है। बहुत बहुमुखी, बहुत सहज, भी अनंत (लगभग)। और मज़ा भी-मैं फ़ॉन्ट-आकार: $ गिलहरी करने का मन नहीं करूंगा। ?

] लेकिन हो सकता है कि जब तक यह स्केल हो जाए तब तक यह कोई बड़ी बात नहीं है।

मैंने इस तरह से बहुत अधिक समय बिताया है।

या मेरे पास है? कोड बेस वह जगह है जहाँ आप अपना काम के घंटे बिताते हैं। यह आपके काम का माहौल है, ठीक कुर्सियों और मॉनिटर की तरह। और कार्यस्थल एक अच्छी जगह होनी चाहिए।

आप अपने फ़ॉन्ट आकार के तराजू को कैसे संभालते हैं? क्या आपके पास फोंट के लिए एक प्रणाली है और दूसरा मार्जिन जैसी चीजों के लिए? क्या कोई आपके कोड में सही कूद सकता है और समझ सकता है कि सब कुछ कैसे व्यवस्थित है? कृपया टिप्पणियों में बताएं!