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

1. CSS
Escalable & Modular
Buenas prácticas

2. GRANDES GRUPOS DE TRABAJO
CSS
Entrega
X CSS
Desarrolla
Desordenado
Caos

3. Entonces ...
¿Cómo nos ordenamos?

4. CSS: escalables y modulares
Estructura
Metodología
común

5. CSS: escalables y modulares
Escalable y
Modular
= Frameworks
CSS

6. CATEGORIZAR

7. 4 REGLAS DE ORO

8. Base Layout Módulos Estados

9. BASE

10. Base
• Core
• Olvidar clases e ID’s.
• Sólo tag’s esenciales.
• CSS Reset

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. LAYOUT

13. lAYOUT
• Contenedores
• Clases e ID’s
• Nomenclatura

14. EJEMPLO
CSS 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. VISUALIZACIÓN
#cabecera
#contenido
#pie

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. VISUALIZACIÓN FLUIDO
#contenido #sidebar
100%

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. VISUALIZACIÓN FIJO
#contenido #sidebar
800px

20. Definiendo LAYOUT

21. Definiendo LAYOUT
#CABECERA
#SIDEBAR-L #SLIDER #SIDEBAR-R

22. MÓDULOS

23. Módulos
• Re-usables
• Solamente clases
• Nomenclatura
• La mayor parte del código

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. VISUALIZACIÓN FLUIDO
Charlas 17
.mod-not
#sidebar

26. Grupos de propiedades
Caja Bordes Fondo Textos Otros

27. estados

28. ESTADOS
• Condiciones
• Estados de Links
• Estados de acción
• Errores
• Nomenclatura

29. EJEMPLO
CSS Estados
.est-cont {
background: white;
}
.est-exp {
background: black;
}

30. THEMES y Tipografías

31. OPTIMIZACIÓN

32. Vídeo

33. Vídeo

34. BUENAS PRÁCTICAS
• Minify css
• Google Page Speed test
• Less

35. rodrigo acevedO
hola@rodrigo-acevedo.com
@rodboc