rich CSS classes naming convention

Version 32

    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 PartHeader 2
    headerhdr
    footerftr
    borderbrd
    itemitm
    listlst
    rowr
    cellc
    inputinp
    fieldfld
    buttonbtn
    tabletbl
    shadowshdw
    linklnk
    contentсnt
    bodyb
    definitiondfn
    termtrm
    containercntr
    groupgr
    iconico
    labellbl
    leaflf
    nodend
    handlehnd

     

    Component/parts states abbreviations:

     

    Component StateAbbreviation
    selectedsel
    activeact
    inactiveinact
    hoveredhov
    disableddis
    higlightedhl
    expandedexp
    collapsedcolps
    frame/iframefrm
    customcst
    initialinit
    remainingrmng
    progressprgs
    completecmpl
    finishfin
    hiddenhdn
    loadingldn
    first

    first

    lastlast
    fast forwardfastfwd
    fast rewindfastrwd
    previousprev
    nextnext
    leftlft
    rightrgh
    texttxt
    closecls

     

    Controls abbreviations

     

    Component StateAbbreviation
    add

    add

    clearclr
    uploadupl
    stopstop
    statusst
    facetfct






     

     

     

    Component abbreviations:

     

    ComponentAbbreviation
    togglePaneltgp
    togglePanelItemtgp-itm
    accordionac
    accordionItemac-itm
    collapsiblePanelcp
    collapsibleSubTableTogglercsttg
    tabPaneltbp
    tabtab
    ordered listolst
    unordered listulst
    definition listdlst
    panelMenupm
    panelMenuItempm-itm
    panelMenuGrouppm-gr
    treetr
    treeNodetrn
    dataScrollerds
    statusst

     

    Messages:

     

    ComponentAbbreviation
    summarysum
    messagemsg
    detaildet
    infoinf
    warningwrn
    errorerr
    fatalftl

     

     

    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.