29/01/2014

¿Es conveniente usar preprocesadores de CSS?

¿Es conveniente usar preprocesadores de CSS?

La aparición del lenguaje CSS en 1996 significó una importante mejora al proceso de estilizar la estructura HTML de un sitio web. Sin embargo, se trata de un lenguaje muy sencillo que otorga estilos mayormente estáticos (permanecen iguales luego de la carga de la página), limitación que suele compensarse a través de JavaScript. Esto motivó la aparición de preprocesadores de CSS: aplicaciones que permiten escribir hojas de estilo en metalenguajes con más características que CSS, pero las compilan a CSS convencional para que puedan ser comprendidas por un browser. En otras palabras, obligan a los navegadores a reconocer funciones que CSS no brinda. Ya hemos hablado de Stylus, pero existen otras opciones, como LESS, Sass y Compass. ¿Cuáles son las ventajas y las desventajas de estas plataformas? Ventajas

  • Reusabilidad. Una comodidad de los lenguajes de programación que CSS, por sí solo, no ofrece. Por ejemplo, si varias clases tendrán el mismo color, podemos almacenar éste en una variable, evitando escribir varias veces el mismo valor en formatos incómodos como RGB o hexadecimal.
  • Mejor sintaxis. Los mixins son conjuntos de propiedades que se agrupan bajo un mismo nombre. Por ejemplo,  si queremos que dos elementos tengan fondo color rojo, margen de 5 píxeles y texto amarillo, podemos englobar estas características bajo el nombre “miMixin” e incluir este nombre en la declaración de ambos elementos. Así, generamos un código más comprensible y menos repetitivo.
  • Características dinámicas. Por ejemplo, podemos asignarle al ancho de un bloque un valor dinámico, expresado a través de una operación aritmética que pueda incluir variables. De esta manera, el ancho no tendrá un valor fijo en píxeles ni uno relativo a las dimensiones de la pantalla, sino que dependerá del factor que deseemos.

Desventajas

  • Código complejo. El código ya compilado sí puede ser repetitivo, conteniendo una gran cantidad de líneas de código y agregando un importante peso al directorio de nuestro sitio web.
  • Malas prácticas. Usar un metalenguaje de CSS sin conocer a fondo el verdadero lenguaje puede acostumbrar a los desarrolladores inexpertos a depender de herramientas de terceros.

Si bien los preprocesadores nos alejan de la esencia y el propósito de CSS, en casos muy puntuales pueden tratarse de la mejor opción para incorporar estilos dinámicos a nuestro sitio web.

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