# Файловая структура

В общем случае структура каталогов и файлов может выглядеть следующим образом:

```
app/
  ├── bemer_components/
  |     ├── modal/
  |     |     ├── index.html
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     ├── top_navbar/
  |     |     ├── index.html.slim
  |     |     ├── index.bemhtml.slim
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     └── ...
  └── ...
```

Название каталога это название компонента, которое будет использоваться в представлениях (`views`) и/или хелперах (`helpers`) приложения. Каталог может содержать любые файлы (технологии) которые необходимы для компонента, например такие, как `js`, `css`, `md` и т.д.

Соглашения о файлах (технологиях):

1. Каталог **обязательно** должен содержать индексный файл для технологии HTML (это может быть: `index.html`, `index.html.slim`, `index.html.erb` и т.д.), который [описывает структуру компонента](Создание-и-использование-UI-компонент.md), используя для этого любой шаблонизатор (`ERB`, `Slim`, `HAML` и др.) или только HTML код.

1. Если индексный файл технологии HTML для создания структуры (дерева) компонента [использует хелпер `define_component`](Хелпер-define_component.md), тогда каталог может содержать индексный файл для [шаблонов по умолчанию](Хелпер-define_templates.md) (технология `bemhtml`), он должен называться `index.bemhtml` с обязательным указанием шаблонизатора например: `index.bemhtml.erb`, `index.bemhtml.slim` и т.д.

1. Все остальные технологии (`js`, `css`, `md` и т.д.) считаются дополнительными и их можно добавлять по мере необходимости, имена файлов могут быть любыми но для единообразия и удобства лучше использовать `index` в качестве имени:

    В случае если используется [Sprockets](https://github.com/rails/sprockets-rails), тогда подключение `JS` и `CSS` файлов компонента может быть таким:

    ```coffeescript
    # Файл application.coffee
    #= require modal
    ```

    ```js
    // Файл application.js
    //= require modal
    ```

    ```scss
    // Файл application.css или application.scss
    //= require modal
    ```

    Возможно всё-таки появится поддержка индексных файлов и у [SASS](https://github.com/sass/sass/issues/690).

    При использовании [Webpacker](https://github.com/rails/webpacker) для JavaScript также можно не указывать `index.js`:
    ```js
    import 'modal'
    ```


Структуру каталогов можно организовывать по-разному в зависимости от вида приложений и решаемых задач.

## Пример №1

Компоненты разделены для использования в разных частях приложения, пользовательской (`user`), административной (`admin`) и общие (`common`) можно использовать/переопределять везде:

```
app/
  ├── bemer_components/
  |     ├── common/
  |     |     ├── modal/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── admin/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── user/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     └── ...
  └── ...
```

## Пример №2

Приложение, в котором компоненты разделены для поддержки различных устройств:

```
app/
  ├── bemer_components/
  |     ├── common/
  |     |     ├── modal/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── desktop/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── touch_pad/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── index.bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     └── ...
  └── ...
```

## Пример №3

Альтернативный способ структуры каталогов и файлов для поддержки различных устройств в приложениях начиная с `Rails 4.1` это использовать [Variants](http://guides.rubyonrails.org/4_1_release_notes.html#action-pack-variants):

```
app/
  ├── bemer_components/
  |     ├── modal/
  |     |     ├── index.html.slim
  |     |     ├── index.html+phone.slim
  |     |     ├── index.html+tablet.slim
  |     |     ├── index.bemhtml.slim
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     ├── top_navbar/
  |     |     ├── index.html.slim
  |     |     ├── index.html+phone.slim
  |     |     ├── index.html+tablet.slim
  |     |     ├── index.bemhtml.slim
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     └── ...
  └── ...
```