JSF/ Java EE CSS Styling Simplification with prependId

Without any configuration the JSF form:

<h:form id="address">
	<h:inputText id="zip" value="With prepending"/>
</h:form>

generates the following HTML output:

<form id="address" name="address" method="post" action="/jsf-prepend/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="address" value="address" />
<input id="address:zip" type="text" name="address:zip" value="With prepending" /><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-4980322844765163681:-2993627504656741843" autocomplete="off" />
</form>

The JSF ids are translated into hierarchical CSS ids what makes CSS styling harder.

JSF 2.2 comes with the prependId attribute:

<h:form id="address" prependId="false">
	<h:inputText id="zip" value="Without prepending"/>
</h:form>

With the attribute prependId="false" all ids are passed 1:1 without any transformation, what makes the CSS designers happier:

<form id="address" name="address" method="post" action="/jsf-prepend/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="address" value="address" />
<input id="zip" type="text" name="zip" value="Without prepending" /><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-5933108140449421568:-4153499441248471088" autocomplete="off" />
</form>

See you at Java EE Workshops at MUC Airport, especially at the Java EE User Interfaces workshop!