2013-08-18 5 views
9

के साथ अमूर्तता बनाना मुझे सच में यकीन नहीं है कि यह सही शीर्षक है, अगर नहीं, तो कृपया इसे बदलने में संकोच न करें। मैं एक देशी अंग्रेजी वक्ता नहीं हूँ, इसलिए मैं पूरी कोशिश एक तस्वीर की मदद से समझाने के लिए होगा:सीएसएस

enter image description here

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

यहां मैं अमूर्तता की एक परत बनाने की कोशिश कर रहा हूं ताकि मेरी सीएसएस फ़ाइल कुछ अलग यूआई पुस्तकालयों (इसे बूटस्ट्रैप, शुद्ध या नींव हो) & कोड अभी भी काम करेगी।

इस समाधान के बिना, मैं इस तरह कर रहे होते (मेरी प्रारंभिक कोड होगा):

<html> 
    <head> 
     <link rel="stylesheet" href="http://yahoo-pure.com/pure-min.css"> 
    </head> 
    <body> 
     <button class="pure-button" type="button">Some Button</button> 
    </body> 
</html> 

फिर अगर मैं दिल की मेरी परिवर्तन किया है और बूटस्ट्रैप उपयोग करने का निर्णय:

<html> 
    <head> 
     <link rel="stylesheet" href="http://twitter-bootstrap.com/bootstrap.css"> 
    </head> 
    <body> 
     <button class="btn" type="button">Some Button</button> 
    </body> 
</html> 

इसलिए मुझे यहां दो बदलाव करना है, एक स्रोत सीएसएस फ़ाइल है (बड़ी समस्या नहीं है) और बटन के लिए कक्षा (कोड बहुत बड़ा होने पर एक बड़ी समस्या है)।

(परिवर्तन मैं अगर मैं ग्रिड के उपयोग & अन्य सामान बनाने हूँ करना है कल्पना कीजिए) क्या होगा यदि मैं कुछ इस तरह करने में सक्षम हूँ:

<html> 
    <head> 
     <link rel="stylesheet" href="my-magic-stylesheet.css"> 
    </head> 
    <body> 
     <button class="myButton" type="button">Some button</button> 
    </body> 
</html> 

तो, जब मैं बूटस्ट्रैप से स्विच की तरह महसूस शुद्ध करने के लिए, मैं केवल my-magic-stylesheet.css & के अंदर परिवर्तन करता हूं, यह अभी भी काम करना चाहिए। मेरी HTML फ़ाइल my-magic-stylesheet.css और my-magic-stylesheet.css को निर्दिष्ट किसी भी लाइब्रेरी को संदर्भित कर सकती है।

मेरे दिमाग में आने वाला एक समाधान है, जो कि काफी सरल है, मैं एक अजगर लिपि लिखता हूं। सबसे पहले मैं विभिन्न वर्गों और उनके संबंधित यूआई पुस्तकालय का ध्यान देता हूं। फिर मैं एक सीएसएस लिखूंगा जिसमें मैं सामान्य श्रेणी के नामों का उपयोग करूंगा जैसे myButton। फिर मैं इस सीएसएस को अपनी लिपि में यूआई लाइब्रेरी के नाम के साथ एक और इनपुट के रूप में खिलाऊंगा। स्क्रिप्ट सीएसएस फ़ाइल & के माध्यम से चलती है तदनुसार परिवर्तन करें। (जैसे myButton से btn यदि स्क्रिप्ट के लिए कोई अन्य इनपुट bootstrap है)

लेकिन क्या इसके लिए कोई बेहतर तरीका है? पाइथन लिपि का उपयोग किए बिना हो सकता है? या कोई भी समाधान जो आपके दिमाग में आता है? मैं सीएसएस टूल्स जैसे कम/एसएएसएस के लिए भी नया हूं। क्या मैं अपनी समस्या का समाधान करने के लिए किसी भी तरह से उनका उपयोग कर सकता हूं?

+0

आपको उस स्टाइलशीट को आखिरकार रखना चाहिए जिसकी शैली आप प्राथमिकता में चाहते हैं – Hushme

+0

शायद ऐसा कर रहा है: class = 'pure-button btn'? – gen

+0

@ हूशमे - नहीं, यह मेरी समस्या का समाधान नहीं करेगा। मुझे कक्षा के नामों में भी बदलाव करना है – avi

उत्तर

1

का उपयोग कम:

.myButton { 
    .btn; 
    .pure-button; 
} 

यहाँ आप अभी भी कई classnames लेकिन कम से कम केवल एक बार के साथ मैन्युअल रूप से निपटने के लिए की जरूरत है।

0

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