Você realmente deve manter seus js, html e css separados?

Eu ouço / leio o tempo todo que é mais limpo manter seus js , html e css separados. Supostamente, torna mais fácil manter, depurar. Supostamente, é mais eficiente, porque permite o cache / minificação de arquivos css e js .

No que me diz respeito, usando estruturas da web (Django, Rails, ...), bibliotecas de modelos javascript, ... eu costumo dividir bastante uma única página html em vários modelos reutilizáveis ​​- algum tipo de widget, se você desejar . Por exemplo, eu posso ter um widget de feed de notícias , um widget múltiplo selecionado , etc ... cada um deles com um layout consistente ao longo das diferentes páginas e cada um sendo controlado por seu pedaço de javascript.

Com essa organização - o que me parece o mais limpo possível, maximizando a reutilização - tenho problemas para entender por que seria mais simples manter todos os js e css em arquivos separados. Eu meio que acho que seria muito mais simples, por exemplo :

no arquivo de vários widgets selecionado

• html
• layout básico de css
• controle de interações diretas e aprimoramentos de UX com um pouco de JS.

Eu acho que dessa maneira é mais reutilizável, muito mais sustentável, porque você não precisa rolar um arquivo js gordo , alternar para e rolar por um arquivo css gordo , alternar novamente para o seu arquivo html ... .

Então, eu adoraria saber como vocês organizam seu código, se você seguir a separação que geralmente é recomendada.

• Existem realmente boas razões para fazê-lo?
• não é que os guias da Web geralmente considerem que você não usará nenhuma ferramenta sofisticada (nesse caso, eu adoraria obter leituras on-line mais atualizadas para as melhores práticas)?
• É apenas uma questão de preferência?

Eu mantenho essa estrutura

Para cada página ou controle, dou uma pasta para sua página html (ou aspx, php, etc). Nessa pasta também há pastas para arquivos js, xml, images e css. Esses são para recursos específicos de página / controle, não recursos compartilhados.

Na raiz do site, também estão as pastas js, xml, images e css, cada uma contendo recursos gerais do site.

Os arquivos js e css no site são acumulados no servidor e retornados como um único arquivo js. As páginas específicas, como geralmente há apenas uma por página, são deixadas em paz.

Isso organiza meus recursos quanto ao seu escopo. E embora eu possa ter uma dúzia de arquivos js na pasta raiz js, eles serão retornados como um recurso js combinando e minificando-os no lado do servidor (e armazenando em cache o resultado).

Também não estou carregando recursos específicos para o paginax quando estou na pagina. O único "desperdício" pode estar no arquivo de recursos em todo o site, mas, como é armazenado em cache e muitos dos recursos serão usados ​​em vários locais, é mais eficiente.

geralmente a convenção é ter arquivos separados para JS / CSS / HTML para manter uma separação de conteúdo, apresentação e comportamento. No entanto, se a velocidade se tornar um problema, tudo dará certo.

no arquivo de vários widgets selecionado

• html
• layout básico de css
• controle de interações diretas e aprimoramentos de UX com um pouco de JS.

Eu tenho uma ferramenta de organização ( trinity ) que promove você a fazer isso.

Exceto que o arquivo do widget é dividido em 3 arquivos pequenos, HTML, CSS e JS. Isso significa que você tem seus arquivos separados, mas eles ainda estão vinculados.

Isso evita o problema de arquivos gordos, mas ainda oferece arquivos separados.

Portanto, basta colocar separações de preocupações não significa que você deve ter um grande arquivo HTML / CSS / JS. Você deve ter vários trigêmeos <HTML, CSS, JS>para todo o seu código encapsulado reutilizável

Agora, não há nada errado em ter todos esses arquivos em um arquivo, desde que sejam claramente separados.

Então, um widget que se parece

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

Está bem e ótimo. Exceto por ter tudo em um arquivo, é muito fácil para um mantenedor começar a misturar e combinar o CSS / JS / HTML.

Isso facilita demais para que ele se transforme em espaguete ao longo do tempo.

A principal razão pela qual as pessoas promovem arquivos separados é duas vezes

• downloads separados. Assim que você copiar e colar qualquer código css / js em vários "widgets", precisará fatorá-lo em seu próprio arquivo.
• Prevê agressivamente o código espaguete, não confiando no autor para manter seu css / js / html bem separado em um único arquivo