jsf / css charge conflicts

it's the initial jsf app, i'm center integrating the distinguished designer's css the facelets files. tells me needs name id attributes quarrel tags same for charge tag tag.

his request:

<label for="username">user name:</label>
<input id="username" type="text" name="username" />

however, jsf formula renders html, i additional identifiers attributes.

my facelet code:

<label for="username">user name:</label>
<h:inputtext value="#{login.username}" id="username" name="username" />

final xhtml that's sent browser:

<label for="username">user name:</label>
<input id="j_id2:username" type="text" name="j_id2:username" />

it creates clarity me jsf standpoint, nonetheless there proceed me accommodate the distinguished designer's ask everybody happy? bad jsf oversight?

thanks!