Seguir unas pautas a la hora de crear estilos CSS hace que el código sea más claro y legible tanto para nosotros como para otros desarrolladores que deban trabajar en el proyecto.
Aunque no hay definido ningún estándar al respecto, es recomendable seguir las siguientes recomendaciones para conseguir un desarrollo lo más entendible posible.
Con el fin de encontrar rápidamente cualquier parte de código, es recomendable organizar los estilos de arriba hacia abajo.
/****** generic classes*******/ styles goes here… /****** header *******/ styles goes here… /****** nav menu *******/ styles goes here… /****** main content *******/ styles goes here… /****** footer *******/
Para conseguir más claridad en el código y soporte en todos los navegadores conviene no comenzar el nombre de los selectores con mayúsculas, números ni caracteres especiales.
Evitar: #1div, .=div, DivContent
Mejor utilizar: #div1, .div, divContent
Es recomendable escoger una única manera de escribir el nombre de los selectores. Además, es mejor no usar guiones bajos “_” u otros caracteres especiales ya que algunos navegadores no los soportan. Conviene seguir alguna de las siguientes opciones:
/* Opción 1: Palabras separadas por mayúsculas */ navMenu { padding: 2em; border: 2px solid green; } /* Opción 2: Palabras separadas por guiones */ nav-menu { padding: 2em; border: 2px solid green; }
Adopta una única forma de escribir tu código para que sea más fácil de mantener y de encontrar cualquier elemento.
/* Opción 1: Estilos en una línea */ .nav-menu { padding: 2em; border: 2px solid green; } /* Opción 2: Cada estilo en una línea */ .nav-menu { padding: 2em; border: 2px solid green; }
Cuando varios elementos disponen de las mismas propiedades es recomendable compartirlas en vez de volver a repetir el código. Para ello podemos utilizar selectores combinados, tal y como hemos visto anteriormente.
h1, h2, h3 { font-family: Arial; font-weight: 700; }
Es conveniente utilizar selectores descendientes siempre que sea posible antes de crear un selector clase o un selector identificador. De esta forma, el código estará más limpio, dispondrá de menos selectores clase e identificador y se comprenderá mucho mejor.
div p { color: red; }
Siempre que sea posible es recomendable utilizar clases abreviadas para conseguir una reducción de código.
/* Propiedades margin-left, margin-right y margin-top */ .nav-menu {margin-left: 5px; margin-right: 5px; margin-top: 5px;} /* Propiedad abreviada margin */ .nav-menu {margin: 5px 5px 0px 5px;}
Mediante la utilización de nombres que permitan averiguar fácilmente a qué elemento le estamos dando estilo comprenderemos el código fácilmente.
.nav-button { background: blue; } /* Estilo del botón de la navbar*/
Al utilizar en el nombre de un selector una característica visual como el color, el tamaño o la posición, si posteriormente modificamos esa característica, también deberíamos cambiar el nombre del selector. Esto complica mucho el código ya que tendríamos que actualizar todas las referencias a ese selector en el código HTML.
/* Selector con nombre que define la característica visual del color */ .menu-red { background: red; } /* Utilizar mejor: */ .nav-menu { background: red; }
Para descubrir si se producen errores de visualización en los navegadores lo recomendable es instalarlos todos en el equipo. Algunos de los más utilizados son los siguientes:
ChromeFirefoxOperaSafariMicrosoft Edge
También puedes hacer uso de la aplicación browserling que te permite ver tu desarrollo en varias versiones diferentes de cada navegador.
Detectar errores en el código es esencial y se puede hacer fácilmente mediante un validador CSS. El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.
Para ahorrar tiempo y facilitarnos la tarea de incluir los prefijos de las propiedades CSS que todavía no son estables podemos hacer uso de la extensión «Autoprefixer» en Visual Studio Code.