rich CSS classes naming convention

[ilya_shaikovsky]

One of the points we agreed during f-2-f skinning discussion in 4.x was to use shortened names for our rich classes as this could reduce HTML page code and increase performance espesially for cases with Iteration components.

So we need to create some short article with naming convention for CSS classes which we could then use in internal development and to provide as one of the requirements article to commiters. Here are my initial thoughts:

Rich CSS class name should be defined using for example next pattern:

rf-<component name abbreviation>[-[<component part abbreviation>][some subpart abbreviation][<state abbreviation>][some utility modificator abbreviation]]

Set of examples:

• rf-dt-c - rich class for cell (td) of datatable component
• rf-dt-hr - rich class for header row(tr) of dataTable component
• rf-dt-hc - rich class for header cell(td) of dataTable compoonent
• rf-edt-rs - rich class for selected row(tr) of extendedDataTable component

We have to publish and approve something like that now as I think we will not want to change styling of tables components for example after A2 release much. So need to have action item on Tables styles refactoring now.

B.t.w. ideally much developers asked us about how to turn off such classes generation at all. This(if possible at all) probably a question for separate discussion but such requests was risen because our generated classes sometimes makes pages much more heavy comparing with standard JSF components based page.

[jbalunas]

Yup - I agree with your abbreviations - the article you are proposing should work well in the component requirements area.

as for turning it all on/off - I'm not sure about that - I'll need to think on it.

[ilya_shaikovsky]

Ok. then I will wait for some more feedback and convert this thread to article

about turning off - I'm afraid it will not be possible to design all the components using strict semantic approach. We will probably  need some exceptions as it was discussed in some threaads about tabs and other deisgn threads. So I believe that turning off will even broke such components :/ Anyway it's separate discussion.

[ilya_shaikovsky]

After looking second time to proposal and to existent classes I think need also to divide part-subpart from state and utility modificators.

so the result:

rf-<component name abbreviation>[-[<component part abbreviation>][some subpart abbreviation][-<state abbreviation>][some utility modificator abbreviation]]

And the last stlye in examples above will be:

• rf-edt-r-s - rich class for selected row(tr) of extendedDataTable component
• and one more rf-cb-i-h - rich class for combobox iteme in hovered state.