¿Cómo empezar Css3 con buen pie?

Un poco de historia

Han cambiado cantidad de cosas desde que utilizábamos el bloc de notas para crear nuestras hojas de estilo. Ahora se nos ofrece un amplio abanico de editores, nuevas técnicas, pre-procesadores, funciones, variables, etc.

Las hojas de estilo (CSS3) nacieron con la idea de unificar y externalizar el estilo de la web para, entre otras muchas cosas, no duplicar código con las mismas características gráficas.

Hoy queremos daros una pautas sobre como empezar a trabajar con este lenguaje, los pasos necesarios para dominar las modificaciones en nuestro código y las herramientas que nos ayudarán haciendo estas tareas más fáciles y eficaces.

Este primer paso nos valdrá para cualquier tipo de lenguaje de programación y determinará, a la larga,  nuestra velocidad y comodidad frente al monitor. Lo primero es elegir nuestro editor de texto/código y ponerlo a nuestro gusto, nos referimos a colores, vistas, funciones, atajos, etc. Todo lo que haga falta para que mejoremos nuestra velocidad y comodidad. Con el tiempo irán surgiendo más necesidades y veremos que podemos ser más eficientes con determinados atajos y técnicas, pero es normal.

Nosotros vamos a optar por Sublime Text 3 porque lo consideramos ligero y efectivo, su gama de colores nos gusta y además nos permite mejorar nuestra velocidad de escritura en el código gracias a sus plugins.

SUBLIME TEXT 3

1º Paso: Instalación

Para empezar nos lo descargamos, lo instalamos en nuestro ordenador y nos ponemos manos a la obra con la configuración.

Cuando lo ejecutemos tendremos una vista similar a la imagen que os enseñamos (hemos resaltado las partes más destacadas del editor). En ellas destacamos el comportamiento por defecto del programa. Por ejemplo, a la hora de abrir un archivo, siempre se nos mostrará un texto gris. Una vez lo guardemos (si reconoce su extensión) o cambiemos el tipo de plantilla veremos como el programa nos mostrará el contenido con los colores adecuados.

2º Paso: Configuración a nuestro gusto

¿Qué pasa si no encontramos nuestro tipo de documento? Si quieres editar otro tipo de archivos (por ejemplo con extensión .tpl de Prestashop) y no lo encontramos con las opciones por defecto del programa la solución es utilizar los plugins que os comentamos.

• Emmet es sin lugar a dudas el más recomendado por multitud de usuarios. Lo que hace es simple, a través de abreviaturas de código nos mostrará un texto resultante completo. Por ejemplo si escribimos «html+tab» nos creará la estructura básica de una página web o si utilizamos «ul>li*5» nos creará una lista con 5 elementos. Tiene una gran documentación que os dejamos como enlace.
• SublimeCodeIntel nos ofrece ayuda contextual según vamos escribiendo código. Esta ayuda nos permite a golpe de tabulador ir más rápido en nuestras sentencias.
• Tpl este plugin nos permitirá ver código smarty de Prestashop con mejor visibilidad, nos mostrará en gris los comentarios y nos resaltará más las variables y partes del código.

PREPROCESADORES CSS3

Para terminar queremos hablar de los pre-procesadores de código CSS. Son herramientas que nos permiten escribir un código más sencillo y legible para luego convertirlo al CSS real. Tendremos un código más fácil de crear, mantener y modificar además de la inclusión de condiciones, variables, funciones…

Los más utilizados actualmente son Sass, Less o Style. Este último parece que está cogiendo fuerza gracias a su sencillez a la hora de anidar los elementos con tabuladores y sin llaves.

Son importantes todas las opciones que nos ofrece esta forma de crear código. Las variables nos dan esa versatilidad de modificación que tanto puede ayudarnos. Podremos crear nuestras variables por “colorprincipal” o “colorsecundario” y con solo un cambio de instrucción cambiar todos los colores de una hoja de estilo.

Las condiciones, funciones y mixing nos permiten crear un css dinámico en función de los elementos que compongan la página o cálculos, establecer valores predeterminados, creación de texto duplicado según navegadores, etc.