FSS Naming Conventions

The template for FSS classnames (i.e. class names use for styling) looks like fl-[fluid:thing]-[fluid:role]-[fluid:state], with some guidelines:

1. multiple words are in camelCase, so they might look like fl-[fluid:multiWordThing]-[fluid:multiWordRole]-[fluid:state]
2. components are always the first "thing", so they would look like fl-[fluid:componentName]-[fluid:thing]-[fluid:role]-[fluid:state]

[fluid: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)
[fluid: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)
[fluid: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 Infusion selectors (i.e. classnames used for programmatic manipulation of the DOM) looks like flc-[fluid:componentName]-[fluid:thing]-[fluid:role]-[fluid:state], with the same guidelines 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

<el class="flc-* fl-*">

so that the DOM selectors are before the CSS selectors.