Curso html5 y Sass: ¡Alcanza el nivel PRO con buenas prácticas!

Este curso de html5 y Sass, no solo aumentarán nuestra productividad en el diseño de páginas web en general, si no que también nos «obliga» a escribir un código limpio, claro y preciso. Al contrario de otros cursos de html5, aconsejo encarecidamente escribir el código a mano, para que vayamos tomando estos buenos hábitos (me incluyo).

La introducción comienza como punto de enlace de estas buenas prácticas con html5 y sass, luego se disgregará entre tutoriales de html5 y tutoriales de sass, no obstante, pueden juntarse ambos en cualquier otro tutorial. Por eso he decidido darles un comienzo unificado a ambos.

Expectativas de este curso html5 y Sass :

• Mejorar tu flujo de trabajo: desarrollarás una buena base escribiendo código, aumentarás tu productividad, una nueva forma de ver html5 y sass como flujo de trabajo de cara al Frontend.
• Tomar contacto con los Componentes Web: El futuro del desarrollo web se está centrando en los componentes web (web components). Un componente web actúa como una unidad única que se comunica con otros componentes.
• Escribir código limpio: aprenderás a escribir un código claro, semántico y conciso, que cobrará sentido para ti y para tu equipo de desarrollo.
• Mejor organización en tus proyectos.
• Crear componente modulares y reutilizables: aprende a crear módulos de código reutilizables, sencillos de ampliar y modificar.
• Crea tu propio framework: fórjate un framework que se adapte a tus necesidades y que puedas usarlo de la mejor forma posible para tus proyectos.
• Minimizar la carga: aprenderás a usar, como dice la canción, «lo que es de necesidad no más» para un proyecto en concreto. Acelerarás los tiempos de respuesta del servidor y el ancho de banda del usuario cliente lo agradecerá.

Un Componente Web proporciona un mecanismo para construir nuevos elementos DOM personalizados que incluyen semántica funcional nueva además de una estructura sintáctica potencialmente diferente. Surge de la mano de la W3C como consecuencia del movimiento de modularización y reutilización al que se lleva orientando el desarrollo web en los últimos años. Por ejemplo con librerías como jQuery, frameworks MVC (modelo vista controlador) como AngularJS y frameworks CSS como Bootstrap o Foundation.

¡Eh!, ¿pero qué es Sass?

Sass (Syntactically Awesome Style Sheets) es un potente pre procesador CSS que nos permite crear hojas de estilos estructuradas, limpias y fáciles de mantener. Digámoslo de otro modo, Sass hace que escribir estilos sea más amigable, divertido y ordenado.

Escribimos Sass en archivos .scss que después compilamos para obtener un archivo .css.

Maneras de compilar Sass

• Con el lenguaje de programación Ruby y la gema SASS instalada. Sass es una gem de RubyGems, que es el gestor de paquetes de Ruby. RubyGems provee un formato estándar para distribuir paquetes / librerías (gems).
• Usando libsass, un compilador de Sass muy rápido escrito en C. Te lo puedes bajar de github o instalarte node-sass por consola usando el NPM (Node Package Manager). Escribe en la consola : npm install node-sass.
• Mediante una interfaz GUI como Compass o Hammer.

Nosotros vamos a usar lo más simple, Ruby y su gema SASS.

Instalar Sass

Instalar Sass en Ubuntu

Primero debes instalar el lenguaje de programación Ruby, mediante la terminal. Antes de nada, actualizamos el gestor de paquetes:

Luego instalamos cURL, que es una herramienta para transferir archivos con sintaxis URL ( soporta FTP, FTPS, HTTP, etc):

Ahora usamos cURL para instalar RVM (Ruby Version Manager), que te permite instalar varias versiones de Ruby en tu sistema:

*Posibles problemas-> Puede que al usar curl el terminal te reporte este error:

Es una característica de seguridad introducida en la última versión de RVM, simplemente ejecuta el comando para importar la key, en mi caso es:

Ahora sí, una vez arreglado eso vuelve a ejecutar: sudo \curl -L https://get.rvm.io | bash -s stable --ruby y listo.

Ya tienes RVM instalado. Si ya tenías RVM instalado actualiza a su última versión e instala Ruby:

*Posibles problemas -> Si te sale No command ‘rvm’ found al ejecutar la instrucción anterior, ejecuta esta instrucción en la terminal:

¡Venga que ya falta poco!, instalamos Ruby de una vez:

Y finalmente compruebas que se ha instalado escribiendo ruby -v, debería mostrarte la consola la versión de Ruby instalada:

Ya tenemos listo Ruby con su última versión estable, ahora le toca a la gema SASS, escribimos esto en el terminal para instalarla:

Al igual que hicimos con Ruby, comprobamos la versión de SASS con esta instrucción:

La versión actual es Sass 3.4.14 (Selective Steve). ¡Ya puedes usar SASS en tu máquina Linux!

Instalar Sass en Mac

¡Anda!, pero si ya Mac OS (Yosemite y Mavericks) viene con Ruby, así que no es necesario instalarlo. Si tienes versiones de Mac OS anteriores simplemente instálalo con Homebrew (deberías usarlo como gestor de paquetes, es muy útil) y este comando en la consola:

Una vez tenemos Ruby instalado puedes instalar Sass del mismo modo que Linux, escribiendo en la consola:

¡Listo!, ya puedes usar Sass en tu Mac.

Instalar Sass en Windows

Instala primero Ruby en Windows descargando y ejecutando el RubyInstaller , le das a siguiente y marcas que te coja el PATH. Luego ejecutas en la consola gem install sass y ¡ya está!

Buenas prácticas recomendadas para el curso HTML5 y Sass

No es obligatorio aplicar estas buenas prácticas al curso, pero sí es recomendable que las utilices.

HTML5:

• nombra las clases en minúscula y separadas por guión alto ‘-‘ o guión bajo ‘_’ (conocido como Snake case). Ej: .mi-clase
• nombra los ID con el estilo CamelCase, excepto la primera palabra. Ej: #miIdDeEjemplo
• usa las clases en elementos comunes, que establezcan alguna clase de relación significativa. Por ejemplo, dar la clase .alert-red a elementos que notifiquen los errores de una aplicación al usuario
• el ID se emplea para identificar un elemento estructural único e importante en nuestro DOM, como la sección principal, el footer, etc
• usa un máximo de 4 clases por elemento
• crea tantos elementos como necesites pero tampoco abuses, no es un crimen tener una etiqueta extra si esto vuelve más flexible tu código para el futuro, por ejemplo, si necesitas poner un icono en un <li> de un menu, simplemente crea un span extra para ese icono, porque después será más fácil quitarlo del HTML si no lo vas a usar más ,y tu código CSS te lo agradecerá, ya que si no tendrías que hacer malabares con las pseudo clases :before o :after;  el icono es algo que forma parte del <li> de tu menu, como puede ser el <a href> en que este envuelto (donde enlaza a otro sitio de tu web o app) es algo que está separado de ese <li>. El icono sigue siendo un componente y debe ser tratado como tal
• identa tus etiquetas HTML5 en concordancia a la jerarquía del DOM, así tendrás un código limpio, legible y fácil de manipular
• no uses estilos en línea en las etiquetas. Ej: <div style=»float:left;»></div>
• deja comentarios por lo menos introduciendo los bloques de secciones importantes y ciertos módulos, aunque se recomienda comentar todo lo que se pueda
• incluye solo los archivos CSS principales dentro de la etiqueta <head>, el resto de css pertenecientes a otros componentes deberían usarse directamente en tu archivo main.css, evita usar @import dentro de tu css puesto que supone una nueva llamada al servidor para cargar otra hoja de estilos y esperar a que se cargue para aplicar los nuevos estilos .

SASS / CSS:

• estructura tus bloques de código dentro en un archivo de estilos de forma ordenada. Ej: incluye los archivos importados, si es que tienes alguno, añadiendo configuraciones adicionales (variables, arrays, etc) si es necesario, agrupa los estilos en bloques, como «General», «Layout», «Helpers», «Overwrites», y así continuamente, lo que mejor veas.
• da un máximo de 4 niveles de anidamiento al escribir sass, así cuando el archivo se compile a CSS lo hará más rápido. Evita el código spaguetti (tienes la definición más abajo).
• volviendo al anidamiento, ten cuidado con los niveles de especificidad en los selectores , ya que puede hacer entrar a los estilos en conflicto. No empieces a crear cadenas de selectores infernales como –> header #menu .secondary-menu .right-side .mobile-ul li.active.
• en sass los comentarios funcionan de forma diferente, usa los // comentarios con dos barras inclinadas si quieres que los comentarios no aparezcan en el archivo css resultante de la compilación. Con ello comentas internamente las variables o funciones en tu archivo .scss.
• los comentarios con sintaxis /* si aparecen en el .css */ que se genera tras compilar el .scss.

Código spaguetti. Se le llama así al código de los programas cuyo flujo de ejecución se asemeja a una caótica maraña de espaguetis entrelazados, convirtiéndolo en algo casi imposible de seguir. Es el resultado de malas prácticas por parte del programador.

¡Basta de charla!, ¿empiezo el curso con la introducción a html5 o con la introducción sass?

Tú puedes escoger por cual quieres empezar, a partir de esta introducción vamos a sesgar el contenido entre tutoriales de html5 y tutoriales de Sass, separando los tutoriales o combinándolos cuando sea necesario. Escoger tú debes, solo sigue tu intuición joven padawan:

¡Quiero empezar las buenas prácticas con HTML5!

¡Quiero empezar las buenas prácticas con Sass!

Lista actualizada de entradas del Curso Html5 y Sass

• Curso html5 y Sass: ¡Alcanza el nivel PRO con buenas prácticas!
• Curso html5 y Sass (1): Uso de la semántica en tu estructura html5
• Curso html5 y Sass (2): ¿ Que es sass ?, pruébalo en un instante