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?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeO 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?
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.
Desvantagens:
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.