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-hdr - rich class for header row of dataTable component
• rf-dt-hdr-c - rich class for header cell(td) of dataTable compoonent
• rf-edt-r-sel - rich class for selected row(tr) of extendedDataTable component
• rf-cb-itm-hov - rich class for combobox item in hovered state.

This article was generated from the following discussion: rich CSS classes naming convention

Component parts and subparts abbreviation table:

Component/parts states abbreviations:

Controls abbreviations

Component abbreviations:

Messages:

Other

Sometimes we used some style classes like xxx-bold or xxx-width. Such usage restricted in 4.x. All the properties should be moved to corresponding general classes.