CSS3: buenas prácticas I

¡Estamos de viernes queridos lectores! Qué mejor manera de acabar la semana con un rootie de introducción práctica/teórica sobre CSS. En mi anterior entrada hablé sobre la maquetación básica de nuestra primera web, adjuntando por supuesto el CSS que se utilizó para conseguir el resultado, pero no se explicó – es una entrada más enfocada a HTML -.

Hoy voy a hablar sobre buenas prácticas a la hora de generar un buen código CSS, así como tres conceptos estructurales que debemos grabar a fuego en nuestra cabeza.

Conceptos estructurales

Recordamos que las hojas de estilo sirven para proporcionar un diseño agradable y funcional a nuestra página. A la hora de realizar la estructura en HTML, existen dos conceptos clave:

  • los identificadores únicos de elementos: es una palabra que nos sirve para declarar un elemento de forma única. Ejemplo: <span id="title">título</span>, si hacemos esto no debe haber ningún elemento más cuyo id sea title. En CSS se representan con una # seguido del nombre elegido.
  • las clases: se utiliza un mismo nombre para repetir el diseño en varios elementos. Ejemplo:
    • <li class="sidebar-list">Menú 1</li>
    • <li class="sidebar-list">Menú 2</li>
    • <li class="sidebar-list">Menú 3</li>

Estos dos elementos son llamados selectores. Existen más, desde algunos básicos hasta otros más avanzados. Iremos hablando de los tipos de selectores a medida que vayamos ampliando nuestros conocimientos en las entradas del blog.

Las clases son el elemento clave para ahorrar código CSS. Gracias a un buen uso de ellas tendremos muy organizados nuestros elementos y será fácil hacer modificaciones de manera masiva.

El tercer concepto estructural que quería enseñaros es el agrupamiento. No hay que repetir código, por ello, todos los elementos con idénticas propiedades (tamaños, colores, posiciones…) podemos y debemos agruparlos. En el anterior rootie utilicé este código:

Utilicé el agrupamiento para dar el mismo estilo a 6 elementos principales. Hacer lo siguiente sería catastrófico a nivel práctico – y de rendimiento! – :

No hay ninguna necesidad de hacer algo así existiendo la posibilidad de agrupar los elementos.

Organización y orden

Como en todo en la vida, y más en el mundo de los desarrolladores, hay que ser organizado. No se deben escribir los selectores (ids, clases…) en el orden que nos apetezca. A la larga siempre es aconsejable y reconfortante disponer de un código CSS en condiciones, bien desarrollado, estructurado y comentado.

Por ello os voy a dejar unas cuantas buenas prácticas a la hora de desarrollar nuestra hoja de estilos:

  1. Declara tus selectores más genéricos primero, entonces sigue con el que no es tan genérico, y así sucesivamente. Esto permite que tu CSS herede correctamente los atributos y lo hace mucho más fácil para modificar o eliminar un estilo específico cuando sea necesario. Serás más rápido en la edición del CSS más adelante porque va a seguir un formato fácil de leer, contará con una estructura lógica. En el siguiente ejemplo podemos observar  un CSS bien organizado: primero resets, después enlaces y tipos de enlace, después títulos y subtítulos, luego bloques y columnas, y por último estilos secundarios:
  2. Utiliza una nomenclatura útil, piensa en el futuro. Me explico: imaginad que queremos que nuestros h2 sean de color rojo, no merece la pena declarar una clase que sea .h2-rojo porque sería poco sostenible en caso de recibir cambios futuros. Si dentro de X tiempo queremos que los h2 sean azules, podríamos cambiar el código del color rojo por el azul, pero ¡no sería intuitivo! Ya que tendríamos una clase llamada h2-rojo que pinta los subtítulos de azul 
  3. Comenta. Tener el código comentado es bien.
  4. Para los nombres de los selectores, utiliza guiones medios en lugar de guiones bajos. Ejemplo: .h2-rojo en lugar de .h2_rojo
  5. Haz uso del validador gratuito de CSS de W3C. Si estás atascado y el diseño no está haciendo lo que quiere que haga, el validador de CSS será de gran ayuda en señalar los errores.
    esto es algo habitual 🙂

     

Hasta aquí el rootie de hoy. ¡Que paséis un buen fin de semana!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *