Class naming conventions

[Michelle D'Souza]

+1

Michelle

On 16-Mar-09, at 2:56 PM, Jacob Farber wrote:

> I would just like to bring this thread back to life, so we can all  
> agree and ratify this approach. I've noticed there are still a lot  
> of collisions going on.
>
> Sound good?
>
> Jacob
>
>
> On Thu, Mar 12, 2009 at 9:48 AM, Jacob Farber <jacob.farber at utoronto.ca 
> > wrote:
> the order of class names is only really relevant for human  
> readability - that being said, I would just try something like
>
> class="[FSS] [DOM] [CUSTOM]"
>
> because its already recommended practice in the FSS docs to do FSS  
> always first, custom always las, like:  class="[FSS] [CUSTOM]"
> and so this would require less thinking in case there are no DOM  
> selectors involved
>
> Jacob
>
> On Thu, Mar 12, 2009 at 8:35 AM, Justin <justin.obara at utoronto.ca>  
> wrote:
> Thank you for this detailed summary Anastasia.
>
> I'm wondering if we should have a convention for the order the  
> classes appear.
>
> I.e. the DOM-selection class before the visual styling classes.
>
> Not sure how important this is or not, but it might make it easier  
> to read if they are in a consistent position.
>
> Thanks
> Justin
>
>
> On 11-Mar-09, at 4:54 PM, Anastasia Cheetham wrote:
>
>
> 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
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work
>
>
>
> -- 
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org
>
>
>
> -- 
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work

------------------------------------------------------
Michelle D'Souza
Software Developer, Fluid Project
Adaptive Technology Resource Centre
University of Toronto



-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090316/8420dfeb/attachment.html>