Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

9 tips para escribir CSS de forma productiva en 2019

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 22 de Febrero de 2019
  • 2 min de lectura | Diseño Web
9 tips para escribir CSS de forma productiva en 2019
El reproductor de video será cargado en breves instantes.

Reglas básicas para escribir CSS

Vamos a proponeros una serie de reglas básicas con las que mejorar la escritura de CSS, de modo que con estas pautas el trabajo será más sencillo de hacer, sobre todo cuando haya que afrontar retos con hojas de estilo muy grandes o con hojas de estilo en las que trabaja mucha gente a la vez.

Resetea tu CSS

La primera pauta que os proponemos es resetear nuestro CSS, básicamente para evitar que los estilos por defecto que aplican los navegadores supongan algún problema a la hora de conseguir el diseño exacto que queremos.

Esto se consigue de dos formas, bien haciendo nosotros el reseteo a mano, o bien utilizando algunas hojas de reseteo que se encuentran por la web y utilizarlas en nuestros proyectos. Aquí os mostramos dos que se pueden utilizar:


http://html5doctor.com/html-5-reset-stylesheet/
https://meyerweb.com/eric/tools/css/reset/

Utilizar box-sizing

Otra de las reglas importantes que os recomendamos emplear es utilizar siempre el box-sizing, ya que si tenemos muchos elementos en nuestra página web y queremos cada uno ocupe su sitio pues, vamos a tener que calcular las dimensiones de los mismos de manera exacta.

Para ello es muy recomendable añadir esta propiedad al inicio de nuestro CSS:


box-sizing: border-box;

Con esta propiedad esta es la caja que nos quedaría:

9 tips css

No utilizar tablas para maquetar

Esta es una técnica de maquetación que se utilizaba hace años, pero si se utilizan tablas para maquetar, en cuanto se quiera modificar el diseño de esa página web va a suponer un problema y se va a multiplicar el trabajo necesario para hacerlo, además de otras muchas razones que lo hacen muy desaconsejable.

Escribir comentarios en las hojas de estilos

Es interesante anotar comentarios en nuestras hojas de estilos, para especificar qué se está modificando y qué propiedades le estamos dando.

Ordenar las propiedades por orden alfabético

Aunque puede parecer una regla sin importancia, si seguimos esa pauta y todos los selectores están ordenados, cuando queramos hacer un mantenimiento de esa hoja de estilos, ahorraremos tiempo.

Agrupar los selectores relacionados

Esta regla quiere decir que si tenemos una parte para dar hojas de estilos a la cabecera, en esa zona colocamos esos selectores y reglas agrupadas. Por ejemplo, agrupamos los estilos para la cabecera y en otra sección agrupamos los estilos para el menú principal, y así con todas las partes de nuestra web. De esta forma, si queremos modificar la cabecera, podemos ir directamente a la sección correspondiente, y nos evitamos tener que buscar dentro de un CSS que puede ser muy largo.

Usar autoprefixers

Los autoprefixers sirven para añadir los prefijos específicos de los navegadores de forma automática, y cualquier editor de código tiene extensiones para realizar esto con una simple combinación de teclas.

Un ejemplo de estos prefijos específicos sería el siguiente:


-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

De esta forma nos evitamos tener que escribir estos prefijos en cada propiedad concreta, lo que nos ahorra mucho tiempo.

Usar validadores

La mayoría de herramientas disponen de validadores, que nos ayudan mostrando en pantalla los errores de sintaxis que hayamos cometido dentro del código.

Usar preprocesadores para proyectos grandes

Para proyectos grandes es aconsejable utilizar herramientas avanzadas, no utilizar únicamente un editor de texto, si no empezar a utilizar algún preprocesador como Sass o Less.

Existen más reglas, pero estas diez son las reglas básicas para empezar a hacer un desarrollo CSS de calidad.

¿Quieres convertirte en desarrollador web profesional? Este curso de maquetación web es fundamental para comenzar a dominar las hojas de estilo CSS y sus aplicaciones, para que seas capaz de crear todo tipo de páginas web.

cursos-maquetacion-web-css

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Qué es CSS3 y sus fundamentos

Qué es CSS3 y sus fundamentos

Desarrollo Web

20 de Enero de 2019

¿Te has parado a pensar que es lo que hace una Web se vea tan bonita? Para dar ese  aspecto a una página se utiliza CSS. Te contamos qué es CSS3, cubriendo qué es y dónde se usa en los si...

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de HTML5 y CSS3
  • Curso de React JS
  • Curso de Angular 6

y 5 cursos más!

Duración: 40 horas y 47 minutos

Curso de maquetación web con CSS

Curso de maquetación web con CSS

curso

Con este curso aprenderás:

  • Aprenderás a crear de manera clara y eficaz la estructura de tu Web colocando los elementos donde tú deseas.
  • Conocerás el funcionamiento a nivel de maquetación de los distintos tipos de etiquetas.
  • Comprenderás cómo funciona el flujo de una Web

Duración: 2 horas y 10 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars