Para el desarrollo web, CSS es la tecnología más eficaz para embellecer páginas y configurar el diseño de la página. Pero el problema es que CSS es un lenguaje de marcado cuya estructura sintáctica es muy flexible y poco estricta. Los programadores web a menudo descubren en sus propios archivos CSS o en los de otros una gran cantidad de código redundante, errores o partes que se pueden optimizar en gran medida. Si usas habitualmente lenguajes de programación estáticos (como Java, C, etc.), notarás que las herramientas IDE prácticas aportan una enorme eficiencia a la programación. Un entorno de desarrollo integrado como Eclipse, que puede analizar problemas de código automáticamente en tiempo real, es un ejemplo típico. Entonces, ¿existen herramientas de ayuda para los programadores de CSS?

Las 10 herramientas que se presentan a continuación son aplicaciones en línea; no necesitas instalarlas en tu ordenador. Siempre que tengas conexión a Internet, puedes usarlas. La mayoría de estas herramientas son muy sencillas de usar, aunque también hay aspectos que requieren cierta habilidad.

Herramienta de verificación de problemas de CSS:CSS Lint

CSS Lint es una herramienta de código abierto para validar la calidad de archivos CSS. Fue creada originalmente por Nicholas C. Zakas y Nicole Sullivan, y su primera versión se publicó en la conferencia Velocity en junio de 2011. Las reglas de detección de CSS Lint incluyen errores y advertencias. Cuando un selector o propiedad está mal escrito, faltan llaves, hay punto y coma de más, etc., muestra errores de análisis, y estos errores de análisis se muestran con prioridad.

Herramienta de análisis y estadísticas de código CSS:CSS Stats

Css Stats es una herramienta en línea de análisis de código CSS. Introduciendo la URL del CSS del sitio web se puede realizar el análisis del código CSS. Css Stats es una herramienta indispensable para que los diseñadores de front-end analicen el código CSS de un sitio web; puede contar reglas, tamaños de fuente, anchos y altos, número de colores, etc. dentro del código CSS.

Para los diseñadores web, compartir el código CSS de una página es algo imprescindible. Contar cuántos tipos de fuente, cuántos tamaños de fuente, cuántos colores y cuántos colores de fondo se utilizan en el diseño del sitio; solo con estadísticas detalladas del código CSS se puede analizar el efecto del sitio web una vez diseñado. Css Stats también ofrece datos de análisis CSS de sitios web populares, como Google, Yahoo, Twitter, Facebook, Tumblr, etc.

Herramienta de optimización y compresión de código CSS:CSS Shrinks

CSS Shrinks puede comprimir notablemente el tamaño de tu CSS. Muchos programadores web escriben código CSS con gran cantidad de sintaxis redundante, espacios en blanco, etc. Esta herramienta puede optimizar la sintaxis CSS sin afectar la corrección del CSS, eliminar espacios y líneas vacías inútiles, comprimir notablemente el CSS y reducir en gran medida el desperdicio de ancho de banda.

Herramienta de organización de código CSS:ProCSSor

ProCSSor, además de ofrecer las funciones básicas de optimización de código CSS, proporciona una gran cantidad de opciones personalizadas. Por ejemplo, te permite configurar opciones de optimización para reglas CSS, propiedades CSS y sintaxis CSS. También ofrece soluciones de compatibilidad para las nuevas propiedades y reglas de CSS3 en varios navegadores.

Referencia de sintaxis CSS de Codrops

La referencia CSS de Codrops es rica y completa, con una interfaz limpia y directa. Puedes usar esta herramienta para dominar los conocimientos más importantes y completos de CSS. Su base de conocimientos CSS está dividida en varias categorías, que incluyen pseudo-clases, propiedades, funciones, tipos de datos, conceptos, reglas, etc.

Herramienta de consulta de compatibilidad de navegadores para CSS3:Can I Use

"Can I Use": aquí puedes encontrar la compatibilidad de todas las nuevas características web en diferentes marcas de navegadores y en diferentes versiones de cada marca. Cuando sabes qué navegadores usan tus usuarios objetivo, estas tablas te serán de gran ayuda para construir tu sitio web. Abre caniuse.com; la página principal enumera todas las nuevas características web como HTML5, CSS3, etc. Si quieres ver la compatibilidad de una característica específica en diferentes navegadores, solo tienes que hacer clic. Por ejemplo, para ver la compatibilidad de @font-face Web fonts en varios navegadores, haz clic en el primer elemento del área CSS y verás una tabla que enumera las versiones de todos los navegadores, con diferentes colores que representan el soporte de cada navegador para @font-face Web fonts: el rojo indica que no lo soporta, y el verde claro indica soporte parcial. Los navegadores enumerados en la figura también incluyen algunos navegadores de teléfonos móviles y tabletas, como el navegador del sistema Android. Es tan completo que, al diseñar un sitio web, puedes usar selectivamente las características avanzadas de CSS y JavaScript según los usuarios objetivo del sitio para mejorar la experiencia del usuario.

Comprueba si tu código cumple con los estándares CSS:W3C CSS Validation Service

Esta herramienta se utiliza para comprobar si tu sintaxis CSS es correcta y si cumple con el estándar CSS del W3C. Sabemos que, desde los primeros navegadores IE, varios navegadores han implementado sus propios dialectos, y estos dialectos no son interoperables entre navegadores. Pero al desarrollar páginas web, debemos considerar al máximo la compatibilidad entre navegadores; la mejor manera es cumplir con las especificaciones estándar CSS del W3C. El W3C CSS Validation Service se utiliza para validar los problemas en tu CSS; te recordará qué sintaxis, qué propiedades y qué reglas tienen problemas.

CodePad

Codepad.org es un sitio web muy interesante. Su página principal es muy sencilla: a la izquierda están los lenguajes de programación que se pueden compilar y ejecutar, y a la derecha hay un cuadro de entrada para que introduzcas el programa. Debajo del cuadro de entrada hay una casilla de verificación "Run Code" y un botón de envío "Submit".

Su funcionamiento también es muy sencillo: primero selecciona el lenguaje de programación que quieres compilar y ejecutar, luego pega o escribe el código fuente del programa en el cuadro de entrada y, a continuación, haz clic en enviar. Así podrás ver los mensajes de error de compilación o el resultado de la ejecución.

Quizás te parezca muy aburrido, pero creo que esto puede ser muy útil en ciertos momentos, especialmente cuando no encuentras un compilador y quieres verificar un fragmento de código; estas situaciones son bastante frecuentes. Sobre todo, es difícil tener una computadora que pueda ejecutar todos los lenguajes; si la tienes, seguramente es tu propia computadora personal, y cuando no estás usando tu propia computadora, te pones nervioso. Además, creo que este servicio es muy interesante porque, de esta manera, incluso puedes escribir programas en cualquier lenguaje desde tu teléfono móvil.

Actualmente, este sitio web admite los siguientes lenguajes: C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Plain Text, Python, Ruby, Scheme, Tcl.

Herramienta de generación de animaciones CSS:Gradient Animator

Esta es una herramienta de generación de fondos dinámicos que utiliza las tecnologías CSS Gradient y CSS Animation. La herramienta es muy fácil de usar; con unos pocos clics del ratón se genera un código de fondo dinámico con degradado de aspecto moderno. Permite que el fondo degradado CSS se mueva suavemente; podemos configurar el ángulo de movimiento, la velocidad de movimiento y el ángulo del degradado. Es compatible con todos los navegadores modernos e IE 10+. Es muy adecuada para fondos de pantalla inicial de páginas web.

Herramienta de colores web:CSS Colours

Como su nombre indica, esta herramienta sirve para que los diseñadores web encuentren colores fácilmente. Proporciona el efecto visual de varios colores, junto con el nombre en inglés, el valor RGB y el valor hexadecimal del color. Es muy cómoda de usar.

Fuente: http://www.webhek.com/10-css-tools