Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Metodologías de CSS

152 views

Published on

Las aplicaciones frontend suelen ser monolíticas, difíciles de mantener y escalar, si no se encuentran bien estructuradas; por ello existen diferentes técnicas y metodologías para evitar, en lo posible, estas dificultades y tener oportunidades de mejora continua.

Si te interesa ver nuestro seminario web ingresa a: https://bit.ly/31Wqqrw

Published in: Software
  • Be the first to comment

Metodologías de CSS

  1. 1. Nuestras locaciones
  2. 2. Nuestros Panelistas Camilo Concha Frontend Developer Laura Rodrigo Marketing Analyst
  3. 3. Agenda • Aplicaciones Monolíticas • Arquitectura Front End. • Metodologías CSS • Atomic Design • OOCSS • SMACSS • BEM ¿QUESTIONS? #CSSBelatrix
  4. 4. Monolito ¿QUESTIONS? #CSSBelatrix
  5. 5. Arquitectura Front end ¿QUESTIONS? #CSSBelatrix
  6. 6. Code For Humans ¿QUESTIONS? #CSSBelatrix
  7. 7. Atomic Design ¿QUESTIONS? #CSSBelatrix
  8. 8. OOCSS ¿QUESTIONS? #CSSBelatrix .button { box-sizing: border-box; height: 50px; width: 100%; } .grey-btn { background: #EEE; border: 1px solid #DDD; box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; color: #555; }
  9. 9. SMACSS (smacks) • Base • Layout • Modules • State • Themes ¿QUESTIONS? #CSSBelatrix
  10. 10. SMACSS (smacks) ¿QUESTIONS? #CSSBelatrix Image from css-tricks
  11. 11. SMACSS (snacks) Base ¿QUESTIONS? #CSSBelatrix h1 { font-size: 32px; } div { margin: 0 auto; } a { color: blue; }
  12. 12. SMACSS (snacks) Layout ¿QUESTIONS? #CSSBelatrix .layout-sidebar { width: 320px; } .l-comments { width: 640px; }
  13. 13. SMACSS (snacks) Modules ¿QUESTIONS? #CSSBelatrix .call-to-action-button { text-transform: uppercase; color: #FFF200; } .search-form { display: inline-block; background-color: E1E1E1; }
  14. 14. SMACSS (snacks) State ¿QUESTIONS? #CSSBelatrix .is-hidden { display: none; } .is-highlighted { color: #FF0000; background-color: #F4F0BB; border: 1px solid #CBBD15; }
  15. 15. SMACSS (snacks) Theme ¿QUESTIONS? #CSSBelatrix // in module-name.css .mod { background-color:white } // in theme.css .mod { background-color: black; }
  16. 16. SMACSS (snacks) Theme ¿QUESTIONS? #CSSBelatrix
  17. 17. BEM • Block • Element • Modifier ¿QUESTIONS? #CSSBelatrix
  18. 18. BEM ¿QUESTIONS? #CSSBelatrix
  19. 19. CONCLUSIONES Y RECOMENDACIONES
  20. 20. ¿Preguntas?
  21. 21. ¡Muchas Gracias! www.belatrixsf.com

×