Dove memorizziamo gli stili css e l'app Ember CLI Pods?

Question

Sto leggendo http://www.ember-cli.com/#stylesheets che dice:

Ember CLI supporta CSS pianura, fuori dalla scatola. È possibile aggiungere gli stili css a app/styles/app.css e verrà servito a assets/application-name.css.

C'è una convenzione di struttura di cartelle che dovrei seguire? Qualcosa di simile:

app/styles/application.css 
app/styles/users/index.css 
app/styles/users/new.css 
etc 

O è la convenzione per memorizzare tutti i css personalizzato in app.css?

C'è una considerazione particolare che dovrei prendere in considerazione quando si applica questo a un'app Pod?

Answer 1

Non sei il solo nella lotta per affrontare i temuti problemi globali dei CSS che rendono la crescita di un'app poco maneggevole.

Fortunatamente per te una soluzione è proprio dietro l'angolo in Ember 2.0 che cadrà questa estate. Ora puoi approfittare di questa funzione, se ti senti all'altezza o semplicemente vuoi vedere di cosa sto parlando in merito a Componente CSS di Ember da parte di un membro centrale di Ember.js.

https://www.npmjs.com/package/ember-component-css

Questa non è una soluzione completa al problema, naturalmente, perché la sua semplice per i componenti, ma dal momento che i componenti sono una parte essenziale del flusso di lavoro Ember ora penso che troverete che stashing il CSS/SASS con loro sarà utile nella struttura di una cartella di pod.

La maggior parte delle persone sembra rompere i file css in cartelle denominate in base alle proprie rotte per scopi organizzativi.

Aggiornamento: i pod saranno deprecati in una versione futura di Ember a favore del nuovo adattamento del core team Ember di un sistema di unificazione dei moduli per la gestione delle risorse del progetto. Potete leggere di più qui: https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md

Answer 2

Io non sono un Guru degli Ember, tuttavia volevo dare una mano con alcune convenzioni e strumenti utili che la comunità Ember sta adottando per quanto riguarda i fogli di stile mentre adottiamo un futuro basato sui componenti.

La nota richiede: ember-cli e scss.

Tramite questo post: An Agile Design Manifesto. Tu non necessaria necessità di inserire tutti i vostri fogli di stile in una struttura pod, per ottenere i benefici, fino a quando si ...

"Organizza SCSS da Via & Componente"

Per componenti, l'articolo suggerisce che si desidera conservare le selezioni globale:

> stylesheets/components/_flash_messages.scss

/* 
Base Styling for the Flash Messages component - how it will appear globally. 
*/ 
.flash-messages { 
    background-color: $default-flash-color; 
} 

Per le risorse è possibile sfruttare selettori di ID e convenzioni di Ember per garantire che un modello con un dato ID appare solo una volta e il tuo codice SCSS potrebbe essere simile:

> stylesheets/routes/_posts.scss

/* 
Global Styling for the "Posts" resource. 
It's an ID because it's guaranteed to only ever appear on the page once. 
Thanks Ember! 
*/ 
#posts { 
    @import "show"; 
    @import "new"; 
    @import "edit"; 
} 

È possibile utilizzare questo per ignorare globale styling e creare un falso ambito CSS.

Gli stili spettacolo percorso importati potrebbe quindi essere:

> stylesheets/routes/posts/_show.scss

/* 
Styling here is specifically for this on the "Show" route of the "Posts" resource. 
Most likely, it's empty, but it's a good place to override the global appearance of components, and ensure those changes are contained to this route only. 
*/ 

#posts-show { 
    .flash-messages { 
    background-color: $posts-show-flash-color; 
    } 
} 

Alla luce di queste raccomandazioni si potrebbe usare un modulo simile: ember-cli-sass-pods per consentire di generare fogli di stile nei tuoi percorsi o baccelli componenti. Dovresti quindi aggiungere le dichiarazioni @import ai file generati nel tuo file app.scss.

Answer 3

Sviluppiamo un componente aggiuntivo che consente di inserire i file di livello nella directory dei pod!

fare un tentativo:

https://github.com/DudaDev/ember-cli-sass-pods

dici che hai contatti percorso e componente contatto-box.

generazione del percorso regolare e componente:

ember g route contacts -p 
ember g component contact-box -p 

Quindi, usare il potere brace-cli-sass-pod e generare stile:

ember g style contacts -p 
ember g style components/contact-box -p 

la struttura del file impressionante potrebbe essere:

app/ 

app/contacts 
app/contacts/route.js 
app/contacts/template.hbs 
app/contacts/style.scss 

app/components/ 
app/components/contact-box 
app/components/contact-box/component.js 
app/components/contact-box/template.hbs 
app/components/contact-box/style.scss