JSF2 Dynamically CSS styling more than 2 options (not ternary) - jsf-2

Question

With JSF2, Facelets.
I need to code a CSS style based on a variable that can contain multiple (undetermined) values:
<p rendered="#{not empty element.state}" class="globalStyle CODED_CLASS_ACCORDING_TO_element.state">#{element.state}</p>
How to get CODED_CLASS_ACCORDING_TO_element.state in JSF is uncertain to me. Most of the answers I see always apply a ternary option (odd/even, on/off, applied/not_applied...) which is not valid in my case, because state can be "Done", "Under development", "initiated", etc. Neither it is to code the conversion in the bean, since it should not know about view. Is still option 3 in this answer the preferred one?
style="color: #{yourVar == 'yes' ? 'green' : 'red'};"
make two <h:outputText> components with different styles, each with a different rendered attribute (one #{yourVar == 'yes'} and
the other #{yourVar == 'no'})
define a (jstl/facelets/jsf 2.0) function that takes the var as argument and returns a style/class -
styleClass="#{my:getStyleClass(yourVar)}"
If so, I am not sure how to do this (I am entirely new to JSF). I can think of a <cc:interface> and <cc:implementation> and render the right output according to some <c:if> condition, but I am sure it is not the right way and it would bevery inneficient.

Answer 1

Just make state an enum.
public enum State {
DONE, UNDER_DEVELOPMENT, INITIATED, ETC;
}
And use it directly as class name.
<p ... class="globalStyle state #{element.state}">
.state.DONE {
color: green;
}
.state.UNDER_DEVELOPMENT {
color: orange;
}
.state.INITIATED {
color: red;
}
.state.ETC {
color: pink;
}
Using enums has other advantages too. E.g. How to use enum values in f:selectItem(s) and Localizing enum values in resource bundle.