Arquitetura e boas práticas de CSS

Transcript

1. Arquitetura e práticas de CSS Glauber Ramos
6. Problemas com CSS Normalmente é uma bagunça É dificil de manter É dificil de modificar Não tem organização Código muito especifico Código não reusável Código não testável · · · · · · ·
9. Sass Variáveis $ t e x t C o l o r : # 1 2 3 A D 3 ; . b u t t o n { c o l o r : $ t e x t C o l o r ; } S A S S
10. Sass Variáveis $ t e x t C o l o r : # 1 2 3 A D 3 ; . b u t t o n { c o l o r : $ t e x t C o l o r ; } S A S S . b u t t o n { c o l o r : # 1 2 3 A D 3 ; } C S S
11. Sass Nesting . b u t t o n { f o n t - s i z e : 1 e m ; . i c o n { c o l o r : b l u e ; } } S A S S
12. Sass Nesting . b u t t o n { f o n t - s i z e : 1 e m ; . i c o n { c o l o r : b l u e ; } } S A S S . b u t t o n { f o n t - s i z e : 1 e m ; } . b u t t o n . i c o n { c o l o r : b l u e ; } C S S
13. Sass Extend . b u t t o n { f o n t - s i z e : 1 e m ; } . b u t t o n _ p r i m a r y { @ e x t e n d . b u t t o n ; w i d t h : 3 0 0 p x ; } S A S S
14. Sass Extend . b u t t o n { f o n t - s i z e : 1 e m ; } . b u t t o n _ p r i m a r y { @ e x t e n d . b u t t o n ; w i d t h : 3 0 0 p x ; } S A S S . b u t t o n , . b u t t o n _ p r i m a r y { f o n t - s i z e : 1 e m ; } . b u t t o n _ p r i m a r y { w i d t h : 3 0 0 p x ; } C S S
15. Sass Mixins @ m i x i n b u t t o n { f o n t - s i z e : 1 e m ; } . b u t t o n { @ i n c l u d e b u t t o n ; } S A S S
16. Sass Mixins @ m i x i n b u t t o n { f o n t - s i z e : 1 e m ; } . b u t t o n { @ i n c l u d e b u t t o n ; } S A S S . b u t t o n { f o n t - s i z e : 1 e m ; } C S S
17. CSS3 Mixins Typography Mixins Utilities Mixins Maneira fácil de criar sprites · · · ·
22. Base b o d y { f o n t - f a m i l y : A r i a l , s a n s - s e r i f ; m a x - w i d t h : 1 0 0 0 p x ; b a c k g r o u n d : # 3 3 3 ; f o n t - s i z e : 1 6 p x ; } t a b l e { m a r g i n : 0 a u t o ; } u l { m a r g i n : 0 ; } h 1 , h 2 , h 3 { m a r g i n : 1 e m ; } S A S S
29. Estrutura | - - s t y l e s h e e t s / | | - - m o d u l e s / | | - - _ b a s e . s c s s | | - - _ b u t t o n s . s c s s | | - - _ s e a r c h . s c s s | | - - _ m e d i a . s c s s | | - - _ h e a d e r . s c s s | | - - _ f o o t e r . s c s s | | - - _ v a r i a b l e s . s c s s | | - - _ f r a m e w o r k . s c s s F I L E S Y S T E M
30. _framework.scss / / b a s e @ i m p o r t " v a r i a b l e s " @ i m p o r t " b a s e " / / l a y o u t @ i m p o r t " h e a d e r " @ i m p o r t " f o o t e r " / / m o d u l e s @ i m p o r t " b u t t o n s " @ i m p o r t " s e a r c h " @ i m p o r t " m e d i a " S A S S
38. Live Style Guide Documentação de interface Mantém sua interface consistente Acelera o desenvolvimento Ferramenta de teste para sua interface · · · ·
41. CSS Critic Testes automatizados Baseados em screenshots Usa phantom js Fácil de integrar com ferramentas de build (jenkins, bamboo, cruise control, etc...) Ainda estado alpha · · · · ·