Tips y metodologías de buenas prácticas CSS

En un mundo en constante evolución es muy común cometer errores que, por muy pequeños que sean, van arrastrándose y encarecen tanto la calidad de los proyectos como los procesos de trabajo. Por ello, hoy queremos introduciros en el mundo de las buenas prácticas de CSS mediante algunos tips.

Tips

Maquetación

  • Resetea las propiedades del CSS.

Antes de empezar a maquetar te recomendamos que resetees las propiedades de tu código css como paddings, margins, borders, las diferentes etiquetas etc. Esto puedes hacerlo de forma manual, o con alguna de las herramientas existentes, las más populares son: Normalize CSS, HTML5 Doctor Reset CSS, Yahoo! (YUI 3) Reset CSS, Universal Selector * Reset.

  • Usa una sola hoja de estilo.

De este modo, además de concentrar toda la info en un mismo doc evitando repetir declaraciones de css, nos ayuda a optimizar el tiempo de carga, ya que tener una hoja de estilos por cada página sería cargar la misma información muchas veces innecesariamente.

  • No uses estilos en línea.

Sobre todo por motivos relacionados con el SEO, Google penaliza estas prácticas. Además, dificulta el flujo de trabajo y hace repetir las mismas declaraciones en distintas partes del html para elementos cuyo estilo es común.

  • Sigue una jerarquía.

Maqueta siempre con el mismo orden los atributos de las clases. Puedes seguir un orden alfabético o separarlos por tipos de selectores, por aspectos de colocación y diseño, etc.

Como las posibilidades son múltiples, tienes la opción de utilizar el orden con el que te sientas más cómodo.

  • Usa clases que tengan relación semántica con lo que se está maquetando.

No siempre vas a estar tu solo maquetando un proyecto o quizás tengas que retomarlo con el paso del tiempo, por eso es importante que las clases tengan un sentido con lo que se está maquetando, para facilitar la compresión del código. Si usas clases con nombres muy rebuscados o sin sentido, cuando se retome el proyecto o alguien nuevo entre en el proyecto no entenderá el usos de las clases y cómo se aplican de forma rápida, si no que tendrá que repasar todo el proyecto para entender la estructura.

  • Usa guion medio en lugar de guion bajo 

Mejora la compatibilidad con todos los navegadores y Google lo interpreta mejor. Además, los editores de texto lo interpretan como una sola palabra.

  • No Repitas Código

Si dos elementos diferentes tienen el mismo estilo, no los declares dos veces, usa una sola declaración para ambos elementos separándolos mediante comas.

ejemplo:  

h1 {color: white;}

h2 {color: white;}

h1, h2 {color: white;}

  • Usa estilos en cascada siempre que sea posible, para reducir el número de clases e ID usados

Esto ayudar a reducir el número de instancias innecesarias, reduciendo el peso del proyecto. Además, es una buena herramienta de trabajo para ubicar un elemento dentro de la jerarquía html.

  • Usa siempre que se pueda clases en vez de ID

Los Id son sobre todo utilizados por los desarrolladores, para implementarlos en otros lenguajes de programación como Javascript o Angular. Además, los ID solo se pueden utilizar en un elemento, por lo que si más adelante queremos reciclar esas declaraciones no podremos y deberemos duplicar una de las instancias, aumentando el número de líneas que tenemos en nuestro código.

  • No uses important

Nunca uses important, si necesitas usarlo en algún momento significa que algo no estas haciendo bien, revisa tu código e intenta subsanar el error.

Otras consideraciones a tener en cuenta

  • Añade un índice y comentarios a tu hoja de estilos 

Es bueno sobre todo si trabajas en equipo o el proyecto se va a alargar en el tiempo, que te crees un índice al comienzo de tu hoja de estilo, donde separes el contenido por bloques facilitando la navegación por el documento y ayudando a mantener su jerarquía.

  • Evita usar frameworks tipo bootstrap 

Aumentan mucho el peso de la web, además crean instancias que no necesitamos. Nuestra recomendaciónes que crees tu framework a medida con los elementos que sabes que necesitas y vas a usar en todos tus proyectos. Otra opción si continuas queriendo usar un framework es importar solamente las partes que requiere tu proyecto, desechando así el código inútil que aumenta el peso de nuestros archivos.

  • Minimiza el CSS antes de subirlo.

Así facilitas la lectura del código a los navegadores, lo que supondrá una velocidad de carga más rápida.

  • Valida El Código con W3C

Es muy importante que valides tu página antes de subirla, no solo te revelará errores de funcionamiento, también los errores de maquetación de cara a los navegadores.

Metodologías más utilizadas:

OOCSS

(Object Oriented CSS)

Desarrollada por Nicole Sullivan en 2008, esta metodología está basada en dos principios básicos: la separación de la estructura de los estilos visuales y la separación del contenedor y los contenidos.


BEM

(Block, Element, Modifier)

Lo primero que has de saber de BEM es que no utiliza etiquetas HTML o IDs como selectores, sino que los bloques y los elementos están definidos por selectores de clase.

Recomienda también no hacer uso de la clase unida a una etiqueta ya que hace que la regla CSS sea más específica y más difícil de sobrescribir; y aunque permitiría el uso del anidamiento, aconseja un uso limitado del mismo, ya que dificulta en exceso la reutilización del código.

Con estos principios, podemos pasar a definir los tres componentes en los que se basa este método: bloque, elemento y modificador.


SMACSS

(Scalable and Modular Architecture for CSS)

Desarrollado por Jonathan Snook, el método SMACSS consiste en organizar las reglas CSS en cinco categorías:

  • Base: estilos por defecto. 
  • Maquetación: divide el contenido en secciones, entendiendo que dentro de cada sección el contenido se dividirá en módulos.
  • Módulos: todos los elementos que se pueden reutilizar.
  • Estados: los estados de nuestros elementos como por ejemplo :active.
  • Temas: estilos visuales (opcional).

Conclusiones

Estos son solo algunos consejos que te damos, ¡ponlos en practica! Pero recuerda que no es necesario que sigas una de las metodologías ya establecidas que te nombramos arriba, tú mismo puedes crearte tu propia metodología de buenas practicas que se adapten a tu forma de trabajar, a tus proyectos y sobre todo a tu equipo; no solo se trata de seguir unas pautas para que tu código sea limpio, sino optimizar tus procesos de trabajo y conseguir que el código escrito sea accesible y comprensible para todos lo miembros del equipo.

En el próximo post sobre buenas prácticas os contaremos cómo lo hacemos en Góbalo.

Enlaces de interés

 

Escrito por Angela Lence, web & graphic designer at Gobalo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *