मुझे सीएसएस फ्रेमवर्क का उपयोग कब करना चाहिए?


11

CSS फ्रेमवर्क का उपयोग करने के लिए सर्वोत्तम अभ्यास परिदृश्य क्या हैं? जब फ्रेमवर्क का उपयोग करने के बजाय खरोंच से "अपने खुद के" सीएसएस को रोल करना बेहतर होता है?

जवाबों:


11

सीएसएस फ्रेमवर्क थोड़ा मुश्किल है क्योंकि वास्तव में मेरे लिए फ्रेमवर्क नहीं हैं। वे बस पूर्वनिर्धारित कक्षाएं हैं। लेकिन, यह आपका सवाल नहीं है।

सीएसएस फ्रेमवर्क मॉक-अप और वायर-फ्रेम के लिए बहुत अच्छे हैं। मैं उन्हें लाइव साइट पर उपयोग करने की अनुशंसा नहीं करूंगा क्योंकि वे आपके मार्कअप में अर्थहीन कक्षाएं जोड़ते हैं। ".span3" मुझे केवल सामग्री, डिज़ाइन के बारे में कुछ नहीं बताता।

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

मैं हमेशा अपना सीएसएस रोल करता हूं।


4
मैं इस पर Thorn007 के साथ हूं। जब आप इससे नीचे आते हैं तो CSS बहुत आसान होता है। बस एक अच्छा सीएसएस रीसेट का उपयोग करें और अपना खुद का रोल करें।
jessegavin

3

बस उनसे बचें, वे और कुछ नहीं बल्कि कष्टप्रद हैं।

खासकर यह एक।

* { margin:0; padding:0; }

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

जब मैं एक एच 1 टैग जोड़ता हूं तो मुझे कुछ चीजों की उम्मीद होती है। अधिकांश रीसेट सभी पैडिंग, मार्जिन, ब्लॉक इत्यादि को हटा देते हैं, ताकि h1 टैग अब डिफ़ॉल्ट रूप से काम न करे। इसलिए मुझे वापस जाना है और जो कुछ भी था, उसे पहले स्थान पर जोड़ना होगा।

आम तौर पर (मेरे अनुभव में) इसके लोग जो सीएसएस को नहीं समझते हैं जो कि रीसेट और फ्रेमवर्क का उपयोग करते हैं, और यह उन लोगों के लिए अधिक काम का कारण बनता है जो वे करते हैं।


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

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

h1 काफी खराब उदाहरण है, क्योंकि ब्राउज़र विभिन्न मार्जिन और इतने पर उपयोग करते हैं। व्यक्तिगत रूप से मैं रीसेट करने के लिए एक "सेट" पसंद करता हूं - यानी सब कुछ 0 पर रीसेट करने के बजाय, बस इसे अपनी खुद की स्टाइलशीट में पहले स्थान पर सेट करें!
असंतुष्टगीतगेट

* {margin:0; padding:0;}सभी का सबसे महत्वपूर्ण CSS रीसेट है। यह margin-top/maring-bottomसभी टैग के तहत भी टैग हटाता है pताकि आपको प्रत्येक पंक्ति के बीच एक विशाल स्थान दिखाई न दे। यहां तक ​​कि यह वेबसाइट संभवतः उपयोग कर रही है p {margin:0;}अन्यथा ब्राउज़र प्रत्येक पंक्ति के बीच एक विशाल स्थान पर रहता है। मैं सोच रहा हूं कि आप कैसे कह सकते हैं कि वे कष्टप्रद हैं।
मार्को डेमायो

2

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


2

मैं एरिक मेयर से reset.css का उपयोग करने की भी सलाह देता हूं, लेकिन मुझे लगता है कि CSS "फ्रेमवर्क" लेआउट के लिए फायदेमंद हो सकता है। ब्लूप्रिंट, YUI ग्रिड और 960-ग्रिड आपको सीएसएस लिखने के बिना कुछ अत्यधिक जटिल लेआउट प्राप्त करने में मदद कर सकते हैं।

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


1

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

यह मानते हुए कि आप अपने खुद के कुछ CSS लिख रहे हैं, "फ्रेमवर्क" तब उपयोगी हो सकता है जब आपको ऐसी शैलियाँ मिलें:

  1. एक से अधिक स्थानों पर उपयोग किया जाता है; तथा
  2. अपनी कक्षाओं में बंद तोड़ने के लिए पर्याप्त जटिल है

वास्तव में सरल शैलियों के लिए, यह इंगित करने के लिए कक्षाओं का उपयोग करना बेहतर है कि कुछ क्या है (उदाहरण class="navigation"), और फिर अपनी शैलीशीट में उस वर्ग के लिए शैली नियमों को लागू करके इसके रूप को परिभाषित करें।

लेकिन अधिक जटिल शैलियों के लिए जो आवश्यक रूप से किसी एक तत्व (जैसे लेआउट-संबंधित शैलियों से बंधे हुए नहीं हैं, जिस तरह की रूपरेखाएं जैसे नाम देती हैं .span3), उन्हें कक्षा में रखने और सीएसएस में उस वर्ग को लागू करने में कुछ भी गलत नहीं है। आप दोनों दृष्टिकोणों का एक साथ उपयोग कर सकते हैं।

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

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


1

मैं खाका का उपयोग करता हूं, सीएसएस के लिए।
सीएसएस है, जैसा कि ऊपर सभी कहते हैं, वास्तव में सीधा है।

हालांकि, वास्तव में, आपको मंच पर विचार करना होगा।

CSS के साथ रेंडरिंग इंजन जटिलता में जोड़ता है।

गेको बनाम वेबकीट बनाम प्रेस्टो बनाम ट्रिडेंट ... जो उस सभी सामान को करना चाहता है?

'फ्रेमवर्क' आपको यहां देता है, लेआउट लिखने की क्षमता है जो सभी ब्राउज़रों पर सबसे अधिक काम करेगा, इसलिए आपको 'डब्ल्यूटीएफ-एएम-आई-कर = -थिस-क्रैप' IE 7 सर्क्सकोड के लिए googling जाना होगा ठीक है, या कुछ इसी तरह की कामुक।

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

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

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

"हां, मैंने एबीसी के ढांचे का इस्तेमाल किया। डॉक्स यहां हैं। कोड है। प्रशिक्षण खत्म। शुभकामनाएं।"


0

जब यह आपकी सभी जरूरतों को हल कर देता है । (यह टेलरिंग के विचार पर आधारित है ।)

चौखटे पर एकमात्र पुस्तक से? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp । (केवल लिंक करना क्योंकि यह यहां मुफ़्त और प्रासंगिक है।)


यह सबसे अच्छा हो सकता है यदि आप उस पेज के संबंधित हिस्सों को काट सकते हैं और चिपका सकते हैं जिसे आपने लिंक किया है। अन्यथा, एक उत्तर के रूप में, यह एक प्रकार का प्रकाश है। लिंक केवल उत्तर यहाँ हतोत्साहित किया जाता है क्योंकि लिंक अक्सर समय के साथ टूट जाते हैं। क्या आप इस उत्तर को ओपी और भविष्य के उपयोगकर्ताओं की मदद करने के लिए अपडेट कर सकते हैं कि वे अपने दांतों को डुबो सकते हैं ?? अग्रिम में धन्यवाद!
क्लोसेट्नोक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.