Какую лучше структуру выбрать?

Question

[xonar]

Здравствуйте. Не могу определиться с выбором структуры, для себя выбрал именно эти 2, но решил сосредоточиться и выбрать только одну.

Первая структура состоит в том, чтобы хранить изображения, scss, js в папке компонента.

Source - >
header - > img, scss, js
reviews - > img, scss, js
и т.д. header и reviews это компоненты, внутри которые всё лежит, а потом всё склеивается в один файл.

Второй вариант это когда js, scss, img лежат одной папке и подпапке компонента.

Source ->
img -> head -> лежат все изображения
img -> reviews -> лежат все изображения

js - > head -> лежит js этого компонента
js -> reviews -> лежит js этого компонента
и т.д.

Какой вариант лучше? Я стараюсь придерживаться первого варианта, но часто встречаю и второй. Где можно глянуть тенденцию?

Comments

[Евгений]

А если в head и в reviews будет один и тот же js использоваться? Дублировать будете? А если картинки там и там будут? Опять дубль?

[xonar]

Евгений, Что вы предлагаете?

[Евгений]

xonar, вот такую структуру использую

[Алексей Шелементьев]

Используй БЭМ структуру, когда в папке компонента/модуля лежат все нужные файлы, т.е.

modules -> header -> pug, scss, js
modules -> footer -> pug, scss, js
components -> button -> pug, scss, js

[xonar]

Алексей, Спасибо, решил остановиться на этом варианте. А если есть большое повторение кода, то лучше вынесу в другой компонент чтоб не дублировать. А по мелочи можно и продублировать считаю.

Answer 1

[WapSter]

Первый вариант) И это изобретение велосипеда БЭМ)
UPD посмотрел на коммент Евгений и не могу не согласится с ним, но с оговоркой. Если вы не крупный разработчик, а просто версатальщик, разделять по папкам просто ресурсы по типу. В крупных проектах используется первый вариант, ваш второй вариант не нужно разделять по блокам вообще. В js фреймворках и так все логично делится, и не нужно ничего придумывать.

Comments

[xonar]

Почему изобретение?) Это и есть БЭМ же) Я не говорил, что я это придумал) Я просто изучаю спрос, так как поймал себя на мысли, что встречаю очень часто проекты со второй структурой)

[WapSter]

xonar, обновил ответ.

[xonar]

WapSter, Получается, если простой проект, то достаточно всё держать в папках img, js,css не разделяя на компоненты. Одни общие папки. Если же проект крупный, то стоит разделять на компоненты. Верно?

[WapSter]

xonar, ну тут тоже все не однозначно, скажу с точки зрения человеческой, если проект крупный, но за него заплатили мало, то да все по ресурсам разделять. Так как все это разделения в стиле БЭМ требует большего времени.

[xonar]

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

Answer 2

[strelok011]

Не согласен с разнесением по компонентам всего и вся.

Структурировать правильнее по второму варианту. Если у вас реально сложный проект, то обязательно будут переиспользуемые компоненты. Иначе это не крупный проект а крупный бардак.

Примерная структура:

js - > pages -> page 1 -> лежит js этой страницы, всякие инициализации или уникальный код
js - > pages -> page 2 -> лежит js этой страницы, всякие инициализации или уникальный код
js -> utils -> утилитки
js -> components -> reviews -> лежит js этого компонента

scss -> components -> _head - стили для head
scss -> components -> _forms - стили для форм
и т.д.

А на выходе будет один файл с минифицированным js (если только нет независимых библиотек и т.п.), один-два файла с css (если используются темы, то появляются второй и проч файлы).

В крупном проекте не должно быть отдельных изображений в больших количествах. Декорации будут либо в спрайтах, либо в шрифтах, в идеале так вообще всё с cdn в конечном итоге.
Изображения заглушки - просто в каталоге images.

Плодить каталоги необходимо в соответствии со здравым смыслом как минимум.

Ну и опять же - это всё надо определять по месту. Будет проект на реакте с jcss, всё поменяется еще раз )

Comments

[WapSter]

По видимому ты никогда не использовал webpack)

[strelok011]

Грустно слышать такие голословные утверждения :)
Под ним и живу.
Когда здоровый проект, у нас БЭМ в таком исполнении не зашел от слова совсем.