Ventajas de usar CSS
Muchas veces se dice que no siempre el camino fácil es el mejor. Esto se puede aplicar a muchas cosas, y el CSS (Cascading Style Sheets) no iba a ser menos. Seguramente si acabáis de entrar en el mundo del diseño web os habréis sentido tentados a usar tablas (<table>) en lugar de capas (<div>) y a usar el atributo style en lugar de archivos CSS. A continuación voy a exponer mis 10 razones por las cuales es mejor usar CSS que no hacerlo.
Reutilizar código
Pongamos por caso que estamos escribiendo un blog y que tenemos hecho ya el diseño. Ahora insertamos una imagen y queremos darle un borde gris para que encaje al a perfección con nuestro diseño. ¿Qué hacemos: modificar el CSS de nuestro diseño o utilizar el atributo style? Es tarde, estamos cansados y al día siguiente tenemos que madrugar, así que tomamos la vía rápida y utilizamos style. Un par de semanas después no encontramos en la misma situación y hacemos lo mismo, y según avanza el tiempo cada vez se dan más ocasiones como ésta. Quizás aplicar un simple borde no sea nada del otro mundo, pero si en lugar de eso también aplicamos un margen, un relleno y un color de fondo, estamos duplicando un montón de código que no tendríamos por que repetir.
Separar el contenido del diseño
Supongamos que hemos hecho lo que comentaba en el punto anterior y que tenemos un montón de etiquetas con estilos heredados del atributo style. ¿Qué sucedería si cambiamos el diseño de la web? Pensemos en un blog con WordPress y en la cantidad de themes que hay disponibles. Quizá dentro de tres o cuatro meses queramos cambiar el diseño por uno nuevo, y al aplicarlo no encontraríamos con una desagradable sorpresa: los elementos que tienen estilos en la etiqueta style se ven como en el diseño anterior y quedan mal en el nuevo diseño. Ahora tendríamos que ir buscando uno a uno cada elemento que al que le hemos añadido estilos de este modo para cambiarlos por unos que queden mejor. Menuda faena, ¿no os parece?
Rediseñar de forma más rápida
Pensemos ahora que hemos sido nosotros los que hemos creado el diseño, y que lo hemos hecho utilizando el atributo style. Si nuestra web es dinámica, tan sólo tendremos que modificar algunos archivos, pero si la hemos hecho con archivos HTML sueltos, sin una Base de Datos que almacene el contenido, tendremos que modificar tantos archivos como contenido hayamos creado. Quizás 10 páginas no son muchas, pero por ejemplo este blog tiene ya más de 650 artículos, que serían más de 650 archivos a modificar… no quiero ni imaginármelo.
Tener un código limpio
Algunas de las cosas que nos pueden parecer extrañas al entrar en el mundo del código (sea el que sea) es que se tabula con muchísima frecuencia el código. ¿A qué se debe? A mejorar la legibilidad del mismo. Puede que tras hacer un diseño o crear un programa recordemos a la perfección en qué línea estaba cada cosa y dónde comenzaba y acababa cada etiqueta (o condición, o bucle o…). ¿Nos acordaremos dentro de dos meses? ¿Y dentro de dos años? ¿Y aquellos que sólo miren el código para aprender podrán entender algo? Tener un código limpio es muy importante para poder mantener un proyecto, sea código CSS, PHP, C++… Tabular el código es una forma de mantenerlo limpio, y añadir estilos con el atributo style es una forma de ensuciarlo.
Mirad el siguiente código:
[html]<div class="nota"><p>Hola mundo</p></div>[/html]
Y ahora mirad este otro:
[html]<div style="background:#000 url(img/fondo_nota.png) top left no-repeat; border:1px solid #CCC; padding: 10px 5px 7px 3px; margin:2px 5px 6px 1px; float right; display:block; position:relative; top: -20px; left:50px;"><p>Hola mundo</p></div>[/html]
En ambos el contenido que se muestra es el mismo. ¿En cuál os ha costado más encontrar la frase que verá el visitante? Este es un ejemplo de a lo que me refiero con limpieza de código.
Selectores más avanzados
Hasta ahora todo lo que habíamos visto que nos permitía hacer CSS también podíamos hacerlo con el atributo style, pero no es así, CSS nos permite hacer más cosas. Pensemos por ejemplo en que queremos que un link cambie de color al pasar el cursor sobre él. Con CSS lo tenemos realmente fácil:
[css]a:hover { color:#CCC; }[/css]
Sin embargo hacer esto con el atributo style no es posible. Puede que cambiar el color de un enlace no os parezca demasiado útil, pero imaginad ahora que queréis hacer un menú desplegable sin usar Javascript. Con CSS es realmente fácil de hacer, pero ¿y con el atributo style? Simplemente no se puede hacer.
Selectores “a secas”
Ahora pongamos el caso de que queremos usar Javascript para añadir algún efecto o para hacer que al hacer clic sobre cierto elemento se muestre otro elemento oculto. Usando el atributo ID o class de cualquier etiqueta HTML podemos detectar con Javascript no intrusivo cuándo se hace clic, sin embargo si no usamos estos atributos no podemos detectar cuándo se pulsa cierto elemento sin recurrir a métodos no recomendados para la accesbilida del sitio web. Además, tanto al atributo ID como el atributo class se pueden usar para darles estilos a los elementos de la web, así que ganamos en Javascript no intrusivo y en CSS.
Carga más rápida
Toda esta limpieza y reutilización de código contribuyen a que la página cargue más rápido, ya que hay un total de menos código, los archivos tienen un menor tamaño y la descarga de los mismos dura menos tiempo. Además al reducir el tamaño también reducimos el ancho de banda que consume cada visita, con lo cual también podemos ahorrar algo más en temas de alojamiento y servidor.
Un diseño para cada ocasión
Otra ventaja del CSS es que podemos cambiar el archivo por otro y modificar totalmente el aspecto de la web sin tocar el contenido. El mejor ejemplo de esto mismo es CSS Zen Garden, una página que tiene siempre el mismo código HTML y que sólo cambia el archvo CSS que se carga. Quizá parezca una tontería, pero en muchas ocasiones es necesario cargar un archivo CSS específico para cierto navegador o un archivos CSS diferente para dispositivos móbiles o para una versión para imprimir.
Las tablas para tabular
Y aquí es donde entran las tablas. Sin duda es muy fácil convertir una tabla en un rectángulo con esquinas curvas o un diseño a tres columnas, pero ¿se crearon para eso? No, el objetivo de las tablas es mostrar contenido tabulado, tarea que desempeñan la mar de bien. Pensemos que usamos tablas para el diseño de un blog en tres columnas. Ponemos una sidebar a cada lado y el contenido del blog en la columna central. Ahora imaginemos que queremos las dos sidebars a la derecha o ambas a la izquierda. Habría que modificar sí o sí el código HTML ya que no hay forma de alterar la posición de las columnas mediante CSS. Sin embargo usando capas (div) y CSS se podrían hacer las tres columnas sin problemas y más adelante cambiar su disposición modificando sólo el código CSS. Pensemos de nuevo en CSS Zen Garden. Si usara tablas, sería imposible que cambiase tanto la disposición del contenido al modificar el CSS.
Y a todo esto, ¿qué pasa con los estándares?
No es mi intención hablar de los estándares en este artículo, pero algo comentaré. Actualmente seguir los estándares y comprobar que el código es válido tiene algunas ventajas. La primera es que te ahorras posibles problemas al dejar etiquetas sin cerrar o al olvidar alguna comillas (“) o similares. Algunos navegadores pueden mostrar correctamente un diseño con este tipo de errores mientras que otros no. Siguiendo los estándares te ahorras estos problemas. Además los estándares te ofrecen un buen punto de partida para que el diseño se vea correctamente en cualquier navegador. Está claro que todo acaba dependiendo del motor de renderizado del navegador, pero si el navegador en cuestión utiliza un buen motor de renderizado, la página se verá perfectamente, mientras que si se recurre a código no estándar y que sólo funciona en determinado navegador, el página no se verá correctamente en todos lo demás. Los estándares no limitan lo que podemos hacer, simplemente nos proponen (ya que no es obligatorio, sino recomendable) un modo de hacerlo para que todos lo hagamos igual y los navegadores sean capaces de mostrar correctamente todo el contenido. Siempre debe haber un estándar, sino, cada navegador interpretaría el código de una forma diferente (algo que lamentablemente, a pesar de los estándares, sucede). ¿A que a nadie se le ocurriría utilizar la etiqueta <span> como <div> o como <p>? ¿Entonces por qué aún hay quién utiliza la etiqueta <table> como <div>? ¿Qué debe interpretar el navegador: esa tabla es sólo para estructura del contenido o es (como dice el estándar) para mostrar contenido tabulado?
No replies on “Ventajas de usar CSS”