Um pouco de CSS

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

Transcript

1. Ralph Effting
2. CSS o que falarames? - Especificidade - Performance
3. Especificidade "Qualidade daquilo que é específico".
4. Especificidade A partir de um elemento podemos analisar sua especificidade a partir de alguns fatores: [ Inline, ID, Class, Elemento / Pseudo-elemento ]
5. Especificidade - Inline ? <div style="padding: 0px" ></div>
6. Especificidade - Id ? <div id = " myId " > … </div> #myid { … }
7. Especificidade - Class ? <div class =" myClass "> … </div> .myClass { … }
8. Especificidade - Elemento / Pseudo-elemento ? <ul> <li> … </li> </ul> ul li { … } ul li::after { … }
9. Especificidade - Voltando Como medir a especificidade desse seletor ? li:first-child h2 .title
10. Especificidade - Peso [ Inline, ID, Class, Elemento / Pseudo-elemento ] [ 0, 0, 1, 3 ]
11. Especificidade http://specificity.keegan.st/
12. Especificidade 0, 0, 0, 3 < 0, 1, 1, 0 ul li a { … } -> 0,0,0, 3 #navbar .link-menu { … } -> 0, 1, 1, 0
13. Perfomance CSS "80% das questo ̃ es de performance de web sites sa ̃ o referentes a front-end."
14. 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).
15. Performance - Direita para Esquerda #navbar .link-social
16. Performance - Como assim ?! Primeiro busca #navbar .link-social Depois busca #navbar .link-social
17. Exemplo - Codigo Ruim Código Ruim ( sem performance ) #social a { … }
18. Exemplo - Melhorando a performance Código Ruim ( sem performance ) #social a { … } Código Bom #social .link-social { … }
19. 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.
20. Obrigado a todos! twitter @ralffting github: /ralfting www.codetython.github.io