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:
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.
Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.
