Page Comparison

...

[thing] = required the concept the class name is referring to at the most general yet still meaningful level (eg. fl-tabs, fl-widget, fl-col, fl-container, etc)
[role] = optional the purpose or action of THING, which could be a more detailed version of THING (eg. fl-tabs-centered, fl-col-flex, fl-container-500, fl-widget-titleBar)
[state] = optional a modifier of the ROLE or THING, which is only temporary and dependant on other actions (eg. fl-button-left-disabled, fl-widget-content-draggable)

Some examples of FSS class names:

• fl-col-flex: a flexible width column
• fl-tabs-left: left-oriented tabs
• fl-grid-caption: the caption of an image in a grid
• fl-widget-titlebar: the titlebar of a widget

The template for FLUID selectors looks like flc-[componentName]-[thing]-[role]-[state], with the same rules as FSS selectors.

Some examples of component selectors:

• flc-progress-label: the label for a progress bar (Progress component)
• flc-reorderer-dropWarning: the drop warning used with the reorderer (Reorderer component)
• flc-inlineEdit-textEditButton: the 'edit' button used with an inline edit (Inline Edit component
• flc-pager-pageLink-skip: a page link that should be skipped (Pager component)

When combining class names for styling and class names for selectors, the convention is

...