[Seaside] CSS classes naming convention

Dmitry Dorofeev dima-sender-3c337a at yasp.com
Fri Mar 18 16:07:40 CET 2005


Avi Bryant wrote:
> On Fri, 18 Mar 2005 13:25:12 +0300, Dmitry Dorofeev
>>Also we need some guidelines for CSS names (naming policy) to agree on before it all
>>becomes complete mess.
> 
> 
> Indeed.  Do you have a suggestion for this?
> 
> Avi

All CSS class names should start with prefixes. 

1. For navigation related containers (menus, tabs, batched list pages links,  etc) prefix should be
'navigation-'

2. For all over containers which provide different page layouts (tables, columns, listings of items, news etc)
prefix should be 'container-'

3. For all components that don't fit in previous two prefix should be 'component-'

----------------------------

Prefix should be followed by class name of the component. Example: 'container-WADateEntry'
-----
There are options for customizeable 'skins':
1. If particular component have configurable options (say skins i.e. different styles)
They should follow class name. Example: 'container-WADateEntry-small'
<div class="container-WADateEntry-small">

2. Use additional div element
<div class="container-WADateEntry"><div class="small">...</div></div>

I still not sure what is better.
------------------
I don't know if it good idea to follow naming convention for CSS classes inside component.
Example:

<div class="container-WADateEntry">
	<div class="header">Date selector</div>
</div>

I think it would be easier for both designers and developers.
===or===

<div class="container-WADateEntry">
	<div class="container-WADateEntry-header">Date selector</div>
</div>

Probably it would be more 'logical' and 'correct'.

Any comments ?

-Dmitry.


More information about the Seaside mailing list