HTML

• Use as few elements as possible
• Try to be semantic
• Try to use the correct tags: now we have <section>, <aside>, <article>...
• HTML5 tags cheat sheet
• Yeah... I didn't do it for Dichtbij yet

Code style

Lower case for tags:

        <section></section>

Double quotation marks for attributes

        <input type="text" />

Separate words in ID and class names by a hyphen

        <section class="article-content"></section>

Use this kind of hierarchical names

        <article class="article">
            <h2 class="article-title"></h2>
            <section class="article-description"></section>
            <section class="article-content">
                <p class="article-content-lead"></p>
            </section>
        </article>

NO inline CSS!

        <div style="color:green;">Success!</div>

NO inline Javascript!

        <a href="/" onclick="alert('You clicked!')"> Click me! </a>

And

specially

no

<tables>

*(unless you are actually representing a data table)

Templates

Keep them simple!

*(People like me should be able to understand them)

Avoid logic in the templates

If there are many differences, probably we need 2 templates.

No Javascript there!

Only the call to init the presenter

Try to use the patterns

Before writing custom HTML, please check if we have patterns that do the same thing.

Also check Andamio documentation

CSS

ALWAYS try to reuse the common styles

Use classes, not IDs

Use the variables defined in LESS

There are colors and sizes defined there

Simple selectors

        .article-title

Instead of complicated ones

        #main-content .article h2.article-title

Use classes instead of general tags

Use hyphen-separated names, not camelCase

Yes, also for the IDs

LESS

Use the force!

lesscss.org

&

        .button {
            background: red;
            &:hover {
                background: green;
            }
        }

&

        .button {
            background: red;
            .theme-blue & {
                background: blue;
            }
        }

Nesting

        .item {
            .item-tile{

            }
        }

        //The same as

        .item .item-title {}

You can use variables

Actually, you SHOULD use them

We also have a few mixins

But please use with moderation

Javascript

Do not mess the global namespace

Declare your variables inside your module

Functionality related to a template?

Place it inside a presenter

Keep it small!

Loading time is important...

... but also parsing takes time in mobile devices

Naming convention

js-whatever

Class to identify an element that will be accessed with Javascript, or tests.

This means you will be careful to change it.

No styling here.

Even if style and markup changes, this will be still there and working.

action-whatever

Class to identify an element that will have and action associated when interacting with it.

Also, no styling

Reuse

There are many things that andamio provides

The Internets provide also a lot of stuff, but...

...make sure it's efficient

Selecting elements

Up: .closest(selector)

Down: .find(selector)

Better than $("#iLoveIds")