Pertanyaan Di mana menempatkan file CSS di Ember.js?


Kami memiliki beberapa definisi gaya kustom dalam aplikasi kami. Saat ini semua pengembang menambahkan gaya ke app.css. Tapi kami tidak ingin menjadikannya file besar. Dan juga kami tidak ingin mengacaukan kelas-kelas gaya.

Bagaimana cara menempatkan gaya kustom kami di aplikasi kami? Apakah ada praktik terbaik untuk melakukannya? (Semua referensi panduan / dokumen dipersilahkan.)

Dan pertanyaan kedua: Apakah ada tempat untuk menempatkan gaya rute atau komponen tertentu?

Diperbarui: Untuk lebih spesifik, saya ingin menerapkan gaya berikut hanya ke rute atau komponen tertentu:

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

6
2018-05-11 07:05


asal


Jawaban:


Organisasi file CSS Anda agak subjektif. Banyak orang memiliki pendekatan berbeda. Inilah pendekatan yang bekerja dengan baik untuk saya. Perhatikan bahwa saya menggunakan ember-cli-sass.

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...

Semua file yang tercantum di atas akan dianggap "parsial", sehingga nama file akan diawali dengan underscore:

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

Stylesheet "default" dimaksudkan untuk memberikan gaya umum yang berlaku di seluruh aplikasi. Ini termasuk gaya pengaturan ulang CSS.

Stylesheet "bagian" menerapkan gaya yang khusus untuk halaman tertentu. Dalam template, biasanya ada semacam elemen pembungkus dengan ID atau kelas yang unik untuk halaman / bagian tersebut.

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

Terakhir, stylesheet "komponen" menerapkan gaya yang khusus untuk jenis komponen. Beberapa di antaranya untuk berbagai gaya tombol generik, sementara yang lain sangat spesifik.


9
2018-05-11 17:25



Anda dapat menambahkan file css Anda ke dalamnya app/styles/ direktori.

contoh:

app/styles/app.css

2
2018-05-11 09:54



Untuk komponen Anda, ember-komponen-css hampir sempurna, untuk rute Anda, saya menggemakan apa yang dikatakan kitler, menggunakan pra-prosesor seperti sass / less akan membantu Anda membuat struktur folder untuk gaya Anda yang cocok dengan aplikasi Anda.

Anda akan dapat melakukannya dengan

file app.scss / .less / .styl di

// app/styles/app.scss

@import 'routes/lovelanguage';

Berikut ini tautan ke semua preprocessors:


2
2018-05-11 14:37