Para facilitar o desenvolvimento de formulários responsivos é muito comum colocarmos 100% de largura nos inputs, e controlarmos seu tamanho através da largura de uma div como container, essa técnica ajuda na hora de manipular as media queries destes inputs. Isto pode ser um problema quando temos rótulos maiores que o dado de entrada por exemplo. A forma mais comum de se fazer isso é conforme html abaixo.
<!-- html-->
<div class="form-control classe-controladora">
<label>Endereço</label>
<input type="text">
</div>
<!-- css-->
label, input{
display: block;
width: 100%;
}
.classe-controladora{
width: 30%;
}
Porém seguindo os princípios de affordance, um input deve ter a largura ideal para os dados que podem ser inseridos. Se o máximo é 10 caracteres, deveria ter a larura de 10 caracteres . Sendo assim quais as alternativas melhor forma de tratar a largura de inputs, Usando o atributo size? usando css?
Penso que a um primeiro momento, a classe-controladora deveria talvez manipular somente o input, o problema seria em um sistema muito grandes onde a variação de larguras seria de difícil manutenção (principalmente se tratarmos o responsivo)
.classe-controladora input{
width: 30%
}
-- Edit --
A dúvida aqui é como seria possível equilibrar esses conceitos, pois se optarmos apenas pelo mais fácil, o affordance é prejudicado. Se fizermos todos os inputs customizados para seu conteúdo, a manutenção ficaria muito complicada.