CSS3 मीडिया प्रश्न कहां रखा जाए?

Question

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

1. सभी मीडिया प्रश्नों को एक साथ स्टाइलशीट या मुख्य स्टाइलशीट के अनुभाग में एक साथ रखें।
2. अपने मूल समकक्षों के नीचे मीडिया प्रश्न रखें। उदाहरण के लिए, यदि मेरे पास "न्यूज-आइटम" नामक एक मॉड्यूल है, तो मैं उस मॉड्यूल की परिभाषा के ठीक नीचे कोई आवश्यक मीडिया क्वेरी शैलियों डाल सकता हूं।

मैं बाद की तरफ झुका रहा हूं, लेकिन इसका मतलब यह होगा कि मेरे पास कई अलग-अलग मीडिया प्रश्न होंगे (सीएसएस के प्रत्येक तार्किक ब्लॉक के लिए अलग-अलग लोगों को उत्तरदायी समायोजन की आवश्यकता होती है)।

इस पर कोई विचार?

Answer 1

कैसे सिर्फ उपकरण विशिष्ट शैली

लोड करने के लिए मीडिया के प्रश्नों का उपयोग कर के बारे में

की तरह:

@import url(mydevice.css) this and (that); 

या:

<link rel="stylesheet" media="only this and (that)" href="mydevice.css" /> 

... आप डिवाइस विशिष्ट समायोजन देख रहे हैं एक मुख्य लेआउट (केवल कुछ गुणों को ओवरराइट करने) के लिए "सबथीम्स" के रूप में, यह मुझे भी समझ में आता है।

Answer 2

सास के साथ सीधे समकक्षों के नीचे मीडिया प्रश्नों का उपयोग करना आसान है। लेकिन अगर आपके सीएसएस में आपके मॉड्यूल में अच्छी तरह से टिप्पणी की गई है, तो मुझे प्रश्नों को हल करने में कोई समस्या नहीं दिख रही है क्योंकि यह ढूंढना आसान होगा।

आप थोड़ा और कोड प्रश्नों पुन: लिखने लेखन खत्म कर देंगे, लेकिन नहीं एक बड़ी बात।

Answer 3

कार्य # 2 मेरे लिए बेहतर काम करता है।

जब मैं नौसिखिया था, तो मैं दृष्टिकोण # 1 का उपयोग कर रहा था - मैं अपने मीडिया प्रश्नों को एक साथ लिख रहा था (मेरी स्टाइलशीट के नीचे या किसी अन्य फ़ाइल में)।

.header { ... } 
.news-item { ... } 
.footer { ... } 

/** 
* ... 
* 
* bla bla, imagine a huge amount of styles here 
* 
* ... 
*/ 

/** All style tweaks for screens < 1024px */ 
@media screen and (max-width: 1024px) { 
    .header { ... } 
    .news-item { ... } 
} 

यह दृष्टिकोण कुछ कमियां है। मेरे अनुभव के आधार पर, सबसे उल्लेखनीय है कि रखरखाव एक कठिन है। मुख्य कारण: .news-item तर्क सीएसएस की कई असंबंधित रेखाओं में फैला हुआ है।

बाद में, स्वाभाविक रूप से, मैंने संबंधित शैलियों को एक साथ रखने का फैसला किया। कार्य # 2:

/** Header's styles and media queries */ 
.header { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .header { ... } 
} 
@media screen and (max-width: 720px) { 
    .header { ... } 
} 

/** News-item's styles and media queries */ 
.news-item { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .news-item { ... } 
} 
@media screen and (max-width: 720px) { 
    .news-item { ... } 
} 

/** ... and so on */ 

हालांकि, इस पद्धति में, दोहरा मीडिया max-width मूल्यों ऑल-अराउंड प्रश्नों पर्याप्त पोषणीय नहीं लगती है। मैंने एक सीएसएस प्री-प्रोसेसर (एसएएसएस की तरह) का उपयोग कर इस मुद्दे को हल किया है जो मुझे उन सभी को चर के साथ बदलने और उन्हें एक बार परिभाषित करने की अनुमति देता है।

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

आपको और अधिक जानकारी में रुचि रखते हैं, तो कृपया read on my blog post :-)

Answer 4

हो सकता है आप css variables है, जो देशी समर्थन अपने सीएसएस का पुन: उपयोग है की कोशिश कर सकते हैं!

:root { 
 
    --main-color: #F06D06; 
 
} 
 

 
.main-header { 
 
    color: var(--main-color); 
 
} 
 
.main-footer { 
 
    background-color: var(--main-color); 
 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care

https://css-tricks.com/difference-between-types-of-css-variables/