Cada desarrollador web tiene su propio editor de código favorito. Mientras que algunos usan entornos de desarrollo integrados, otros prefieren cosas más sencillas, como Sublime Text, un editor que sirve para escribir distintos tipos de códigos y, entre ellos también sirve para hacer CSS. 

Antes de empezar, hay que destacar la principal característica de este editor de código: es altamente modular. Para aquellos que quieren algo simple, es perfecto y para aquellos que quieren algunos complementos más para facilitar la programación, también lo es. 

Vamos a ver en detalle qué es y qué características tiene Sublime Text y después entraremos en cómo hacer CSS con esta herramienta. ¿Te interesa? ¡Empezamos!

¿Qué es Sublime Text?

Sublime Text es, como decíamos, un editor de código, en este caso, se trata de un editor de carácter comercial. Admite muchos tipos de lenguajes de programación y de marcado de forma nativa. Además, se trata de una herramienta que se puede mejorar mucho con paquetes y extensiones creadas por la comunidad y que parten de software libre. 

La primera versión de Sublime Text fue lanzada en 2013 y la última, la versión 4.0, llegó en mayo de 2021. Se trata de un editor de código que se ha ido asentado y que cada vez más profesionales usan para su trabajo diario. 

Estas son algunas de las principales características que nos podemos encontrar en Sublime Text: 

• Navegación rápida a archivos, símbolos o líneas concretas del código con el que se está trabajando. 
• Edición simultánea: En Sublime Text se pueden seleccionar varias áreas del código y hacer el mismo cambio de manera simultánea. 
• Gran capacidad de personalización gracias a los complementos desarrollados por su comunidad. 
• Compatible con multitud de lenguajes de programación y lenguajes de marcado. 
• Función de autocompletar comandos y partes del código para evitar determinados errores. 
• Editor de código multiplataforma con soporte para Windows, macOS y Linux. 
• Compatible con distintas gramáticas e idiomas. 

Sublime Text es de pago, pero cuenta con una versión de prueba gratuita por tiempo limitado. 

¿Qué es CSS y para qué sirve?

Antes de entrar en cómo hacer CSS en Sublime Text, también es conveniente hacer un repaso por qué es CSS y cuáles son sus principales características. Como seguro que ya sabes, CSS es la hoja de estilo necesaria para crear una página web. 

Esto significa que CSS sirve para aportar un estilo visual determinado a un sitio web. CSS no es un lenguaje de programación en sí, sino más bien se trata de un lenguaje de diseño gráfico para desarrollo web que se complementa con el lenguaje de marcado que es HTML5. 

Mientras que HTML5 nos sirve para dar una estructura, para maquetar una página web, CSS se enlaza con este y aporta un determinado estilo gráfico, una interfaz visible para la página web. 

CSS ahorra mucho trabajo ya que guarda toda la información sobre el estilo visual en un único archivo editable, por lo que es más sencillo hacer cambios si es necesario. 

Las hojas de estilo creadas para CSS se guardan como archivos independientes y se introducen dentro de la estructura HTML para que esta las tome como referencia para dar estilo gráfico y visual a la web.

Igual que sucede con HTML, otros lenguajes de marcado o otros tipos de códigos que se usan para desarrollo de aplicaciones y páginas web, también se puede hacer CSS en Sublime Text. 

Como decíamos, este editor de código cuenta con una gran comunidad, muy activa y que ofrece multitud de complementos y tutoriales para aprender a trabajar con él. Ahora vamos a ver cómo hacer un CSS en Sublime Text, como se usa este editor para el desarrollo web. 

¿Cómo hacer un CSS en Sublime Text?

Lo primero que debes saber es que todos los paquetes necesarios para trabajar con CSS y HTML5 ya están integrados en Sublime Text. Esto significa que simplemente con descargar este editor de código ya te puedes poner a trabajar. 

Simplemente hay que crear el archivo en el editor y empezar a trabajar creando la hoja de estilo CSS. Sin embargo, sí que existen algunos paquetes interesantes que mejoran y facilitan el poder hacer CSS y desarrollo web en general en Sublime Text. 

• Emmet. Este paquete sirve para automatizar la creación de bloques en HTML mediante el uso de abreviaturas. 
• HTML-CSS-JS Prettify. Se trata de un complemento que sirve para dar formato y maquetar tanto el HTML como CSS o JavaScript. Es necesario tener un plugin concreto para que pueda funcionar correctamente, ya que se ejecuta a través de JavaScript. 
• ColorPicker. Este paquete es especialmente útil para crear CSS con Sublime Text ya que hace que no haya que cambiar de ventana para buscar un código de color determinado. Integra una especie de selector de colores para que sea más fácil integrarlos en la hoja de estilo. 
• AutoFileName. Es un paquete muy sencillo pero muy útil. Permite que se puedan vincular archivos usando etiquetas href. 

Como ves, hacer CSS a través de Sublime Text es muy sencillo y se puede crear simplemente tras la instalación del editor. Sin embargo, existen paquetes que te van a hacer la vida mucho más sencilla. Estos son solo algunos ejemplos, la comunidad ofrece muchos paquetes similares o mejores de manera gratuita. 

¡Fórmate en desarrollo front-end!

Para ser desarrollador web front-end, CSS es tan solo uno de los códigos que hay que dominar. Si quieres profundizar en esta profesión, también debes dominar HTML5 y JavaScript. Los 3 hacen que una web sea completamente funcional y usable. 

En este sentido Sublime Text es una herramienta con la que puedes trabajar para hacer CSS o cualquier otro código, ya que tiene soporte para distintos lenguajes de programación. Un buen punto de partida para aprender sobre desarrollo web. Sin embargo, para profundizar, lo mejor es siempre la formación especializada. 

En Tokio School contamos con un curso de Programación web Front-End: HTML5, CSS3 y JavaScript con el que dominarás los tres pilares básicos del desarrollo web. Ponte en contacto con nosotros para obtener más información y resolver todas tus dudas. ¡Te esperamos!