Class naming conventions

[Anastasia Cheetham]

Today after Jacob's FSS walkthrough, we had a discussion about naming  
conventions for classes for the FSS and for component DOM selection.  
We came up with a general naming scheme, which is described below so  
that anyone who wasn't in on the discussion can weigh in.

We decided that we would distinguish between class names used for  
visual styling, and class names used for finding DOM element for  
manipulation, etc. These different categories of classes will have  
different prefixes:

     Visual styling class-name prefix:    fl-
     DOM-selection prefix:                flc-

Visual styling classnames:

The general pattern for visual styling class names is
    fl-[thing]-[role]

So, for example:
    fl-container-flex, fl-layout-linear...

If the visual styling is specifically for a component, then the  
component name is inserted:
   fl-[componentname]-[thing]-[role]

So, for example:
   fl-reorderer-selected, fl-pager-links...


DOM-selection classnames:

The general pattern for DOM-selection classnames (i.e. default  
classnames used by a component to find its parts) is
   flc-[componentname]-[thing]-[role]

So, for example:
   flc-reorderer-drop-warning, flc-inlineEdit-displayText...



Comments, anyone?

-- 
Anastasia Cheetham                   a.cheetham at utoronto.ca
Software Designer, Fluid Project    http://fluidproject.org
Adaptive Technology Resource Centre / University of Toronto