Где мы храним стили CSS и приложение Ember CLI Pods?

Question

Я читаю http://www.ember-cli.com/, где говорится:

Ember CLI поддерживает простой CSS из коробки. Вы можете добавить свои стили CSS в app / styles / app.css, и они будут обслуживаться в assets / application-name.css.

Есть ли соглашение о структуре папок, которому я должен следовать? Что-то вроде:

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

Или это соглашение для хранения всех пользовательских CSS в app.css?

Есть ли особые соображения, которые я должен учитывать при применении этого в приложении Pods?

Answer 1

Вы не одиноки в борьбе с ужасными глобальными проблемами CSS, которые делают разработку приложения громоздкой.

К счастью для вас, решение Ember 2.0, которое выйдет этим летом, уже не за горами. Однако вы можете воспользоваться этой возможностью сейчас, если вы чувствуете, что хотите, или просто хотите узнать, о чем я говорю в отношении Ember Component CSS, который является основным членом Ember.js.

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

Конечно, это не полное решение вашей проблемы, потому что это просто для компонентов, но поскольку компоненты являются неотъемлемой частью рабочего процесса Ember, я думаю, вы обнаружите, что сохранение CSS/SASS вместе с ними будет удобно в модулях. структура папок.

Кажется, что большинство людей разбивают css файлы на папки, названные в честь их маршрутов для организационных целей.

Обновление: в будущей версии Ember устаревшие модули будут поддерживаться в пользу новой адаптации базовой команды Ember системы унификации модулей для управления ресурсами проекта. Вы можете прочитать больше здесь: https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md

Answer 2

Мы разрабатываем надстройку, которая позволяет вам помещать ваши sass-файлы в ваш каталог pods!

Дайте ему попытку:

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

Скажем, у вас есть контактный маршрут и компонент контакт-бокса

Генерация обычного маршрута и компонента:

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

Затем используйте мощность ember-cli-sass-pods и создайте стиль:

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

Ваша удивительная файловая структура будет:

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

Answer 3

Я не Ember Guru, однако я хотел бы присоединиться к некоторым полезным соглашениям и инструментам, которые сообщество Ember применяет в отношении таблиц стилей, поскольку мы принимаем будущее, основанное на компонентах.

Примечание требует: ember-cli а также scss ,

С помощью этого поста: Agile Design Manifesto. Вам не нужно вставлять все ваши таблицы стилей в структуру pod, чтобы получить преимущества, пока вы...

"Организовать SCSS по маршруту и ​​компонентам"

В отношении компонентов в статье предлагается сохранить глобальный выбор:

> stylesheets/components/_flash_messages.scss

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

Для ресурсов вы можете использовать селекторы идентификаторов и соглашения Ember, чтобы шаблон с заданным идентификатором появлялся только один раз, а ваш код SCSS мог выглядеть так:

> 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";
}

Вы можете использовать это, чтобы переопределить глобальное моделирование и создать искусственную область CSS.

Тогда импортированные стили маршрута показа могут быть:

> 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;
  }
}

Учитывая эти рекомендации, вы можете использовать такой модуль, как: ember-cli-sass-pods, чтобы вы могли генерировать таблицы стилей в ваших маршрутах или компонентных модулях. Затем вам нужно будет добавить @import объявления к сгенерированным файлам в вашем app.scss файл.