Escribir código CSS es relativamente sencillo, pero hacerlo en un proyecto grande puede resultar ser todo un desafío.
El código CSS siempre debe:

 

 

css

 

 

Estar optimizado para ocupar el mínimo espacio.

Ser reutilizable en diferentes secciones de la página web.

Ser consistente entre los diferentes navegadores disponibles.

 

 

 

 

 

Prácticas recomendadas a la hora de escribir código CSS:

  • CSS Reset

Usa un código CSS para resetear todos los estilos por defecto que pueden traer los navegadores. Muchos estilos como “padding”, “margin”, “line-height”, “font-size” pueden variar de un navegador a otro. Reseteando estos valores aumentamos la consistencia que hay entre ellos.

Puedes usar un archivo ya desarrollado para este fin, por ejemplo, uno de los mejores códigos que te puedo recomendar es Normalice.css.

 

  • Proporciona información de la hoja de estilo

Nombra el título, el autor, la descripción y la URL en tu hoja de estilo. De esta forma se proporciona al usuario/desarrollador una persona de contacto donde poder acudir en caso de necesitar ayuda con tu hoja de estilos.

 

/*
Theme Name: Simple Parallax
Description: Simple Parallax Scrolling Effect
Author: Ulises Pérez
Author URI: https://exponencial.es/
Tags: Parallax, demo
*/

  • Organiza los elementos de arriba a abajo

Muchas veces los desarrolladores novatos empiezan a poner etiquetas y estilos según vayan surgiendo las ideas. Esta no es una buena práctica para la estructura del código CSS. Como resultado obtendrás una hoja de estilos desordenada en la que encontrar cualquier elemento te llevará mucho más tiempo del necesario. Empieza por los estilos generales y luego pasa a las diferentes secciones de la página web. A continuación muestro un ejemplo.

 

/****** General Styles *********/

body {...}
h1, h2, h3 {..}
p {...}
a {...}

/****** Header Style *********/
#header {...}

/****** Navigation Style *********/
#nav {...}

/****** Footer Style *********/
#footer {...}

 

 

  • Comprime y minimiza los archivos CSS

Es una buena idea minimizar y juntar los archivos una vez se ha completado el desarrollo. De esta forma ocupará menos espacio en el disco y la transmisión se hará con mayor rapidez. Una carga rápida influye positivamente en la experiencia de usuario y en el propio SEO de la página web. Te recomiendo que uses esta herramienta par minificar tus archivos: https://cssminifier.com/.  Recuerda que solo debes incluir estos archivos una vez terminado el desarrollo ya que editar un archivo minificado puede resultar muy tedioso.

 

  • Valida tus archivos CSS

Usando W3C free CSS Validator puedes asegurarte de que tu hoja de estilos está escrita correctamente y no tiene errores. También te ayuda a descubrir errores que de otra forma resultaría muy didicil encontrarlos.