Css in inputs using Affordance principles

To facilitate the development of responsive forms it is very common to put 100% width in the inputs, and control its size through the width of a div as a container, this technique helps when manipulating the media queries of these inputs. This can be a problem when we have labels larger than the input data for example. The most common way to do this is as per html below.

<!-- 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%;
}

But following the principles of affordance, a input must be the optimal width for the data that can be entered. If the maximum is 10 characters, it should have the larura of 10 characters . So which alternatives are the best way to treat the input width, using the size attribute? using css?

I think that at first, the class-controller should perhaps only manipulate the input, the problem would be in a very large system where the variation of widths would be difficult to maintain (especially if we treat the responsive)

 .classe-controladora input{
     width: 30%
 }

Ed Edit {

The question here is how it would be possible to balance these concepts, because if we choose only the easiest, affordance is impaired. If we do all the inputs customized for your content, the maintenance would be very complicated.