HTML & css

best practices Ep.I

SeePix's Talk #001

Think of me like Yoda,

but instead of being little and green

I wear [stupid shirts]

and I'm [french].

I'm your bro--I'm Broda!

HMTL...?

Use HTML5

Você pode, na verdade você DEVE.

    
    <!doctype html>

Use polyfills para IE se necessário

com ajuda de Modernizr.js.

    if (!Modernizr.svg) {
        $(".logo img").attr("src", "images/logo.png");
    }

Paraíso semântico

<header>, <nav>, <article>, <footer> etc.

Eles são seus melhores amigos.

    <header>
        <nav>...</nav>
    </header>

    <section>
        <article>...</article>
    </section>
    
    <footer>...</footer>

javascript vive no footer!

Fora do Modernizr.js tente não ter nenhum

Javascripts dentro do <head></head>

   
            <script src="..."></script>
            <script>
            ...
            </script>
        </body>
    </html>

Oh, ie6 morreu!

No more support.

css

O Melhor amigo do webdesigner

não use inline style

(Quando possível)

Lembrando disso, seus colegas agradecem!

use class não id

E muito difícil ter certeza que um

elemento será único num projeto.

Guarde os id para "hooks" e DOM manipulations.

O que é o DOM Tom?

O dom

(Document Object Model) é uma especificação da W3C, independente de plataforma e linguagem, onde pode-se dinamicamente alterar e editar a estrutura, conteúdo e estilo de um documento eletrônico.

Use box-sizing

A propriedade "box-sixing" vai salvar sua vida.

(True Story!)

O tempo de calcular o tamanho de um elemento

com border, padding, marging etc. acabou.

Um elemento de width="200px"

e margin="5px 3px 4px 7px"

continua um item de 200px!

anime sua interface com classes

não com inline styles.

Inline styles injetados com ajuda de Javascript

são muito mais dificeis de manter que classes.

selectors no abismo...

A profundidade de um selector

não deve passar dos 4 niveis.

        body div.selector ul li a {
            ...
        }

Caso contrário...

bem vindo ao mundo

das especificidades css

A World of Pain...

dash

Propriedades CSS usam o "-" como

separador de palavras (border-radius etc.).

Não reinvente a roda, use você também.

    .selector{
        ...
    }
    .selector-alt{
        ...
    }

css

cross brower

use conditional

classes para ie

        
    <!--[if IE 7]--> <html class="ie7" > <![endif]-->
    <!--[if IE 8]--> <html class="ie8" > <![endif]-->
    ...

agrupe estilo específico para ie

Não use hack no CSS principal... NUNCA!

Normalize

Use Normalize.css não Reset.css.

css

Arquitetura

divida!

Divida seu CSS em múltiplos arquivos:

normalize, layout, module, icons, typo...

Organize suas propriedades

        .selector {
                    /* Positioning */
                    position: absolute;
                    z-index: 10;
                    top: 0;
                    right: 0;

                    /* Display & Box Model */
                    display: inline-block;
                    overflow: hidden;
                    ...

                    /* Color */
                    background: #000;
                    color: #fff;

                    /* Text */
                    font-family: sans-serif;
                    font-size: 16px;
                    ...

                    /* Other */
                    cursor: pointer;
                }

concatena & Minify

Velocidade é tudo. Em Prod, ter um

CSS minified é uma necessidade.

(redução dos HTTP requests por exemplo)

Use sprites

Quando possível, junte suas imagens.