"सीएसएस के साथ अच्छा कैसे करें" का उत्तर

संकेत - यह अभ्यास है, लेकिन यह भी बड़ी तस्वीर की समझ है।

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

मेरे द्वारा देखे जाने वाले प्रश्नों में से एक है चीजों की बड़ी तस्वीर के लिए। जबकि प्रश्न-उत्तर प्रकार की अवधारणा स्टैकऑवरफ्लो के समान है, प्रश्न और उत्तर की प्रकृति अलग-अलग है।

अच्छे प्रश्न, और अधिक सटीक - Quora में उत्तर "स्क्रॉल करते समय मैं अपनी पृष्ठभूमि की छड़ी कैसे बनाऊं" या "मेरे बटन के लिए नरम सीमाएं कैसे सेट करें" की पंक्तियों में नहीं हैं। यहाँ मुझे गलत मत समझो, ऐसे सवाल हैं, लेकिन वे बहुत अधिक मूल्य के नहीं हैं।

हालांकि, "मैं कैसे तेजी से अच्छा हो सकता हूं" या "मैं अपना कोड कैसे व्यवस्थित करूं" क्या दिलचस्प हैं। एक प्रकार के प्रश्न, जो कि स्टैकऑवरफ्लो में आपका स्वागत नहीं है जैसा कि आप शायद जानते हैं क्योंकि वे पर्याप्त विशिष्ट नहीं हैं।

और यहाँ यह मेरा लक्ष्य है - सरल प्रश्न का उत्तर देने के लिए "अच्छा कैसे प्राप्त करें।" मैं तकनीकी विवरण में नहीं गया, क्योंकि वे महत्वपूर्ण नहीं हैं।

अवधारणाओं को समझें

यह महत्वपूर्ण है बड़ी तस्वीर समझ लो।

आप शायद जानते हैं कि पृष्ठभूमि-रंग क्या है, आप यह जान सकते हैं कि ट्रांसफॉर्मएक्स क्या करता है, फ्लोट, फ्लेक्सबॉक्स और ग्रिड। आप उनके बारे में पढ़ सकते हैं, कैसे उपयोग करें और कार्यान्वित करें। यह कठिन हिस्सा नहीं है। (+ मदद करने के लिए Google)

लेकिन ज्यादातर लोग जो संघर्ष करते हैं वह यह है कि सब कुछ एक दूसरे से कैसे जुड़ा है। क्यों कुछ निर्णय किए जाते हैं और क्यों लोग अपने स्वयं के ढांचे का आविष्कार करना पसंद करते हैं और सम्मेलनों का नामकरण करते हैं।

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

सबसे पहले, बुनियादी बातों को ठीक से कैसे प्राप्त करें, इसके साथ शुरू करते हैं।

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

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

कुछ महीनों की मेहनत के बाद, यह मूल में लिखने जैसा होगा।

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

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

https://xkcd.com/1350/

आपको बहुत सारे कोड लिखने होंगे

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

क्या ठीक से लिखना है?

यदि आप एक एजेंसी में या एक फ्रीलांसर के रूप में काम करते हैं, तो आपको सबसे अधिक संभावना है कि क्या काम करना है, लेकिन यदि नहीं, तो यहां कुछ सुझाव दिए गए हैं:

देखो बड़े लोग कैसे करते हैं

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

और यह भयानक लगता है, कई लोग आपको ईर्ष्या करेंगे।

यदि हां, तो निम्न कार्य करें: उस साइट पर जाएं जिसकी आप प्रशंसा करते हैं। यदि यह उच्च ट्रैफ़िक के साथ है तो बोनस अंक। तत्वों का निरीक्षण करना शुरू करें, देखें कि इंजीनियरों ने विशिष्ट घटकों / लेआउट को कैसे लागू किया है।

क्या देखना है इसके बारे में कुछ निर्देश:

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

लेकिन यह सब उबाऊ हो जाता है। सिर्फ पढ़ने से आप अच्छे नहीं हो सकते, आपको कुछ करना होगा। और यहाँ आप हर एक बार क्या कर सकते हैं:

फिर खुद करने की कोशिश करें

उदाहरण के लिए ड्रिबल खोलें। बहुत सारे भयानक डिजाइन हैं! आप उन लोगों के साथ क्या करेंगे? उन्हें लागू करें। आसान चुनें और सभी स्क्रीन पर सब कुछ सही बनाने की कोशिश करें।

क्यूं कर? क्योंकि यह अच्छा दिखता है, और जब आप इसे काम करते हुए देखेंगे तो आपको बहुत अच्छा लगेगा।

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

इसे यहां देखें: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

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

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

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

दो घंटे से भी कम समय में, इसे लाइव स्ट्रीमिंग करते हुए लगभग 6 घंटे में कोड किया गया।

आप यहां लागू संस्करण देख सकते हैं। यह उत्तरदायी नहीं है क्योंकि यह प्रारंभिक योजना का हिस्सा नहीं था। आप पूरी प्रक्रिया की समयबद्ध रिकॉर्डिंग भी देख सकते हैं।

अपने कोड की समीक्षा करें

यह आपके द्वारा किए गए काम की राशि नहीं है, यह गुणवत्ता भी है। अपने पुराने कोड को फिर से देखें, संभावित सुधारों की तलाश करें।

किस कारण से आप इसके कुछ हिस्सों को फिर से लिख रहे हैं? क्या तुमने डरावना जोड़ा? क्या आपने मीडिया के प्रश्नों से संघर्ष किया? क्या आपने ४-५ स्तर गहरे चयनकर्ताओं को लिखे थे?

देखने के लिए कई सर्वोत्तम प्रथाएं हैं। यहाँ उनमें से कुछ ही है:

  1. आधुनिक सीएसएस लिखने के लिए 20 प्रोटिप्स
  2. मॉड्यूलर सीएसएस नामकरण सम्मेलनों
  3. या बहुत ज्यादा सब कुछ सीएसएस के लिए इस विशाल दिशानिर्देश।

बेहतर तरीके से काम करने के लिए तेजी से काम करना, अधिक कुशल और कम गलतियों के साथ। कोड के भागों को फिर से लिखने, संपादित करने या हटाने के बिना, आपको अपने पृष्ठ को पहली बार करने की कोशिश करनी चाहिए।

आपको शुरू से ही आगे की योजना बनानी चाहिए!

घटक एक दूसरे के साथ कैसे काम करेंगे? नेस्टेड क्या है, शैलियों को विरासत में क्या मिलेगा?

आपको अच्छी तरह से योजना बनाना सीखना चाहिए

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

वे कौन से तत्व हैं, जहां वे एक बार अधिक उपयोग किए जाते हैं। क्या वे किसी तरह अलग हैं? क्या वे एक ही नियम से भिन्न हैं?

यह सब आपको बताएगा कि आपको किस प्रकार के संशोधक की आवश्यकता होगी, अपने मार्कअप की संरचना कैसे करें ताकि आप जितना संभव हो उतना पुन: उपयोग कर सकें।

नोट

यह योजना आपको बाद में समय और धन बचाएगी। जितना अधिक प्रोजेक्ट बढ़ता है, उतना ही महत्वपूर्ण है कि उसकी अच्छी नींव हो। यह कुछ ऐसा है जिसे आपने छोटी परियोजनाओं के साथ नहीं सीखा है।

और जब तक आप उस पर काम करने वाले कई लोगों के साथ बड़े कोडबेस को बनाए रखने के लिए संघर्ष करने से ठीक नहीं हो जाते, आपको परियोजना के पूरे दायरे की जांच करना चाहिए और यह सुनिश्चित करना चाहिए कि सब कुछ कैसे ठीक से तैयार किया जाए।

इसमें से अधिकांश को हल करने के लिए, अन्य डेवलपर्स नामकरण सम्मेलनों के साथ आए हैं। अपने घटकों, उनके बाल तत्वों, संशोधक, उपयोगिताओं और इसी तरह के नाम पर नियमों का एक सेट।

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

  • फिर, sass ब्लॉग से मॉड्यूलर नामकरण सम्मेलनों
  • ओरिएंटेड सीएसएस (OOCSS) का एक परिचय
  • SMACSS
  • कार्यलय
जब कुछ भी व्यवस्थित नहीं होता है तो सीएसएस के साथ संघर्ष करना कैसा लगता है। ओवरराइटिंग, ट्विकिंग, संशोधन और अधिक से अधिक गुणों को जोड़ना सबसे अधिक बार एक गड़बड़ का परिणाम होगा जो आसानी से टूट जाता है।

कई अन्य हैं, आपको पता होना चाहिए कि आपकी आवश्यकताओं में सबसे उपयुक्त क्या है। लेकिन मैं आपको सुझाव देता हूं कि इन सम्मेलनों को हल करने के लिए दस्तावेज़ीकरण, कारण और समस्याओं को पढ़ें।

आप उनमें से किसी का उपयोग नहीं कर सकते हैं, लेकिन इसका कारण जानना महत्वपूर्ण है कि वे क्यों मौजूद हैं।

टी एल; डॉ

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

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

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

अगर आपको यह लेख पसंद आया है, तो कृपया नीचे दिए गए दिल के आइकन को हिट करना न भूलें।

यह सभी देखें

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