👨🏻‍🏭 🖌️ 🛑 यह कौन सा समय है? 👨🏽‍🤝‍👨🏼 👩🏼‍🎨 💰

"तुम यहाँ क्या कर रहे हो?"

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

<div data-role="header"> <a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a> <h1>My App</h1> <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save </button></div>

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

(चित्र ध्यान आकर्षित करने के लिए)

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

दोहराव - सीखने की माँ

मैं ऊपर शैलियों के बारे में बताने और समझाने की कोशिश करूंगा। उनके लेआउट की शैलियों को बनाना क्यों आवश्यक था? यह आवश्यक है:

ताकि शैलियों को आसानी से बार-बार लागू किया जा सके;
ताकि डिजाइन / तत्व बदलते समय, लेआउट में हस्तक्षेप न करें;
ताकि कोड अर्थ और स्वच्छ हो (ऊपर दो बिंदु इस अनुच्छेद में शामिल हैं);
HTML कोड / पृष्ठ को कम करने के लिए (ठीक है, हाँ, यह आजकल एक अजीब बात है);
कुछ और।

CSS3 अपनी विशेषताओं के साथ उपरोक्त सभी के बचाव में आया। लेकिन उस पर और बाद में।

चौखटे क्या करते हैं? बेशक, मुख्य बात यह है कि यह जीवन को सरल बनाता है। लेकिन बाकी:

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

ले ३

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

हम इस तरह लिखते थे:

 <button style="text-align:right; font-weight:bold; display:inline; font-size:12pt; border-radius:1em; backgrund-image: url("..")">

आज इस तरह है:

 <button class="ui-btn-right ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right">

कृपया ध्यान दें कि मैंने सभी वर्गों को नहीं बचाया, लेकिन केवल एक हिस्सा।

इसके अलावा, यदि आप इस बटन के सीएसएस को पार्स करते हैं, तो आप देखेंगे कि कई डुप्लिकेट और पुन: असाइन किए गए गुण हैं।

तो, सब कुछ है कि वस्तुतः कुछ वर्षों के लिए प्रयास किया गया था, तो बात करने के लिए, नैतिकता और लेआउट के सौंदर्यशास्त्र, गुमनामी में डूब गया है। फिर से पिछली शताब्दी में लौट आया। और यह एक मुख्यधारा बन गई है। फ्रीलांस एक्सचेंज या जॉब एक्सचेंजों पर, 90% बूटस्ट्रैप और अन्य फ्रेमवर्क की आवश्यकता होती है। लेआउट बनाने के लिए, आपको लेआउट के मूल के बजाय वर्ग के नामों का एक गुच्छा और किस वर्ग के लिए जिम्मेदार है, यह जानने की आवश्यकता है। अब आपको यह जानने की जरूरत नहीं है कि यह या यह विशेषता कैसे काम करती है और वेनिला सीएसएस पर किसी प्रकार की चिप कैसे बनाई जाती है। और यह कुछ प्रकार के डीडब्ल्यू (दृश्य मोड) या कलाकार की याद दिलाता है ... ठीक है, ठीक है, थोड़ा विचलित।

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

WTF?

आपका उचित प्रश्न, प्रिय% उपयोगकर्ता नाम% है: "मैं क्या सुझाव दे रहा हूं, मैं किसके लिए अग्रणी हूं?"

अब, एक और पैराग्राफ, और एक करीबी मामले पर चलते हैं।

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

मैं सबसे पहले सुझाव देता हूं कि किसी विचार पर विचार करें, शायद नया नहीं। एक नए प्रकार के ढांचे के ऊपर, जब लेआउट अपरिवर्तित रहता है, और केवल शैलियों को सार्वभौमिक परिवर्तन होना चाहिए। कुछ और जैसे कि reset.css और normalize.css, सिर्फ अन्य उद्देश्यों के लिए।

इसे स्पष्ट करने के लिए - मैं आपको एक उदाहरण दिखाऊंगा:

90% साइट वायरफ्रेम एचटीएमएल 5 पर कुछ इस तरह दिखते हैं

 … <body> <header>/</header> <nav></nav> <article></article> <aside></aside> <footer></footer> </body> ...

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

और अब हम कक्षाओं के बिना किसी भी तत्व का उल्लेख कर सकते हैं और आईडी (आईडी को आमतौर पर जेएस की अपेक्षा के अनुसार छोड़ दिया जाएगा)। स्पष्टता के लिए सरल सीएसएस:

 body > header, body > footer { width: 100%; text-align: center; background-color: #efe; } body > nav { width: 80%; margin: 0 auto; text-align: center; } body > article { float:left; width: 60%; background-color: #eef; } body > aside { float: right; width: 40%; background-color: #fee; }

Jsfiddle पर एक ही बात

यदि आपको एक और साइडबार जोड़ने की आवश्यकता है, तो आप टाइप के छद्म वर्ग को लागू कर सकते हैं: nth-child या इसके "ब्रदर्स"। यह देखते हुए कि तत्व हो सकता है या नहीं हो सकता है। बटन और इनपुट, उदाहरण के लिए, इनपुट [प्रकार = "बटन"] विशेषताओं का उपयोग करके कॉन्फ़िगर किया जा सकता है।

इस प्रकार, पृष्ठ को एक बार मोड़ने और इंजन पर खींचने के बाद, हम केवल खाल बदल सकते हैं। क्या वे सभी इंजन और स्थिर साइटों के लिए सार्वभौमिक बाहर बारी चाहिए। खैर, या कम से कम बदलाव के साथ। और क्या CSS इसके लिए मूल रूप से प्रयासरत नहीं है और क्या CSS3 के नवाचार प्रयासरत हैं?

बेशक, कक्षाएं पूरी तरह से नहीं छोड़ी जा सकतीं। लेकिन मैंने इस दिशा में काम किया और कम से कम कक्षाओं के साथ लेआउट बनाया।

मुझे क्या लाभ दिखाई देते हैं?

ये शुरुआत में सूचीबद्ध आइटम हैं:

- डिजाइन / तत्व बदलते समय, लेआउट में हस्तक्षेप न करें;

- कोड अर्थ, स्वच्छ और न्यूनतर है;

और भी, बहुत महत्वपूर्ण:

- उत्पन्न सीएमएस के सैकड़ों के तहत टेम्पलेट्स तुरंत riveted जा सकता है

- टेम्पलेट से थक गए? बदली हुई शैली। सीएमएस से थक गए? एक और पुरानी शैली रखो।

- कुछ और।

विपक्ष:

- अत्यधिक सीएसएस, जैसा कि सभी रूपरेखाओं में है;

- कोई क्रॉस-ब्राउज़र संगतता नहीं होगी, हालांकि इसके लिए ग्रेसफुल डिग्रेडेशन है

- कुछ और।

बेशक, आप हर किसी और हर किसी को खुश नहीं करते हैं, लेकिन उपलब्ध समाधान हर किसी के अनुकूल नहीं है।

इस तरह के चमत्कार को विकसित करने और समर्थन करने के संदर्भ में, कुछ भी नया नहीं आया। सभी रूपरेखाओं के साथ समान रूपांतर और संकलन। यानी ऐसा और ऐसा संयुक्त। केवल, मैं एक HTML फ्रेमवर्क पर दोहराता हूं।

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

PSS चलो वहाँ एक holivar हो: "आप जल रहे हैं और फ्रेम और मेरे पसंदीदा बूटस्ट्रैप में ~~सॉसेज स्क्रैप~~ में ~~कुछ भी~~ समझ ~~में~~ नहीं आता है।"

अद्यतन

मैं इसे फिर से कहने का प्रयास करूंगा, अन्यथा बहुत से लोग विपरीत दिशा में टिप्पणियों में दिखते हैं

मैं यह सोचने का सुझाव देता हूं कि एक सार्वभौमिक मॉड्यूलर HTML फ्रेमवर्क क्यों न बनाया जाए जिसके लिए शुद्ध सीएसएस में अपने कई टेम्पलेट लिखें।

उदाहरण के लिए किसी भी CMS को लें। एक सार्वभौमिक विषय UniTheme (लेआउट) बनाएं।

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

यदि व्यवस्थापक पैनल में, आइए साइडबार / विजेट्स को चालू या बंद करें - यह किसी भी तरह से लेआउट को प्रभावित नहीं करता है। बेशक, अगर कोई तत्व उस पृष्ठ पर दिखाई देता है जिसके लिए कोई शैली नहीं है, तो आपको अपने हाथों से काम करना होगा, जैसा कि सामान्य रूप से और किसी भी ढांचे में।

बूटस्ट्रैप प्रेमी कुछ शैली में तैयार यूआई तत्व भी प्रदान कर सकते हैं।

लेकिन फिर से - वे लेआउट में हस्तक्षेप के बिना उपयोग के लिए तैयार होंगे।

और मैं दोहराता हूं - बेशक, मैं कक्षाओं की पूरी अस्वीकृति का प्रस्ताव नहीं करता, लेकिन मैं उनके उपयोग को कम करने का प्रस्ताव करता हूं।

अद्यतन २

धन्यवाद मैं पहले से ही लागू उदाहरण के लिए लिंक के लिए धन्यवाद, जो मैंने लेख में सोचा था: सीएसएस ज़ेन गार्डन और एक डेमो

यह कौन सा समय है?