Какая структура файлов правильная?

Question

[HamSter]

Использую стандартную структуру:

app
    |__ css
         |__ font-awesome.css
         |__ fancybox.css
         |__ ...
         |_ style.css
    |__js
         |__ fancybox.js
         |__ ...
         |_ main.js
    |__fonts
    |__ images
    |
    |__index.html

Но в некоторых проектах вижу такую структуру и мне кажется она лучше:

app
    |__ css
         |_ style.css
    |__js
         |_ main.js
    |__fonts
    |__ images
    |__ libs
         |__ font-awesome
              |__ font-awesome.css
          |__ fancybox
              |__ fancybox.css
              |__ fancybox.js
          |__ ...
    |
    |__index.html

Какая структура файлов более правильная, какую используете Вы?

Answer 1

[sergey]

Использую стандартную под gulp заточенную сборку, уже довольно давно:

bower_components
builds
node_modules
src/
    fonts/
    img/
    template/
         header.html
         footer.html
         . . . . . . . .
    js/
         script.js
    sass/
        _base.scss
        _butons.scss
        _fonts.scss
        _forms.scss
        _media.scss
        _mixins.scss
        _sprite.scss
        _style.scss
        _variables.scss
        main.scss
    index.html
.gitignore
bower.json
gulpfile.js
package.json

на выходе можно получить две версии:
/production (минифицированные файлы)
/development
в зависимости от необходимости, внутри папок стандартный набор:

css/
   main.css
   vendor.css
fonts/
img/
js/
   script.js
   vendor.js
index.html

Comments

[kiberlain]

можно ссылку на гит?

[sergey]

kiberlain: https://github.com/sergsagan/gulp-dev

[HamSter]

ну под gulp у меня тоже своя структура https://github.com/lime7/gulp-project =) Вот кстати sass мне больше нравится как у Вас, нежели smacss

[sergey]

HamSter: крутой readme к gulp-project однако у вас

[HamSter]

SM: Чтобы не забыть что к чему и куда)

Answer 2

[iBird Rose]

вторая структура для gulp сделана. без него толку юзать такую структуру нет. потому что в конечном итоге на выходе из папки libs мы получим что то вроде libs.min.js и libs.min.css

Comments

[HamSter]

точно, это как-то не учла. Я, правда, немножко иначе делаю в сборке, но смысл понятен.

Answer 3

[Владимир Бучацкий]

"Правильно" думаю такой нет. Все зависит от проекта и используемых технологий.
На сегодня есть два популярных направления организации flie tree (smacss, bem).
Идея в корне разная.
Smacss основан на классическом подходе (разбиение проекта по технологиям), Bem же ориентирован на разбиения проекта на элементы и так же имеют громадное количество инструментов.
Все выше перечисленное имеет значения в зависимости от сложности проекта.
Разработку поддержка безусловно ускоряет если вы понимаете что вы делаете.
И так же советую ознакомится с сборщиками проекта (например gulp)
Gulp один из самых простых и быстрых.
https://smacss.com/ , https://ru.bem.info/.

Если брать из описных логичней второй вариант, таким обзором понятно какие библиотеки используете.
Вот например мой file tree по БЭМ.

Comments

[HamSter]

Если честно, то ответ не совсем по теме) Без обид. Со всем этим (что Вы описали) я уже знакома https://github.com/lime7/gulp-project. Вопрос был в двух структурах приведенных в примере. Но все равно спасибо.

Answer 4

[Олег]

Можно делить не на технологии, а на блоки. У меня так:

app
    |__ pages
       |__ index.pug
       |__ category.pug

    |__ blocks
       |__ title
       |__ logo
       |__ button

А если про билд речь то:

app
    |__ styles
       |__ fonts
          |__ roboto.woff2
       |__ img
          |__ sprite.svg
          |__ bg.svg
       |__ main.css

    |__ scripts
       |__ main.js
       |__ jquery.min.js

    |__ static
       |__ logo
          |__ logo.svg

    index.html
    category.html

Answer 5

[Сергей Горячев]

По большому счету, разницы никакой)))
Используйте то, что нравится больше)