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


10

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?

2
O princípio a que você se refere é chamado Separação de Apresentação e Conteúdo.
Robert Harvey

8
Lembre-se de que, se você não separar os arquivos, seus usuários farão o download do HTML e CSS incorporado em cada carregamento da página, em vez de baixá-lo uma vez e armazená-lo em cache.
22611 Nicole

@RobertHarvey: ok boa referência ... Mas o único motivo listado para o conteúdo / apresentação da separação é melhorar a legibilidade da máquina. No entanto, acho que não importa quando os widgets são adicionados à página com JS. O html básico não os contém de qualquer maneira!?
sebpiq

11
@ Renesis: Isso é uma grande desvantagem, é verdade ... no entanto, com o Django, por exemplo, é bastante fácil coletar seus js e css de vários modelos e mesclá-los em um único arquivo.
sebpiq

2
Ou seja, você pode exibir uma página da Web normal, uma página da Web móvel e uma página imprimível, sem precisar escrever cada página manualmente do zero, apenas aprimorando a apresentação (ou seja, o CSS).
Robert Harvey

Respostas:


5

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.


11
Parece bom ! Eu não tinha pensado em simplesmente agrupar os arquivos em pastas separadas e colecioná-los para servir! Ele resolve todos os problemas - cache, SoC, ... - enquanto permite o encapsulamento. Ótimo !
sebpiq

2

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.


arquivos separados, na verdade, melhoram a velocidade e não a degradam: \
Raynos

Quantidades menores de CSS e JS no arquivo HTML são uma solicitação de página em vez de três solicitações de página, o que pode ser melhor para atender um grande número de páginas muito rapidamente. Ou pelo menos combine-os conforme necessário - code.google.com/speed/page-speed/docs/rtt.html
Bratch

1

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

Sim ... a mesma sugestão do Chade! E, de fato, tentei imediatamente e sou vendido :) Isso é muito mais limpo assim ... Sua ferramenta é para o nó, certo? Eu deveria encontrar algo parecido para Django ...
sebpiq

@sebpiq é para nó, mas estou portando para o cliente. Também é alfa e estou trabalhando intensamente para torná-lo uma plataforma organizacional HTML / CSS / JS inteira, incluindo a reutilização de código de cliente / servidor. Eu, pessoalmente, duvido que você iria encontrar nada parecido com isso em outras plataformas, você pode porta-lo embora o /
Raynos
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.