CSS - Arquitectura Escalable y Modular

2,851 views

Published on

Arquitectura de CSS para grupos de trabajo, escalable y modular.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,851
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS - Arquitectura Escalable y Modular

  1. 1. CSSEscalable & Modular Buenas  prácticas
  2. 2. GRANDES GRUPOS DE TRABAJO CSS Entrega X CSS Desarrolla Desordenado Caos
  3. 3. Entonces ...¿Cómo nos ordenamos?
  4. 4. CSS: escalables y modulares Estructura Metodología común
  5. 5. CSS: escalables y modulares Escalable y Modular = Frameworks CSS
  6. 6. CATEGORIZAR
  7. 7. 4 REGLAS DE ORO
  8. 8. Base Layout Módulos Estados
  9. 9. BASE
  10. 10. Base• Core• Olvidar clases e ID’s.• Sólo tag’s esenciales.• CSS Reset
  11. 11. EJEMPLO CSS Base body { ! line-height: 1.5; font-family: Arial, Verdana; } table { ! border-collapse: separate; ! border-spacing: 0; } caption, th, td { ! text-align: left; ! font-weight: normal; } a { text-decoration: none; font-weight: bold; }
  12. 12. LAYOUT
  13. 13. lAYOUT• Contenedores• Clases e ID’s• Nomenclatura
  14. 14. EJEMPLOCSS HTML#cabecera, #pie, #contenido { <div id=”cabecera”></div> width: 960px; <div id=”contenido”></div> margin: auto; <div id=”pie”></div>}#contenido { border: solid #CCC; border-width: 1px 0 0;}
  15. 15. VISUALIZACIÓN #cabecera #contenido #pie
  16. 16. FLUIDO CSS Layout HTML FLUIDO #contenido { <div id=”contenido”> width: 80%; </div> float: left; } <div id=”sidebar”> </div> #sidebar { width: 20%; float: right; }
  17. 17. VISUALIZACIÓN FLUIDO#contenido #sidebar 100%
  18. 18. FIJO CSS Layout HTML FIJO #contenido { <div id=”contenido” width: 80%; class=”lay-fijo”> float: left; </div> } <div id=”sidebar” #sidebar { class=”lay-fijo” > width: 20%; </div> float: right; } .lay-fijo #contenido { width: 600px; } .lay-fijo #sidebar { width: 200px; }
  19. 19. VISUALIZACIÓN FIJO#contenido #sidebar 800px
  20. 20. Definiendo LAYOUT
  21. 21. Definiendo LAYOUT#CABECERA#SIDEBAR-L #SLIDER #SIDEBAR-R
  22. 22. MÓDULOS
  23. 23. Módulos• Re-usables• Solamente clases• Nomenclatura• La mayor parte del código
  24. 24. EJEMPLO CSS Módulos HTML .mod-not h2 { <div id=”sidebar”> padding: 5px; <div class=”mod-not”> border-color: blue; <h2>Charlas background: white; <span>17</span></h2> font-size: 2em; </div> color: #000; </div> } .mod-not h2 span { padding: 5px; }
  25. 25. VISUALIZACIÓN FLUIDO Charlas 17 .mod-not #sidebar
  26. 26. Grupos de propiedadesCaja Bordes Fondo Textos Otros
  27. 27. estados
  28. 28. ESTADOS• Condiciones• Estados de Links• Estados de acción• Errores• Nomenclatura
  29. 29. EJEMPLO CSS Estados .est-cont { background: white; } .est-exp { background: black; }
  30. 30. THEMES y Tipografías
  31. 31. OPTIMIZACIÓN
  32. 32. Vídeo
  33. 33. Vídeo
  34. 34. BUENAS PRÁCTICAS• Minify css• Google Page Speed test• Less
  35. 35. rodrigo acevedO hola@rodrigo-acevedo.com @rodboc

×