18

O título já descreve a questão: por que é considerada uma má prática o uso de CSS e Javascript inline em nossos códigos?

É ruim usar isso mesmo em projetos menores?

1
  • 3
    É "tão ruim", que tem um monte de vantagem que ninguém colocou nas respostas. CSS inline evita a página "remontar" na hora que está carregando, JS inline evita que a página funcione mal numa conexão ruim. O ideal é "saiba o que está fazendo, pra usar o recurso certo na hora certa". Não existem "boas práticas", existe "saber como usar". Na maior parte dos casos, separar é bom. Mas tem horas em que o inline é muito melhor. Inclusive, se o JS/CSS serve somente para aquela página, e você pode usar includes, não tem vantagem separar. Tudo vai ser "cacheado" junto, e economiza requisições.
    – Largato
    10/03/2016 às 22:47

3 Respostas 3

13

O maior problema do uso CSS e Javascript inline é misturar diferentes tipos de coisas num mesmo lugar.

O HTML é uma linguagem de marcação para definir elementos abstratos. CSS é feito apra definir estilos visuais. Javascript traz dinâmica às páginas. Colocar tudo misturado disso dificulta a manutenção e gera muita confusão.

Embora existam algumas tags HTML que atuem na formatação, a boa prática recomendada por 100% dos profissionais é separar conteúdo da formatação.

Ter CSS e Javascript em separado ajuda não só no reaproveitamento, mas força o desenvolvedor a pensar melhor no que está fazendo, isto é, a estruturar a página em espécies de "componentes" ao invés de simplesmente repetir o mesmo estilo e script em todo lugar.

Além disso, a manutenção é muito facilitada, pois quando o HTML está desacoplado do código e estilo, você pode modificar o conteúdo sem alterar a formatação e vice-versa. O mesmo vale para novos conteúdos, se eles tiverem a mesma estrutura do que já existe a formatação e os scripts serão facilmente reaproveitáveis.


Observação: é claro que existem outros pontos, como menor uso de banda, já citada de outras formas nas demais respostas. Entretanto, existem casos onde isso é questionável. Meu objetivo nesta resposta foi ressaltar o ponto que é de longe mais crítico no assunto, afinal leva a bugs e impossibilidade de manutenção.

0
10
  1. Fica mais fácil de manter o css e Javascript estando separado do html.
  2. Você pode reutilizar o código para outras páginas ou projetos.
  3. A página fica mais leve pois o browser armazena o css no cache então quando você recarrega a página, o browser não precisa ler tudo de novo.
7

Desvantagens:

  1. Impossibilidade de reutilização do código
  2. Como consequência do item 1, o cliente precisa SEMPRE baixar o código

Lógico que você pode eliminar o problema 1 usando includes em sua linguagem server side mas o problema 2, força o browser do cliente a fazer o download do código a cada requisição do documento principal.

Se o código é um arquivo .js separado, o navegador do cliente decide se precisa baixar novamente ou se usa o cache local, o que melhora a experiência do usuário e economiza sua banda.

Mas se seu projeto é uma única página sem novas requisições, OK, não sofre os problemas que listei.

1
  • Se for uma página só, o inline tem até vantagens: economiza requisições desnecessárias, e evita o overhead dos cabeçalhos HTTP.
    – Largato
    10/03/2016 às 22:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .