Class naming conventions

[Jacob Farber]

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090316/1cdc88a0/attachment.html>