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.
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.
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.
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.
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.
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.
Mejora la compatibilidad con todos los navegadores y Google lo interpreta mejor. Además, los editores de texto lo interpretan como una sola palabra.
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;}
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.
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.
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.
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.
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.
Así facilitas la lectura del código a los navegadores, lo que supondrá una velocidad de carga más rápida.
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.
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:
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. SI TIENES ALGÚN PROYECTO DIGITAL Y CREES QUE PODEMOS AYUDARTE, ¡CONTACTA CON NOSOTROS!
Escrito por Angela Lence, web & graphic designer at Gobalo.