Os presentamos esta recopilación de los 10 mejores editores de código CSS existentes en la actualidad. Un buen editor de código nos facilitará la tarea repetitiva de escribir mediante autocompletado, nos ayudará a organizar mejor el código y a que todo esté mucho más claro… ¡No los perdáis de vista!

Autor:

Tom es un escritor y diseñador que vive en el Reino Unido. Cuando no está buscando nuevas técnicas, está escribiendo para un proveedor líder de Cartuchos HP Laserjet llamado Cartridge Save cuya sede está en Manchester. Podéis leer más sobre sus escritos en su blog, CreativeCloud.

Introducción

No necesitáis un editor de CSS específico, podéis utilizar un editor externo como Notepad o Dreamweaver, pero una vez que hayáis probado uno de estos editores de CSS, os puedo garantizar que no os arrepentiréis.

Os daréis cuenta que un buen editor de CSS no sólo convertirá la edición de CSS en algo mucho más fácil sino que también lo hará más agradable. El código será más claro, ordenado, más pequeño y más “bonito” en cuanto a formato.

Si bien un editor de CSS no nos salvará de dolores de cabeza a la hora de maquetar, sí que nos harán la tarea mucho más liviana y cómoda: autocompletado, ordenación de código, visualización automática… todo lo que sea sumar será bueno para nuestro proceso creativo.

Los 10 editores de CSS analizados abajo son muy intuitivos y llenos de muy buenas características que mejorarán el estilo final y la calidad de la hoja de estilo. La mayoría de ellos os permitirán ver los cambios hechos en el CSS de manera simultánea en un navegador web para que podáis visualizar al instante los efectos de cada cambio en el CSS que hagáis.

Y hay más. Completarán automaticamente y validarán vuestro código mientras buscando errores al mismo tiempo.

1. Notepad++ (gratis)

Notepad

Puede ser que Notepad++ sea el editor de CSS basado en Windows más popular. Su popularidad viene del hecho de que es fiable, personalizable, intuitivo y ¡totalmente gratis! Ofrece un resaltado de sintaxis, la caracterización y la finalización automática para CSS, C, C++, C#, Java, Javascript, SQL, HTML, XML and PHP.

También permite ver varios documentos a la vez y editar en tabulador, así como hacer zoom y guardar marcadores. Notepad++ incluso os informa del estado (sólo lectura, modificado o no modificado) de cada documento en el que estáis trabajando cambiando el color de su ícono de disco.

2. Coda ($99)

Coda

Coda cuenta con un diseño muy cuidado y con un editor de CSS para Mac muy fácil de uso. Permite tener todos los aspectos del desarrollo en una solo ventana, en una aplicación.

Ofrece la coloración de sintaxis habitual, la numeración de líneas, la finalización automática y la edición de bloc, así como opciones más bien únicas como Live Collaboration que permite editar el código en directo y de manera simultánea con un colaborador en cualquier sitio del mundo.

Clips, otra característica única, es una ventana flotante que permite insertar facilmente trozos de textos CSS utilizados con frecuencia. Coda permite dividir la página en el medio para editar CSS y código fuente simultaneamente.

3. CSSEdit ($79.90 con Espresso)

CSSEdit

A diferencia de algunos otros editores en esta lista, CSSEdit estuvo diseñado unicamente para editar CSS, lo que hace de manera muy efectiva. Principiantes se darán cuenta que los editores visuales de Selector Builder y CSSEdit son muy educativos, mientras expertos podrán editar CSS mucho más rapido y de manera más eficaz.

Las características más fuertes de CSSEdit son Live Preview que, sin tener que guardar ni subir cualquier cosa, permite tener una vista previa de cualquier cambio que hagáis en la hoja de estilo en tiempo real, y Milestones, ¡que permite guardar el trabajo continuamente  para que podáis seguir la inspiración sin temer que todo sea destruido!

4. JustStyle CSS Editor (gratis)

JustStyle CSS Editor

JustStyle CSS Editor funciona con todas las plataformas: Windows, Mac y Linux. No ofrece tantas opciones como sus rivales, pero eso casi se convierte en una ventaja ya que su diseño es muy claro, rápido y fácil de uso.

La ventana de aplicación está dividida en tres planos: uno que enseña todos los estilos, otro que enseña una lista de propiedades y selector de valores, y el tercer plano ofrece un visualizador de estilo con las propiedades y los selectores de cualquier estilo que hayáis elegido.

Con JustStyle CSS Editor, podéis incluso adjuntar e incluir embed CSS dentro de documentos HTML.

5. Rapid CSS ($19.85)

Rapid CSS

Rapid CSS es un editor muy funcional que cuenta con una amplia gama de opciones. Podéis escribir vuestro propio CSS manualmente o, si preferís, también podéis dejar Rapid CSS hacer el trabajo.

Las opciones incluyen un “CSS Checker” que valida vuestro código destacando los errores, CSS Inspector que puede añadir, quitar o modificar propiedades de estilo sin que tengáis que acordaros del nombre de las propiedades CSS, X-Ray que es similar al de CSSEdit, y Find In Files que permite buscar y remplazar texto en documentos.

6. Style Studio ($49.99)

Style Studio

Similar al Rapid CSS pero más cuidado visualmente, lleno de características y de casi el doble de precio, Style Studio satisface las necesidades de edición de CSS de cualquier persona. Está integrado con HTML Tidy, un programa gratis que corrige automaticamente los errores de etiquetación de HTML dejando vuestra edición limpia.

También consta de Intellistyle que valida vuestro código contra las reglas de varios navegadores. Su ventana principal se controla por el validator de CSS que identifica cualquier error que hagáis inmediatamente.

7. TopStyle Pro ($79.95)

TopStyle Pro

TopStyle permite escribir el CSS y tener una vista previa simultaneamente, validar el CSS  contra varios navegadores, utilizar Site Reports para ver qué estilos CSS se usan en vuestra web y Style Upgrade para convertir todos los códigos HTML caducados en CSS.

Encontraréis todas estas características en los otros editores mencionados en este artículo, ¿entonces por qué pagar más? No hay por qué. TopStyle Pro sólo es un editor más limpio en general. Es muy bonito visualmente y realiza operaciones de manera muy intuitiva.

8. Stylizer ($79)

Stylizer

Stylizer es un editor muy limpio y con muy buen diseño que permite crear un diseño CSS en tiempo real en un navegador web. El Code Grid de Stylizer acelera mucho el proceso de codificación CSS gracias a un cuadro en el que podéis entrar el código sin tener que pensar en detalles técnicos como el punto y coma etc.

El Remote Contral de Stylizer coloca las propiedades CSS más utilizadas donde deben estar, justo delante de vuestros ojos mientras estáis creando y editando CSS. También podéis añadir y quitar propiedades del Remote Control en un solo clic.

9. Style Master ($59.99)

Style Master

Style Master, disponible para Mac y Windows, no sólo permite crear hojas de estilo basadas en vuestro HTML y editar CSS mediante ftp, sino que también ofrece la edición CSS de páginas dinámicas como PHP, ASP.NET y Ruby en directo. Style Master incluso soporta CSS3 y HTML5.

Con una finalización automática intuitiva, el Support Watcher de Style Master os avisa de la presencia de errores CSS potenciales para varios navegadores.

10. Free CSS Toolbox (gratis)

Free CSS Toolbox

Como su nombre lo sugiere, Free CSS Toolbox es gratis, así que no podemos quejarnos de las pocas características que ofrece. Sin embargo, si estáis buscando un editor CSS que sea ligero y que realice funciones básicas, entonces Free CSS Toolbox puede ser ideal.

Consta de un editor CSS simple (por supuesto) con finalización automática y resaltado de sintaxis, un formateador de CSS para embellecer vuestro código, un validador para eliminar errores en el código y un compresor de CSS que pretende disminuir el tamaño del CSS de un 70%. Incluso está integrado con el punto de referencia W3C CSS Validator. ¿Qué más quisierais?

Agradecimientos

Como algunos habréis podido comprobar Tom no es hispanohablante pero ha querido contribuír con este artículo para Web.Ontuts, por lo que la encargada de su traducción ha sido nuestra colaboradora y compañera Pauline.

¡Muchas gracias por tu tiempo y dedicación!

Te sugerimos otras entradas relacionadas...

No hay entradas relacionadas para esta publicación.

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (20 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

@javisantana Jajaja sabía que este comentario aparecería jajaja

Harold Dennison

Aunque normalmente acabo haciendo los CSS “a pelo” desde cualquier editor, si tuviese que escojer entre las aplicaciones comentadas creo que me quedo claramente con Rapid CSS 2010, aunque hay alguna que no he probado todavía.

Da muy buena información acerca de compatibilidad entre navegadores, mucha ayuda tipo “estilos relacionados” y demás.

En el lado contrario estaría Stylizer, no me gusta nada el editor “visual”, quizá no por que sea una mala idea, si no por que no me gusta dejar que generen el código por mi.

Aún así, al fin y al cabo acaban siendo decisiones personales, la mayoría son muy buenas aplicaciones.
.

Yo hace un rato vengo usando Komodo Edit y me ha resultado bastante bueno… multiplataforma, código abierto, completado de código, revisor de sintaxis, se le pueden agregar extensiones, etc.

Nosotros en Cokidoo utilizábamos Eclipse… pero ahora nos hemos pasado a Netbeans y la verdad es que nos ha encantado. De todas formas, la recopilación habla de editores que son casi exclusivamente para CSS, editores generales de código los hay muy buenos.

Pues recomiendo encarecidamente el Top Style Lite, osea top style en su versión gratuita. No necesito nada más, es de una limpipieza y claridad totales. Es genial, comodísimo.

Anonimo

En serio, Firebug.

Lo mejor es el Firebug.

Trasteas en la ventana de estilos, y cuando lo tienes como te gusta, lo pasas a cualquier editor y lo autoformateas.

Bonito/barato :P

Harold Dennison

:O
TopStyle’s “Live Spelling” identifies spelling errors as you type with wavy red underlines, and allows you to act upon each identified problem with a new context menu.

Si! un corrector ortográfico en un editor de código! BIEN!

Nunca he usado este tipo de herramientas, pero veré si en algun momento las llego a usar. Este blog es muy bueno!

Saludos! desde Colombia.

Yo empecé con alguno de estos editores, me suena el Topstyle o el Cssedit, pero desde que tengo un manejo mas o menos fluido del CSS, lo hago directamente con Notepadd++

Me quedo con Notepad++, desde que lo conocí nno utilizo otro.

Yo utilizo NetBeans luego de pasar por muchos. Aunque para CSS simplemente Notepad ++, acompañado de mi Directory Opus me hacen el trabajo muy facil a la hora de crear o editar, y subir al servidor.

Santiago Barchetta

Empeze a usar Aptana hace poco. Aunque es un IDE algo mas complejo el cual tiene soporte para muchos lenguajes web, es una opción considerable a la hora de CSS ademas de poseer una vista en vivo en cualquier explorador (personalizable). Lo bueno que tiene Aptana es que se integran de manera natural HTML(4, xhtml 1, 1.1), CSS, JavaScript(con sus framework jQueri, motools, prototipe, etc) i muchas posibilidades con Ajaxs. Algo para considerar creo.

Saludos, excelente blog!

Roberto

He probado la mayoria… y me quedo con el Stylizer.

Como editor, el Ultraedit y el EditPad Pro.

falta en vi el Vim es muy avanzado LOL… o bien el nano en termino medio pero sin salir de la consola, genia ¿no?, LOL….

ya en serio, la verdad yo inicie con notepad(que también falta en la lista), luego pase por Dreamweaver, pero el que sinceramente me fasina es netbeans ya que tienes un entorno completamente integrado, php, html, css, javascript, en el caso de CSS incluso tiene un editor visual para crear estilo, te muestra un previo, aunque no trae un editor en modo diseño como muchos extrañarían de dreamweaver, pero la verdad para los que nos gusta una contaminación de encoding hard y soft esta genial y mas por que un un solo IDE puedes codificar todo lo que respecta a tu web, en el editor HTML si se extraña una vista diseño tipo Dreamweaver.. pero..¿quien la necesita?.. yo no xP…

contaminación = combinación.. hay malditos correctores de ortografía xP…

Javi

PSPad mucho mejor que el Notepad++
Probadlo yo llevo 6 años usandolo. Saludos

Night

Yo por ahora con windows uso Notepad++ pero tengo pensado que para cuando yo me pase a Debian usaré BlueFish, un editor muy bueno en mi opinión

Jose Sosa

Qué hay de DreamWeaver? en la Vista de Código, no la de diseño.