Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Metodologías de CSS

158 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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

×