Wohin mit CSS-Dateien in Ember.js?

Question

Wir haben einige benutzerdefinierte Stildefinitionen in unserer Anwendung. Derzeit fügen alle Entwickler dem app.css Stile hinzu. Aber wir wollen es nicht zu einer riesigen Datei machen. Und wir wollen auch nicht die Stilklassen durcheinander bringen.

Wie können wir unsere benutzerdefinierten Stile auf unserer Anwendung platzieren? Gibt es Best Practices dafür? (Alle Anleitungen/Dokumentverweise sind willkommen.)

Und eine zweite Frage: Gibt es einen Platz, um Stile einer bestimmten Route oder Komponente zu platzieren?

Aktualisiert: Um genauer zu sein, ich möchte nur eine bestimmte Strecke oder Komponente die folgende Art anzuwenden:

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

Answer 1

Sie Ihre CSS-Dateien in app/styles/ Verzeichnis hinzufügen können.

Beispiel:

app/styles/app.css 

Answer 2

Für Ihre Komponenten, ember-component-css ist nahezu perfekt, für Ihre Routen ich wiederholen, was Kitler sagte, eine Pre-Prozessor wie sass mit/weniger erhalten Sie eine Ordnerstruktur helfen schaffen für Ihre Stile, die zu Ihrer App passen.

Sie werden in der Lage sein, das zu tun, mit einer

app.scss/.Weniger/.styl Datei in

// app/styles/app.scss 

@import 'routes/lovelanguage'; 

Hier sind Links zu allen Preprozessoren:

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

Answer 3

Die Organisation Ihrer CSS-Dateien ist eher subjektiv. Viele Menschen haben unterschiedliche Ansätze. Hier ist ein Ansatz, der gut für mich funktioniert. Beachten Sie, dass ich ember-cli-sass verwende.

app/styles/app.scss

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

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

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

Alle oben würde aufgeführten Dateien als "partials", so würden die Dateinamen mit einem Unterstrich vorangestellt werden:

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

Die "Standard" Stylesheets sollen generische Stile bieten, die in der ganzen App gelten. Dies beinhaltet typischerweise CSS-Reset-Stile.

Die Stylesheets "Abschnitt" wenden Stile an, die für bestimmte Seiten spezifisch sind. In den Vorlagen gibt es normalerweise eine Art Wrapper-Element mit einer ID oder Klasse, die für diese Seite/Abschnitt einzigartig ist.

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

Zuletzt verwenden die Stylesheets "Komponenten" Stile, die spezifisch für den Komponententyp sind. Einige davon sind für verschiedene allgemeine Schaltflächenstile, während andere sehr spezifisch sind.