Page Comparison

Versions Compared

Key

This line was added.
This line was removed.
Formatting was changed.

...

Best Practices

Panel

1.

Review User Interface:

Goals
Overall Best Practices

Use clean, proper, semantic markup

Validating your markup is a good measure.

Use classes instead of ids whenever possible:

Code Block
class="portlet-titlebar"

rather than:

Code Block
id="portletTitlebar"

2.

Separate class names by dashes:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="portlet_titlebar"

3.

Prefix classes with a namespace:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="titlebar"

4.

Class names should be semantic rather than stylistic:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="big-red-bar"

5.

Multiple classes assigned to an element should be listed in this order:

FSS classes (fl-)
uPortal classes (up-)
Portlet classes (portlet-)
Custom classes

For example:

Code Block
class="fl-container-flex, up-portlet-container portlet-titlebar my-custom-class"

...