css - arquitectura escalable y modular
Post on 13-Jun-2015
2.276 Views
Preview:
DESCRIPTION
TRANSCRIPT
Escalable & ModularBuenas prácticas
C S S
CSS XDesarrolla
Entrega
Caos
CSS Desordenado
GRANDES GRUPOS DE TRABAJO
Entonces ...
¿Cómo nos ordenamos?
CSS: escalables y modulares
Metodología Estructuracomún
CSS: escalables y modulares
Escalable y Modular
Frameworks CSS=
CATEGORIZAR
4 REGLAS DE ORO
Base Layout Módulos Estados
BASE
Base
• Core
• Olvidar clases e ID’s.
• Sólo tag’s esenciales.
• CSS Reset
EJEMPLO
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;}
CSS Base
LAYOUT
lAYOUT
• Contenedores
• Clases e ID’s
• Nomenclatura
CSS
EJEMPLO
#cabecera, #pie, #contenido { width: 960px; margin: auto;}
#contenido { border: solid #CCC; border-width: 1px 0 0;}
HTML
<div id=”cabecera”></div><div id=”contenido”></div><div id=”pie”></div>
VISUALIZACIÓN#cabecera
#contenido
#pie
CSS Layout
FLUIDO
#contenido { width: 80%; float: left;}
#sidebar { width: 20%; float: right;}
HTML FLUIDO
<div id=”contenido”></div>
<div id=”sidebar”></div>
VISUALIZACIÓN FLUIDO
#contenido #sidebar
100%
CSS Layout
FIJO
#contenido { width: 80%; float: left;}
#sidebar { width: 20%; float: right;}
.lay-fijo #contenido { width: 600px;}
.lay-fijo #sidebar { width: 200px;}
HTML FIJO
<div id=”contenido” class=”lay-fijo”></div>
<div id=”sidebar” class=”lay-fijo” ></div>
VISUALIZACIÓN FIJO
#contenido #sidebar
800px
Definiendo LAYOUT
Definiendo LAYOUT
#SLIDER#SIDEBAR-L #SIDEBAR-R
#CABECERA
MÓDULOS
Módulos
• Re-usables
• Solamente clases
• Nomenclatura
• La mayor parte del código
EJEMPLOCSS Módulos
.mod-not h2 { padding: 5px; border-color: blue; background: white; font-size: 2em; color: #000;}
.mod-not h2 span { padding: 5px;}
HTML
<div id=”sidebar”><div class=”mod-not”> <h2>Charlas <span>17</span></h2></div></div>
VISUALIZACIÓN FLUIDO
#sidebar
.mod-not
17Charlas
Grupos de propiedades
Caja Bordes Fondo Textos Otros
estados
ESTADOS
• Condiciones
• Estados de Links
• Estados de acción
• Errores
• Nomenclatura
CSS Estados
EJEMPLO
.est-cont { background: white;}
.est-exp { background: black;}
THEMES y Tipografías
OPTIMIZACIÓN
Vídeo
Vídeo
BUENAS PRÁCTICAS
• Minify css
• Google Page Speed test
• Less
hola@rodrigo-acevedo.com
@rodboc
rodrigo acevedO
top related