04/11/2015

Preprocesadores de CSS: ¿cuándo utilizarlos?

Preprocesadores de CSS: ¿cuándo utilizarlos?

Los preprocesadores de CSS son herramientas que nos permiten generar hojas de estilo a partir de una sintaxis alternativa, que ofrece más funciones que las que trae la implementación oficial. Por ejemplo, con preprocesadores como Less y Sass podemos utilizar una variable (como rojoclaro) para guardar un color representado en hexadecimal (como #FF9999), evitando tener que repetir o recordar ese código y facilitando las cosas cuando queramos reemplazarlo por otro color. Esto es imposible en la versión oficial de CSS.

Sin embargo, estas herramientas tienen ventajas y desventajas. Por eso, si bien su uso está cada vez más extendido, es bueno saber cuándo utilizarlos y cuándo no.

Utilizar preprocesadores de CSS cuando:

  • Necesitamos una hoja de estilos dinámica, apta para sufrir grandes modificaciones. Por ejemplo, si estamos desarrollando un theme de WordPress con características personalizables, las variables y los mixins permitirán cambiar colores, fuentes y tamaños con rapidez. Muchos frameworks de WordPress le permiten al usuario cambiar características del diseño desde una interfaz amigable; por detrás, lo que ocurre es que se modifican los valores de las variables.
  • Estamos trabajando en un equipo numeroso, y todos deben seguir reglas comunes para una buena coordinación. En ese sentido, un preprocesador puede ser de ayuda, porque organiza mejor el código fuente, facilita su modificación y permite crear un lenguaje común a través de los nombres de variables y de funciones.
  • Vamos a implementar muchas reglas de CSS engorrosas de escribir y difíciles de mantener (por ejemplo, los gradientes, las animaciones o los vendor prefixes). Un preprocesador puede ayudarnos a implementarlas con una sintaxis más compacta y comprensible.
  • Necesitaremos realizar muchas operaciones matemáticas: calcular un porcentaje de un ancho, aumentar el tamaño de una fuente, atenuar un color, obtener la cantidad máxima de columnas en una fila, etc.

No utilizar preprocesadores de CSS cuando:

  • Nuestros archivos CSS (es decir, el resultado de la compilación) deben ser muy livianos.
  • Nuestros archivos CSS serán analizados por personas externas al equipo de trabajo.
  • Dentro del equipo, todos están acostumbrados a preprocesadores diferentes.
  • Todavía estamos aprendiendo la sintaxis y las reglas de CSS.

Uno de los grandes problemas de los preprocesadores es que, luego de la compilación, el código CSS resultante puede no parecerse en nada a nuestro código original. Por eso, cuando descubrimos errores puede ser muy difícil encontrar en qué parte del código se produjeron. Se recomienda comentar bien el código, generar documentación propia y estar atento al escribir cada línea.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce