O que é um código "não-obstrusivo"?
Um código não-obstrusivo separa em camadas uma aplicação front-end, ou seja, não gera acoplamento entre as partes que rodam navegador. Basicamente não se mistura códigos css, html e js. Cada camada possui a sua responsabilidade. O html renderiza informações, o css fica responsável pela formatação do layout e o js gerenciada a parte dinâmica e de interação com o usuário.
Exemplo código obstrusivo
<button id="btCalcularItem" style="font-size:16px" onclick="calcularItem()">Calcular</button>
Exemplo código não-obstrusivo
<button id="btCalcularItem">Calcular</button>
#btCalcularItem { font-size: 16px; }
$(function(){ $("#btCalcularItem ").click(function(){ calcularItem(); }); });










