परिचय / पृष्ठभूमि: सीएसएस घटक
अपेक्षाकृत बड़ी वेबसाइट के लिए हम SASS के साथ काम कर रहे हैं, और घटकों में CSS का प्रबंधन करने की कोशिश कर रहे हैं। घटकों का मूल विचार यह है कि एक घटक को हर जगह एक जैसा दिखना चाहिए, DOM में आगे कंटेनर तत्वों से स्वतंत्र होना चाहिए।
इसलिए, हम इस तरह से सामान (SASS) से बचना चाहते हैं:
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}इसके बजाय, यदि हम चाहते हैं कि उपयोगकर्ता चित्र फ्रंटपेज पर अलग दिखे, तो इसके लिए एक अलग घटक होना चाहिए। जैसे SASS विरासत के साथ, या एक मिश्रण के साथ:
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}तब हमें फ्रंटपेज पर html को समायोजित करने की आवश्यकता है, ताकि यह उपयोगकर्ता चित्र के विभिन्न संस्करण का उपयोग करे।
अब तक सब ठीक है। मैंने सीएसएस घटकों के बारे में अपनी वर्तमान समझ के उदाहरण के रूप में ऊपर पोस्ट किया है।
प्रश्न: संशोधक वर्ग - अच्छा अभ्यास?
अब हम एक समस्या में चल रहे हैं: कुछ पृष्ठों में एक गहरा (काला) पृष्ठभूमि है, और इसलिए पाठ, सीमाओं और सामान को सफेद करने की आवश्यकता है।
यह किसी भी तरह घटकों से परे जाता है: एक ही घटक में डिफ़ॉल्ट रूप से अंधेरे पाठ होना चाहिए, लेकिन सफेद पाठ यदि यह अंधेरे पृष्ठभूमि के साथ एक कंटेनर के भीतर है।
तो हम इस भयानक विचार है:
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}इसलिए हमारे पास एक बाहरी "संशोधक" या "संदर्भ" वर्ग है white-on-blackजो यह बताता है कि आंतरिक तत्व कैसे प्रदर्शित होते हैं।
प्रेरणा यह है कि घटक स्वयं DOM में आगे एक कंटेनर तत्व की पृष्ठभूमि के लिए ज़िम्मेदार नहीं है।
यह काम। केवल समस्या यह है कि अगर हमारे पास अंधेरे पृष्ठभूमि के कंटेनर के भीतर एक सफेद पृष्ठभूमि कंटेनर है। लेकिन यह एक तरफ, यह ठीक काम करता है।
सवाल यह है कि क्या यह वास्तुशिल्प रूप से एक अच्छा अभ्यास है, जिसमें घटकों को एक-दूसरे से स्वतंत्र रखने की कोशिश की पृष्ठभूमि है।
वैकल्पिक के लिए एक अलग घटक होना चाहिए, जैसे my-component-on-dark-bg, जो विरासत में मिला है my-componentऔर पाठ और सीमाओं के लिए अलग रंग है। लेकिन यहां (जैसे PHP) कोड जो घटक HTML का उत्पादन करता है उसे बाहर के बारे में जानना आवश्यक है, अर्थात, क्या अंधेरे बीजी का उपयोग किया जाता है। यह मानते हुए कि घटक को प्रस्तुत करने वाला PHP कोड कंटेनर को प्रस्तुत करने वाले PHP कोड से अलग है। जो अभी भी प्रबंधनीय है, लेकिन एक संशोधक वर्ग के साथ पैटर्न के लिए एक तर्क हो सकता है, जैसा कि ऊपर वर्णित है।
टिप्पणियाँ
हम वास्तव में हमारे सीएसएस वर्गों को एक परियोजना-विशिष्ट उपसर्ग के साथ उपसर्ग कर रहे हैं। मैंने इसे सरलता के लिए यहाँ छोड़ दिया है, और क्योंकि यह किसी का व्यवसाय नहीं है कि मैं किस परियोजना पर काम कर रहा हूँ :)।