लेआउट द्वारा पार्सिंग कार्य (sass, pug, gulp, bem)

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

हमें चौड़ाई, ऊंचाई का उपयोग 100% करने के लिए किया जाता है, और यह समझ में आता है, अनुकूली के लिए सब कुछ, चौड़ाई का उपयोग करके, आप नकारात्मक मार्जिन के साथ एक समान परिणाम प्राप्त कर सकते हैं। बस अपने माता-पिता से बड़े वंश को आकार दें (उदाहरण: चौड़ाई: 130%)

यह शायद मेरे लिए सबसे मुश्किल काम था।



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



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

संयोग से, दुर्घटना से ... आप समस्या को एक कैस्केडिंग स्टाइल शीट में पाते हैं, या यों कहें कि जिस तरह से शैलियों को तत्वों पर लागू किया जाता है। वेब पर अपनी यात्रा की शुरुआत में, मैं निश्चित रूप से पढ़ता हूं कि चयनकर्ताओं की अलग-अलग आवेदन प्राथमिकताएं हैं। संक्षेप में, तो पहचानकर्ता 100 के लिए एक सामान्य (डिव, उल, ए, पी, आदि) चयनकर्ता -1 बिंदु, कक्षा -10 के लिए।



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

इसमें css (sass) फ़ाइल की संरचना शामिल हो सकती है। एक "पोर्टफोलियो" ब्लॉक है, इसमें "पोर्टफोलियो __ *" प्रकार के तत्वों का एक समूह है, लेकिन इस घोंसले के शिकार में दो वर्ग मेरे विचार से बहुत ही कम हैं।

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



लेकिन यह, मेरी राय में, बीईएम का एक अच्छा उदाहरण है

मैंने BEM के एक लेख में इस समस्या के बारे में पढ़ा था, लेकिन मैंने खुद इसका पहली बार सामना किया। यह बूटस्ट्रैप के साथ समस्याओं के समान है, यह भी था ... लंबी कक्षाएं हैं। मैं न्यूनतम कक्षाओं के साथ कैसे प्राप्त कर सकता हूं?

यह डिफ़ॉल्ट btn है।



और ये पहले से ही संशोधित बटन हैं ...

इस तथ्य के मद्देनजर कि मुझे BEM पर लिखना था, परियोजना में कुछ जटिलताएँ यहाँ से आईं। मैंने पहले ही लंबी कक्षाओं के बारे में लिखा है, यहां एक और मामला है।

पेज पर 6 समान तत्व थे। जब मीडिया प्रश्न करता है, तो तत्वों की एक निश्चित संख्या को छिपाना आवश्यक था। आखिरकार, प्रत्येक वस्तु के लिए नई कक्षाएं न बनाएं। मुझे nth-child () छद्म वर्ग का उपयोग करना था। पहले, यह केवल एक फसली तरीके (बच्चे (1), बच्चे (3), बच्चे (4), आदि) में इस्तेमाल किया गया था, अब पहले दो को छोड़कर सभी तत्वों को छिपाने की आवश्यकता थी। दस्तावेज़ पढ़ने में 5 मिनट बिताने के बाद, मैंने nth-child (n + 3) का उपयोग किया, जिससे मुझे आवश्यक परिणाम प्राप्त हुआ।



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



नीचे तस्वीर देखें। अगली प्रविष्टि div.1> p केवल "2" वर्ग के साथ ऑब्जेक्ट का चयन करेगा, div.3> p तदनुसार कक्षा "4" के साथ ऑब्जेक्ट प्राप्त करेगा। चित्र दिखाता है कि यह कैसे काम करता है। निकटतम वस्तुओं को पदानुक्रम के नीचे चुना जाता है।