Prática recomendada para organizar biblioteca Javascript e estrutura de pastas CSS [fechado]

Como você organiza sua pasta js e css em seu aplicativo da web?

Minha estrutura de projeto atual é como esta:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

Mas é mais complicado quando eu uso muitas bibliotecas javascript e plugins css. O plugin Javascript vem com seu próprio arquivo .js e, às vezes, com seu próprio arquivo .css.

Por exemplo, quando eu uso JQuery com o plugin JQueryUI, coloco jquery.js e jquery-ui.js dentro do diretório js / lib. Mas JQueryUI vem com seu próprio arquivo css. Onde devo colocar o plugin css do javascript para melhores práticas? Devo colocá-los dentro da pasta lib, para distinguir meu plugin css e javascript css? Ou em outro lugar?

Eu sei que é uma preferência pessoal, mas só quero saber como vocês organizam a pasta do seu projeto.

Desde já, obrigado :)

Vou delinear uma estrutura recomendada para organizar arquivos em seu aplicativo HTML5. Esta não é uma tentativa de criar qualquer tipo de padrão. Em vez disso, farei sugestões sobre como agrupar e nomear arquivos de uma maneira lógica e conveniente.

Seu projecto

Vamos supor que você esteja construindo um aplicativo HTML5. Em alguns casos, você pode usar a raiz do seu servidor como o contêiner principal, mas para os fins deste artigo, assumirei que seu aplicativo HTML5 está contido em uma pasta. Dentro dessa pasta, você deve criar o arquivo de índice do aplicativo ou ponto de entrada principal.

• appcropolis-project
• my-index.html

Geralmente, seu aplicativo será composto de arquivos HTML, CSS, Imagens e Javascript. Alguns desses arquivos serão específicos para seu aplicativo e alguns outros podem ser usados ​​em vários aplicativos. Isto é uma distinção muito importante. Para fazer um agrupamento eficaz de seus arquivos, você deve começar separando os arquivos de uso geral dos recursos específicos do aplicativo.

• appcropolis-project
• Recursos
• vendedores
• my-index.html

Essa separação simples torna a navegação pelos seus arquivos muito mais fácil. Depois de colocar bibliotecas e arquivos de uso geral dentro da pasta vendors , fica claro que os arquivos que você editará estarão localizados na pasta resources .

Além de seu código HTML, o restante dos arquivos em seu aplicativo são principalmente CSS, Javascript e imagens. Provavelmente, você já agrupa os arquivos do seu aplicativo dentro de pastas que correspondem a esse tipo de ativos.

• appcropolis-project
• Recursos
• css
• js
• imagens
• dados
• vendedores
• my-index.html

A pasta js conterá seu código Javascript. Da mesma forma, a pasta de imagens é o local onde você deve adicionar imagens que são usadas diretamente do index.html ou de qualquer outra página em seu aplicativo. Esta pasta de imagens não deve ser usada para hospedar arquivos relacionados a folhas de estilo. Seu código CSS e imagens relacionadas devem estar localizados dentro da pasta css . Ao fazer isso, você pode construir páginas que podem facilmente usar diferentes temas e permitir que seu aplicativo seja mais portátil.

• appcropolis-project
• Recursos
• css
• tema azul
• background.png
• imagens
• background.png
• blue-theme.css
• my-index.css
• js
• my-index.js
• my-contact-info.js
• imagens
• produtos
• computer.jpg
• cellphone.png
• printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• dados
• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt
• vendedores
• jquery
• imagens
• ajax-loader.gif
• icons-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• alguma-biblioteca-css
• some-plugin.jquery
• my-index.html
• my-contact-info.html
• my-products.html

O exemplo anterior mostra o conteúdo da pasta css . Observe que há um arquivo chamado default.css que deve ser usado como seu arquivo CSS principal. As imagens usadas pela folha de estilo padrão devem ser colocadas dentro da pasta de imagens . Se você deseja criar folhas de estilo alternativas ou se deseja substituir as regras definidas em sua folha de estilo padrão, você pode criar arquivos CSS adicionais e as pastas correspondentes. Por exemplo, você pode criar uma folha de estilo blue-theme.css e colocar todas as imagens relacionadas dentro de um blue-themepasta. Se você tiver código CSS ou Javascript que é usado apenas por uma página (neste caso, my-index.html), você pode agrupar o código específico da página dentro de arquivos .css e .js com o mesmo nome da página (por exemplo, my-index .css e my-index.js). Seu código CSS e Javascript deve ser o mais genérico possível, mas você pode controlar as exceções colocando-as em arquivos separados.

Recomendações Finais

Algumas recomendações finais devem ser feitas sobre nomes de pastas e arquivos. Como regra geral, certifique-se de usar letras minúsculas em todos os nomes de pastas e arquivos. Ao usar várias palavras para nomear um arquivo ou uma pasta, separe-os com um hífen (ou seja, my-company-logo-small.png). Se você seguir os conselhos deste artigo, deverá ser capaz de combinar várias páginas enquanto mantém os recursos comuns juntos e o código personalizado bem separado.

Finalmente, mesmo que você opte por não usar a estrutura recomendada neste artigo, é importante seguir uma convenção. Isso aumentará sua produtividade e, mais importante, tornará o trabalho que você faz fácil de ser entendido por outras pessoas.

Fonte de crédito: como organizar seus arquivos HTML, CSS e Javascript

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

É assim que organizei os recursos estáticos do meu aplicativo.