How do JSF/PrimeFaces tags get resolved to default CSS styles?
I am still learning
JSF and I am confused why, for example, the default style for
<p:panel> is declared as
.ui-panel in the CSS stylesheet. I could establish a pattern if the panel was from the
ui namespace (facelets) but it is in the
PrimeFaces) namespace so ui-panel doesn't really make sense. How does JSF (or in this case, PrimeFaces) map tags to default styles in CSS, i.e. what is the naming convention?
Primefaces components are powered by jquery-ui. So the naming convention is based on the naming convention of jquery ui components. Specifically, the class names play an important role in the themeing concept of primefaces that's again based on the themeroller approach of the jquery ui. The classes are split to structural and themeable. The .ui-panel is a themeable class name, classified as a widget container class, and the conventions says
.ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements specifically, to combat inheritance issues in Windows browsers.
as the widget is a panel, hence the .ui-panel. The main focus of the convention is to provide the ability to apply themes that will preserve the visual consistency of the component throughout the application