HTML & CSS

BEST PRACTICES EP.2

DRY - OoCSS - SASS

SEEPIX'S TALK #002


Everybody kind of 

perceives me as being angry. 

It's not anger, 

it's motivation.

Roger Clemens


DRY

(Don't Repeat Yourself)


  • Guarde seus estilos separados do conteúdo
  • Evite Specificity aproveitando o poder do Cascading


USE CLASS NÃO ID

E muito difícil ter certeza que um 
elemento será único num projeto.

Uma Class podem ser de uso único ou multiplo. 

Guarde os id para "hooks" e DOM manipulações.

Um ID é 10 vezes mais especifico que uma Class.


pare de Reinventar a roda

porque fazer isso,
    border-bottom:none;
    padding:0;
    float:none;
    margin-left:0;
para (re)fazer isso depois?
    h2{
        font-size:2em;
        margin-bottom:0.5em;
        padding-bottom:0.5em;
        border-bottom:1px solid #ccc;
    }


PARE de superqualificar selectors

Porque isso,
    ul.nav{}
    a.button{}
    div.header{}
Quando isso é suficiente?!
    .nav{}
    .button{}
    .header{}


seja bonzinho

Seja proativo, não reativo.

    .error-text{ color:#c00 !important; }


OOCSS / SMACSS

(OBJECT Oriented css / Scalable & Modular Architecture for Css)


Separação da estrutura e da "pintura".
Abstração dos "designs patterns".
Ordem especifico de criação do código.

MVC for CSS?


Nope! mas quase!


é? Resultado?


  1. Normalize
  2. Bases (Estrutura)
  3. Layout (View)
  4. Modules
  5. Estados (States ou Controler)
  6. Themes (opção)


Let's get sassY!


SASS

Syntactically Awesome StyleSheets

Old Tech (+4 anos)!
Separação em CSS múltiplos.
Uso de variables, mixins, inheritance etc.
Minificação do CSS final.

SASS - Variables 


    $blue: #3bbfce;
    $margin: 16px;

    .content-navigation {
      border-color: $blue;
      color: darken($blue, 9%);
    }

    .border {
      padding: $margin / 2;
      margin: $margin / 2;
      border-color: $blue;
    }


SASS - mixins 


    @mixin table-base {
      th {
        text-align: center;
        font-weight: bold;
      }
      td, th {padding: 2px}
    }

    @mixin left($dist) {
      float: left;
      margin-left: $dist;
    }

    #data {
      @include left(10px);
      @include table-base;
    }

SASS - inheritance 


    .btn-a {
        background: #777;
        border: 1px solid #ccc;
        font-size: 1em;
        text-transform: uppercase;
    }

    .btn-b {
        @extend .btn-a;
    }

    .sidebar .btn-a {
        text-transform: lowercase;
    }

SASS - placeholder 


   %btn{
        background: #777;
        border: 1px solid #ccc;
        font-size: 1em;
        text-transform: uppercase;
    }
    .btn-a {
        @extend %btn;
    }
    .btn-b {
        @extend %btn;
    }
    .sidebar .btn-a {
        text-transform: lowercase;
    }

SASS - functions 


       @function fluidize($target, $context) {
            @return ($target / $context) * 100%; 
        }

        .sidebar {
            width: fluidize(350px, 1000px);
        }

SASS - if 


       $theme: light;

        header {
            @if $theme == dark {
                background: #000;
            } @else {
                background: #fff;
            }
        }

SASS - each 

       $authors: nick aimee dan drew;

        @each $author in $authors {
            .author-#{$author} {
                background: url(author-#{$author}.jpg);
            }
        }

       .author-nick {
            background: url(author-nick.jpg);
        }
        .author-aimee {
            background: url(author-aimee.jpg);
        }
        .author-dan {
            background: url(author-dan.jpg);
        }
        .author-drew {
            background: url(author-drew.jpg);
        }

SASS - for + while 

       $i: 1;

        .item {
            position: absolute;
            right: 0;
            @while $i < 4 {
                &.item-#{$i} {
                    top: $i * 30px;
                }
                $i: $i + 1;
            }
        }

       .item {
            position: absolute;
            right: 0;
        }
        .item.item-1 {
            top: 30px;
        }
        .item.item-2 {
            top: 60px; 
        }
        ...


resumindo...

  • Mixins: Grupos de Propriedades similares usadas varias vezes com poucas variações. 
  • Extends: Grupos de Propriedades exatamente similares.
  • Functions: Operações usadas e reusadas para determinar valores/resultados.

SASS - math

  • Adição +
  • Substração -
  • Multiplicação *
  • Divisão / 
  • round ($number)
  • ceil ($number) - arredonda para cima
  • floor ($number) - arredonda para baixo
  • abs ($number) - valor absoluto
  • min, max
  • percentage ($number)


SASS - cores

  • lighten (color: lighten ($color, 20%))
  • darken (color: darken ($color, 20%))
  • saturate (color: saturate ($color, 20%))
  • desaturate (ex: color: desaturate ($color, 20%))
  • mix (ex: color: mix (#ffff00, #107fc9,  20%))
  • grayscale (ex: color: grayscale ($color))
  • invert (ex: color: invert ($color))
  • complement (ex: color: complement ($color))

é muito muito mais...

Mas Roma não foi construida em um dia.
Entender e aplicar tudo isso demanda 
paciencia, dedicação e pratica.

Quinta feira vamos praticar no 
primeiro Workshop da SeePix.


Obrigado!


Sim, essa apresentação está feita com CSS & JS!
Made with Slides.com