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