Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Um pouco de CSS

Um pouco de CSS

Abordagem rápida sobre alguns conceitos de CSS , seletores e seus pesos (especificidade) e um pouco de Performance

Avatar for Ralph Effting

Ralph Effting

November 10, 2015
Tweet

Other Decks in Programming

Transcript

  1. Especificidade A partir de um elemento podemos analisar sua especificidade

    a partir de alguns fatores: [ Inline, ID, Class, Elemento / Pseudo-elemento ]
  2. Especificidade - Id ? <div id = " myId "

    > … </div> #myid { … }
  3. Especificidade 0, 0, 0, 3 < 0, 1, 1, 0

    ul li a { … } -> 0,0,0, 3 #navbar .link-menu { … } -> 0, 1, 1, 0
  4. Perfomance CSS "80% das questo ̃ es de performance de

    web sites sa ̃ o referentes a front-end."
  5. Performance - Melhor/Pior • ID (#header); • Classe (.promo); •

    Tipo (div); • Irma ̃ o adjacente (h2 + p); • Filho (li > ul); • Descendente (ul a); • Universal (*); • Atributo ([type="text"]); • Pseudo-classe/Pseudo-elemento (a:hover).
  6. Exemplo - Melhorando a performance Código Ruim ( sem performance

    ) #social a { … } Código Bom #social .link-social { … }
  7. Importante alertar ! - Pouca diferença entre eles ( Irá

    notar em projeto gigantes ) - Mesmo não tendo tanta diferença, sempre melhor já conhecer a forma performática, nunca se sabe quando começará um projeto de grande porte.