The template for FSS looks like fl-[thing]-[role]-[state], with some rules:

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

[thing] = required the concept the class name is referring to at the most general yet still meaningful level (eg. fl-tabs, fl-widget, fl-component, 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)

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

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.