comparte el articulo 

Consejos para escribir CSS más comprensible – Parte 2

Actualizado el 09/11/2012 < > 0 Comentarios

Resumen: Segunda parte de un artículo donde damos algunos consejos que ayudarán a hacer un código CSS más comprensible y fácil de buscar.

En esta segunda parte, mencionaremos algunos consejos un poco más específicos para lograr un desarrollo de CSS adecuado y razonable, para que pueda ser comprendido de mejor manera por aquellos que lo lean. Vale aclarar una vez más, que con estos consejos no tratamos de imponer un estilo o nuestras preferencias sobre las demás, sólo vamos a explicar algunos de los patrones más utilizados, sensatos y recomendados.

Utiliza nombres de IDs y clases significativos

Puede parecer simple en cierta manera, pero la lectura de IDs y clases es uno de los principales métodos para identificar que parte del diseño estamos modificando. Si un ID o clase es bastante especifico, nos ahorrará la necesidad de ir a buscar dicho elemento en el resto del código para identificar en que parte es llamado.

Si por ejemplo quisieramos dar un estilo a la barra lateral, en vez de utilizar un estilo como este:

#bl{
color: #000000;
}

Debemos usar algo así:

#barra_lateral{
color: #000000;
}

Elimina clases y IDs que ya no son utilizados

En muchas ocasiones el sitio cambia, muchos elementos dejan de ser necesarios y se borran del código, por lo que ya no son desplegados en el DOM. Es por esto, que sus estilos ya no se aplican y las reglas CSS para definirlos salen sobrando.

Si ya no necesitamos dicho código, lo mejor que podemos hacer es borrarlo, no hay necesidad alguna de conservarlo, ya que sólo estará ocupando espacio necesario y hará que luzca menos organizada nuestra hoja. Al mantener en la hoja de estilo, IDs y clases no utilizados, estamos aumentando el nivel de complejidad para buscar a través del archivo y localizar lo que necesitamos modificar.

Esto también lleva a la confusión, ya que no podemos identificar que sentencias hacen referencia a los elementos que realmente se utilizan y cuales no. Por lo tanto, tan pronto como borres un elemento del código, elimina también sus estilo. Si sientes la necesidad de conservar dicho estilo porque puedes reutilizarlo en un futuro, puedes guardarlo en una hoja por separado para no tener que rehacer el código.

Aplica un orden alfabético

Otro aspecto importante que se puede considerar para mantener tu código manipulable y fácil para trabajar, es organizar alfabéticamente las clases y los IDs dentro de tu hoja de estilo, así como también las reglas que se encuentran dentro de cada una de las sentencias. Si bien el organizar por bloques o tipos te ayuda a delimitar la búsqueda, el ordenamiento alfabético agregará un plus que te permitirá llegar aún más rápido gracias a la lógica.

Combina sentencias

Si analizas tu código CSS, es muy probable que te encuentres con clases o elementos que compartan básicamente el mismo estilo, sólo quizás en un orden distinto. Los selectores utilizados para identificar cada una de estas partes, se pueden combinar en un solo selector para que de esa manera ahorremos líneas de código.

Divide los estilo en varios archivos

Es común que al iniciar un proyecto, empecemos a trabajar sobre una sola hoja de estilo, la cual se convierte en la poseedora de todos los estilos de nuestro sitio.

Los problemas empiezan a llegar cuando el sitio se torna demasiado grande, la hoja se amplia demasiado y cada vez cuesta más mantenerla ordena. Incluso, algunos de los consejos que aquí mencionamos, pueden parecer bastante complejos cuando se cuenta con una hoja de estilo muy grande.

Es por ello que para esos casos, se puede optar por dividir la hoja general en varios archivos de estilo. Dichos archivos se pueden crear en base al tipo de los elementos, a la página donde se despliegan o al módulo o aplicación que los utiliza.

Por ejemplo, si cuentas con un blog, puedes dejar los estilos para el layout principal en un archivo, y utilizar archivos distintos para los estilos que aplicarás a los posts y a las categorías.

Trata de mantener esto en práctica únicamente si estás manejando proyectos grandes, ya que de lo contrario el uso de muchos archivos en proyectos pequeños puede ser contraproducente.

Busca uniformidad

El código escrito debe parecer que fue hecho por una sola persona, si el desarrollador que estuvo antes que tú, manejaba cierto patrón para elegir los nombres, trata de replicar esto. Es decir, si las clases utilizaban guiones entre las palabras (clase-css-definida), usa el mismo modo para las nuevas clases que crearás, no trates de imponer un estilo sólo porque a ti te gusta más como se ven los nombres de las clases con guión bajo, y si quieres hacerlo entonces trata de modificar todo el código ya existente, para que haya uniformidad.

Recuerda que no somos máquinas

Trata siempre de manejar un lenguaje claro y entendible para el ojo humano, no somos ningún compilador para identificar alguna clase de lenguaje inventado y relacionarlo con cierto elemento. Si para ti tiene sentido lo que estas aplicando, es muy probable que para otros no lo sea tanto, por lo mismo debes de manejar una semántica sencilla.

Aplica un formato correcto

En un esfuerzo extra para obtener mayor calidad, se puede buscar adaptar y crear código en base a un formato estándar. Para lograrlo, se puede optar por seguir ciertas reglas.

Cuando utilices sentencias con varios selectores, no coloques más de un selector discreto por línea. Incluye un espacio antes de la llave de apertura y antes de la de clausura.

Utiliza sólo una declaración por línea, deja un espacio después de los dos puntos de cada regla y después de las comas. Usa letras minúsculas para los valores hexadecimales e incluye un punto y coma al final de cada regla aunque sea la última del bloque.

Publicado el 02/11/2012, última actualización 09/11/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras