Question

I don’t like how JSF uses the colon to separate ID’s in generated HTML, as it collides with CSS and JavaScript Selectors. And I don’t like the idea of always escaping it. Thus I would like to replace it by some other character. Are there any drawbacks? And is there a common replacement?

Answer 1

I don’t like how JSF uses the colon to separate ID’s in generated HTML, as it collides with CSS and JavaScript Selectors. And I don’t like the idea of always escaping it.

Just select elements by classname then? Is the HTML element’s nature really so unique that it requires being selected by an ID? This is usually only the case for main layout components.

---

Thus I would like to replace it by some other character. Are there any drawbacks? And is there a common replacement?

You can use any character you want, provided that it’s valid in HTML element ID/name which is specified as follows:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).

Next to the colon, the only sensible choices are the hyphen, the underscore and the period. As the period is at its own also a special character in CSS selectors, it would have the same problem as the colon. So logically you don’t have much other choice than the hyphen - and the underscore _.

As to the drawbacks, certainly there are drawbacks. You need to ensure that you are not using the new separator character anywhere in JSF component IDs like so <h:someComponent id="foo_bar" /> in case of _. Those characters are namely allowed in JSF component IDs (the colon isn’t). It would break the UIComponent#findComponent() lookup.

See also:

• By default, JSF generates unusable ids, which are incompatible with css part of web standards