Consejos para organizar tus archivos CSS

Noticias - Diseño

CSS (Cascading Style Sheet) se usa para separar el contenido de la apariencia en un sitio web, esto significa que con CSS se obtiene la estrucutra y código de los documentos limpia, con la posibilidad de controlar la apariencia rapidamente.

Más de una vez se toma un proyecto comenzado por alguien, o es necesario actualizar un viejo diseño web, sólo para darse cuenta que el código original es un desastre. Ésto suele ser debido a una codificación desordenada desde el principio o por multiples cambios y parches sobre la marcha, por ejemplo.

CSS es un lenguaje que está extendido prácticamente en cualquier sitio web, CSS es poderoso y tiene muchos detalles que pueden ayudar a mejorar un diseño web.

Este artículo se centra en dar algunos consejos para escribir un CSS limpio para evitar incoherencias, por lo que tu CSS pueda ser más fácil de mantener y editar más en un futuro.

Utiliza siempre una hoja de estilo externa

La mejor manera de separar el contenido de la apariencia es usar una hoja de estilo externa (archivo css). Las ventajas de usar hojas de estilo externas son:

  • Separación de contenido de la presentación
  • Las hojas de estilo externas se mantienen en la caché por lo que los tiempos de carga se reducen
  • Una hoja de estilo única se puede aplicar a todas las páginas de un sitio web, permitiendo cambios rápidos de estilo.

No se deben utilizar estilos en linea, ya que cada cambio de estilo que hay que hacer se deberá realizar en cada documento HTML en lugar de un único cambio en una hoja de estilo externa que afecte de manera global. Cuando se utiliza una hoja de estilo externa, simplemente coloca el código siguiente dentro de las etiquetas <head> del código fuente HTML:

href="/CSS/style.css" <link rel="stylesheet" type="text/css" media="screen">

Asegúrate de sustituir CSS/style.css con el nombre y ubicación del archivo CSS. 

No es recomendable usar muchas hojas de estilo. El motivo es que un navegador antes de mostrar una página, debe descargar y analizar cualquier hoja de estilo que se requiera en la página. Además, una vez que ha hecho ésto con todas las hojas de estilo, el motor del navegador evalua todas las reglas CSS contenidas en los archivos para ver si la regla se aplica a la página actual.

Restructurando tu hoja de estilo

Cada navegador web tiene unos valores por defecto para los elementos que muestra. Un reajuste global soluciona este problema de compatibilidad entre navegadores y permite crear un sitio totalmente desde cero. Un reajuste de la hoja de estilo es básicamente añadir al inicio del CSS un valor de referencia para todos los elementos HTML con el fin de evitar cualquier incoherencia entre los navegadores (márgenes, rellenos, etc.).

Un ejemplo de un comienzo de una hoja de estilo lista para restablecer los estilos de cualquier navegador podría ser el siguiente:

body, div ul, ol, li, p, th, td, table, tr, td {
margin:0;padding:0;
}
form, fieldset, legend, label,input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}

Ésto siempre dependerá del sitio en el que estes trabajando, así que no se incluirán elementos que nunca se vayan a usar.

Organiza tus archivos CSS

Organiza

Organizar el código significa ahorrar tiempo a posteriori, para que cuando se tenga que editar el código no sea algo ilegible. Además nunca se sabe quién puede ser que necesite trabar con el código en el futuro.

Las dós maneras más comunes de cómo escribir una hoja de estilo son en una línea o el método multi-línea.

/* Una línea */
.linea {background: #F7F7F7; border: #CCCCCC 2px; color: #333333;}
/* Multi-línea */
.multi_linea {
background: #F7F7F7;
border: #CCCCCC 2px;
color: #333333;
}

En el ejemplo multi-línea cada propiedad se define en su propia línea. Este método es utilizado ampliamente, no solo en los archivos CSS, sino también en artículos y libros.

La consistencia es la clave

No sólo basta ser consciente de cuando usar una línea o varias, tambien en cómo nombrar las diferentes clases. Nombra los elementos por lo que son, no por como se ven. Por ejemplo: .arial28pt es más limitado que .postitulo (imagina desear cambiar la familia de la fuente más tarde).

Dar un nombre a los elementos claro y preciso evitará la confusión y permitirá entender un CSS mejor y rápido. Hay que tener cuidado con usar guiones bajos ya que algunos exploradores, especialmente los antiguos, no lo soportan, en su lugar se puede usar el guión.

Utilizar una estructura coherente en el CSS según el contenido de las diferentes secciones de la página, como todos los consejos, ayudará a ediciones rápidas ya que será más facil de leer. Como ejemplo:

  1. Restablecer
  2. Enlaces
  3. Fuente
  4. Encabezado
  5. Navegación
  6. Contenido
  7. Extras
  8. Pie de página

Comenta tu CSS

En el archivo CSS se pueden incluir comentarios a los diferentes estilos. Esto es muy útil para trabajo en equipo, plantilas para CMS, recordar funciones. También se puede añadir información de derechos de autor, versión, etc.

Para agregar un comentario se añade /* para iniciarlo y */ para cerrarlo:

/*Esto es un comentario*/

Un uso útil de los comentarios es crear una referencia de la paleta de color usada en el sitio en el inicio del archivo, en hexadecimal, así si se olvida algún color simplemente lo comprobaremos en el inicio del archivo.

/* Colores:
background: #EEE;
normal text: #222;
links: #888;
headings: #444;
Fin Colores */

Conoce la forma abreviada de CSS

Con el añadido de diferentes estilos a los elementos de nuestro sitio, el archivo CSS acaba siendo muy pesado y afecta a la carga de la página en los navegadores. El uso de CSS en forma abreviada hace que el tamaño del archivo se pueda reducir considerablemente. Supongamos el siguiente código:

#div {
color: #222222;
font-size: 14px;{
font-family: Arial, Helvetica, sans serif;
line-height: 24px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 12px;
margin-left: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

Si ese tipo de estructura de código se repite en diferentes elementos modificar algo puede ser una tarea que nos lleve más tiempo del necesario. Gracias a poder abreviar el CSS el ejemplo puede quedar así:

#div {
font: 14px/24px #222 Arial, Helvetica, sans serif;
margin: 10px 24px 12px 0;
padding: 10px;
}

Ahora es mucho más rapido escribir, buscar y editar, ya que de 13 hemos bajado a 5 líneas. Recuerda que el orden de los lados va como si de un reloj se tratase: arriba, derecha, abajo, izquierda.

Combina y agrupa elementos

En algunas ocasiones los estilos de diferentes elementos puede ser iguales, lo que hace un CSS extenso. Por ejemplo si los H1, H2 y H3 tienen el mismo tipo de letra color y margen con una única diferencia de tamaño de fuente, se podrá pasar de:

h1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 36px;
color: #333333;
margin: 10px 4px 6px 2px;
padding: 0px;
}

h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 24px;
color: #333333;
margin: 10px 4px 6px 2px;
padding: 0px;
}

h3 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 21px;
color: #333333;
margin: 10px 4px 6px 2px;
padding: 0px;
}

a un código más compacto:

h1, h2, h3 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 21px;
color: #333;
margin: 10px 4px 6px 2px;
padding: 0;
}

h1 {
font-size: 36px;
}

h2 {
font-size: 24px;
}

h3 {
font-size: 21px;
}

Agrupando las declaraciones idénticas el CSS se hace más ligero y se pueden añadir características unicas de igual manera.

Valida tu CSS

Si trabajando en un diseño por alguna razon las cosas no aparecen correctas, el validador W3C CSS (gratuito) será de gran ayuda para detectar posibles errores. La validación brinda la oportunidad de asegurar que el trabajo es compatible en la mayoría de los navegadores que cumplan los estándares.

Comprime el trabajo finalizado

Una vez terminado el código CSS y que todo funcione correctamente minimizar el contenido del fichero ayudará a una carga más rápida de las páginas. Existen herramientas como CSS Drive CSS Compressor que quitarán todo el espacio innecesario. Durante este proceso también se pueden combinar todos los archivos CSS en un archivo único, que reducirá el número de peticiones HTTP necesario para cargar la página.

Conclusión

Independientemente de si se trabaja en equipo, con clientes o por uno mismo, estas técnicas básicas ayudarán a escribir códigos CSS que ahorren tiempo y frustraciones.




Comentarios permitidos sólo a usuarios registrados
Acceso
Registro

Noticias ISIT Diseño
*/ ?>