Debilidades de CSS

Falta de características básicas

Para ser un lenguaje con suficiente edad aun le faltan muchas de las características básicas que debe tener para que su uso sea más amigable y usable.

Un mantenimiento imposible

• Mantener una hoja de estilos de un proyecto grande puede ser una verdadera pesadilla.
• El trabajo colaborativo, con control de versiones, se complica con ficheros tan grandes
• La división y modularización facilita mucho el proceso
• El dichoso @import de CSS

Don't repeat yourself

CSS nos hace monos repitiendo cosas constantemente

 a.boton{                                      font-size: 16px;    color: black;    border: 1px solid #00ffcc;    display: inline-block;    vertical-align: top;}
 span.boton{    font-size: 16px;    color: red;    border: 1px solid #00ffcc;    display: inline-block;    vertical-align: top;}

 #header{    max-width: 1200px;}
a.boton{    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    color: #00ffcc;}#menu{
    max-width: 1200px;}

Código no jerarquizado

Malditos prefijos

Sí, todo el mundo está de acuerdo en que CSS3 es la caña de España, todos menos los navegadores, que cada uno implementa las cosas con su motor interno. De ahí el uso obligatorio de prefijos.

//Es así a.boton{
    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;}
span.sombra{    -webkit-box-shadow: 1px 1px 0.5em #fff;    -mox-box-shadow: 1px 1px 0.5em #fff;    box-shadow: 1px 1px 0.5em #fff;}

 //Lo que debería ser asía.boton{   border-radius: 5px;}
span.sombra{   box-shadow: 1px 1px 0.5em #fff;}

Pre-procesadores CSS

• Qué son y qué no son
• Para qué nos ayudan
• ¿debemos utilizarlos?

¿Qué son y qué no son?

• Qué son
  • programas que trabajan con archivos
• No hacen
• no modifican el estándar CSS
• no hacen magia
• Sí hacen
• nos ayudan a hacer mejor las cosas y más organizadamente
• nos ayuda a modular nuestros archivos
• exportan un archivo de tipo css, nada raro
• Concatenan
• Minifican
• etc...

Más o menos sería esto

Stylus

• Sintaxis
• Selectores
• Variables
• Operadores
• Funciones
  
• Mixins
• Import
• Minificación
• Nib

Sintaxis

Poderes de Stylus

Sintaxis

 body{    font: 12px Arial;    background-color:white;}a.button{    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;}a.button span{    color: green;}a.button span strong{    text-decoration: underline;}     

 body    font 12px Arial    background-color whitea.button    border-radius 5px    span        color grenn        strong            text-decoration underline

Selector nestin y multi

body.contacto .direccion p, body.contacto .direccion div, body.contacto .direccion h5{    font-style: normal;}
body.contacto    .direccion        p        div        h5            font-style normal

Selector de referencia

 a.boton    color black    span        text-decoration underline    &:hover        color yellow        span            text-decoration none+

 a.boton{    color: black;}
a.boton span{    text-decoration: underline;}
a.boton:hover{   color: yellow;}
a.boton:hover span{   text-decoration: none;}

Variables

Como todo lenguaje decente el uso de variables 

nos servirá para poder ser utilizadas 

en cualquier parte de nuestro código.

 body{    font: 16px Arial, sans-serif;}

T_Base = 16pxT_Grande = 18pxT_Pequeño = 14px
body    font T_Base Arial, sans-serif

Variables

Cálculos sobre variables o propiedades

w=500px
h=200px div.login    width w    height h    margin-left -w/2    margin-top -h/2    p        width w/4    

 div.login    position absolute    top 50%    left 50%    width 500px    height 200px    margin-left -(@width/2)    margin-top -(@height/2)

Operadores

+

Operadores y funciones con colores

 #888 + #111// => #0f0

 #888 + 50%// => #444

 red(#c00)// => 204
green(#0c0)// =>204

 darken(#D62828, 30%)// => #551010

 lighten(#2c2c2c, 30%)// => #393939

invert(#d62828)// => #29d7d7

Funciones

Hay que tener en cuenta que las funciones en 

stylus siempre devuelven un valor, no como en algunos

lenguajes de programación, esto nos servirá para identificarlas

y no confundirlas con un Mixin

suma(a,b)    a+b
resta(a,b)    a-b
compare(a,b)    if a > b        higher    else if a < b        lower    else        equal

Mixins

Los mixins se parecen a las funciones y  permiten cualquier número de argumentos o el tipo de argumentos especial args...

¿Para qué?

 #login{    -webkit-box-shadow: 1px 2px 5px #eee;    -moz-box-shadow: 1px 2px 5px #eee;    box-shadow: 1px 3px 5px #eee;}

 box-shadow(args...)    -webkit-box-shadow args    -moz-box-shadow args    box-shadow args
#login    box-shadow 1px 2px 5px #eee

Más cosas

• Import
  
• Minificación
  
• Nim
  

Instalación

Para instalar Stylus debemos tener instalado previamente Node.js

pero eso no debe asustar. Es auto instalable.

http://nodejs.org

• Para windows
• Para mac
• Para linux

Instalación

$ (sudo) npm install -g stylus
$ stylus stilo.styl
$ stylus -w estilo.styl
$ stylus -c -w estilo.styl

Software

Software

Automatizadores

     

Livereload