[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

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.

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

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

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

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

Any comments ?


More information about the Seaside mailing list