This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

FSS Naming Conventions

Owned by Anastasia Cheetham
Last updated: Apr 08, 2013Version comment
1 min read


NOTE: FSS is deprecated as of 1.5
FSS Documentation

Fluid Skinning System - FSS
FSS Naming Conventions
FSS Cheat Sheet
Mobile FSS Cheat Sheet

Demos: Columns
Demos: Tabs, Menus, etc.
Demos: Text
Demos: Themes

HTML and CSS Background
CSS Bugs, Gotchas

Still need help?

Join the infusion-users mailing list and ask your questions there,
or hang out in our  IRC Channel.

Naming Conventions

FSS and Infusion both adhere to a strict naming convention for class name selectors.

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.

The reason we do this is to separate the different purposes of selectors: one to style things, one to find things in the DOM. This way, you could change your behavioural code without affecting your appearance and vice versa.