Ember.js में सीएसएस फ़ाइलों को कहां रखा जाए?

Question

हमारे पास हमारे आवेदन में कुछ कस्टम स्टाइल परिभाषाएं हैं। वर्तमान में सभी डेवलपर app.css पर शैलियों को जोड़ रहे हैं। लेकिन हम इसे एक बड़ी फाइल नहीं बनाना चाहते हैं। और हम शैली वर्गों को गड़बड़ नहीं करना चाहते हैं।

हम अपने आवेदन पर हमारी कस्टम शैलियों को कैसे रख सकते हैं? क्या ऐसा करने के लिए कोई सर्वोत्तम प्रथा है? (सभी गाइड/दस्तावेज़ संदर्भों का स्वागत है।)

और दूसरा प्रश्न: क्या किसी विशिष्ट मार्ग या घटक की शैलियों को रखने के लिए कोई जगह है?

अपडेट किया गया: अधिक विशिष्ट होना करने के लिए, मैं सिर्फ एक विशिष्ट मार्ग या घटक के लिए निम्न शैली लागू करना चाहते हैं:

body { 
    font-size: 13px; 
} 
table { 
    table-layout: fixed; 
} 

Answer 1

आप app/styles/ निर्देशिका में अपने सीएसएस फ़ाइलें जोड़ सकते हैं।

उदाहरण:

app/styles/app.css 

Answer 2

अपने घटकों के लिए, ember-component-css आदर्श के करीब है, अपने मार्गों के लिए मैं क्या kitler कहा, सास की तरह एक पूर्व प्रोसेसर का उपयोग/कम आप के लिए एक फ़ोल्डर संरचना बनाने में मदद करेंगे गूंज अपने शैलियों जो आपके ऐप से मेल खाते हैं।

आपको लगता है कि

// app/styles/app.scss 

@import 'routes/lovelanguage'; 

में एक

app.scss/.less/.styl फ़ाइल के साथ यहाँ सब preprocessors के लिंक हैं ऐसा करने में सक्षम हो जाएगा:

• ember-cli-sass
• ember-cli-less
• ember-cli-stylus

Answer 3

आपकी सीएसएस फाइलों का संगठन बल्कि व्यक्तिपरक है। कई लोगों के पास अलग-अलग दृष्टिकोण होते हैं। यहां एक दृष्टिकोण है जो मेरे लिए अच्छा काम करता है। ध्यान दें कि मैं ember-cli-sass का उपयोग कर रहा हूं।

एप्लिकेशन/शैलियों/app.scss

@import "defaults/variables"; 
@import "defaults/typography"; 
// etc... 

@import "components/buttons"; 
@import "components/modals"; 
// etc... 

@import "sections/about"; 
@import "sections/home"; 
// etc... 

"आंशिक" पर विचार किया जाएगा ऊपर सूचीबद्ध सभी फ़ाइलें, तो फ़ाइल नाम एक अंडरस्कोर के साथ उपसर्ग किया जाएगा:

├── app.scss 
├── defaults 
│   ├── _typography.scss 
│   └── _variables.scss 
├── components 
│   ├── _buttons.scss 
│   ├── _modals.scss 
│   └── _my-specific-component.scss 
└── sections 
    ├── _about.scss 
    └── _home.scss 

"डिफ़ॉल्ट" स्टाइलशीट जेनरेट शैलियों को प्रदान करने के लिए हैं जो पूरे ऐप पर लागू होते हैं। इसमें आमतौर पर सीएसएस रीसेट शैलियों शामिल हैं।

"सेक्शन" स्टाइलशीट उन शैलियों को लागू करती है जो कुछ पृष्ठों के लिए विशिष्ट हैं। टेम्पलेट्स में, आमतौर पर किसी प्रकार या रैपर तत्व के साथ कुछ प्रकार का रैपर तत्व होता है जो उस पृष्ठ/अनुभाग के लिए अद्वितीय होता है।

<section id="home"> 
    <h1>Welcome to my homepage</h1> 
<section> 

अन्त में, "घटक" स्टाइलशीट शैलियों कि घटक के प्रकार के लिए विशिष्ट हैं लागू होते हैं। इनमें से कुछ विभिन्न जेनेरिक बटन शैलियों के लिए हैं, जबकि अन्य बेहद विशिष्ट हैं।