Hoy, Febrero de 2010, ha llegado por fin un juego de PS3 que compré a través de Fnac.es en Octubre de 2009… #FAIL
4:12 PM Feb 8th from TweetDeck

Peleandome todo el día con jQuery, Flash, CSS, HTML… Y lo que me divierto!!!
5:56 PM Feb 8th from TweetDeck

[Noticia] El hijo de Ringo a la batería de The Who: La mítica banda británica estuvo presente en la Super Bowl. http://bit.ly/tln0369
9:03 PM Feb 8th from TweetDeck

[Noticia] Pearl Jam y Rammstein en BBK Live 2010: Ambas bandas ya han sido confirmadas para el BBK Live de este año. http://bit.ly/tln0370
9:07 PM Feb 8th from TweetDeck

Cerrando por hoy… Los días dan mucho de si, pero hay que saber parar a tiempo!
9:13 PM Feb 8th from TweetDeck

[Disco] Manmade God – Manmade God (2003): Angel Garrido Alonso nos descubre un disco realmente interesante. http://bit.ly/tln0371
9:40 PM Feb 8th from TweetDeck

[Noticia] Stone Sour y su tercer álbum: El próximo disco de Stone Sour verá la luz presumiblemente en verano del 2010. http://bit.ly/tln0372
11:01 PM Feb 8th from TweetDeck

Recien instalada la v0.33.0 de TweetDeck… Y a la espera de la tan cacareada nueva interface de Facebook. Dije parar?
11:08 PM Feb 8th from TweetDeck

Seguimos con los CSS… ¿Qué sería del mundo Web sin ese pequeño elemento por muchos olvidado?
2:49 PM Dec 11th, 2008 via Echofon

Por fin en casa… Hay días que parecen durar una eternidad… Hoy ha sido uno de ellos!!!
8:50 PM Dec 11th, 2008 via Echofon

Vamos a Facebookear un poco…
8:50 PM Dec 11th, 2008 via Echofon

Ahora toca ponerse serios con TheNotDead hasta al menos la hora de cenar… Me faltan las horas… Y yo ya no puedo dormir menos!!
9:02 PM Dec 11th, 2008 via Echofon

Llegados a este punto, ya va siendo hora de cenar… Mañana más TheNotDead…
10:43 PM Dec 11th, 2008 via Echofon

Pues bien, las claves fundamentales a la hora de realizar un archivo CSS es que hemos de intentar siempre, como en cualquier otro lenguaje informático, que nuestro código sea limpio, claro y conciso, pero sobre todo hemos de saber optimizar nuestras líneas de código.

Un buen truco para empezar, muy sencillo, a la par que práctico, consiste en utilizar de forma apropiada y eficiente los atributos de los que disponemos, ya que muchos serán los casos en los que podremos simplificar mediante el uso de un único atributo.

Pero veámoslo mejor con par de ejemplos.

Ejemplo 1:

Tenemos definidos los siguientes atributos para las etiquetas div

div {
margin-top: 10px;
margin-bottom: 5px;
margin-right: 15px;
}

No obstante podemos utilizar directamente el atributo margin (top,right,bottom,left)

div {
margin: 10px 15px 5px 0px;
}

Como se puede observar, hemos optimizado considerablemente las líneas de CSS utilizadas, y el resultado es el mismo. Este sencillo truco se puede aplicar también al atributo padding.

Veamos otro ejemplo más.

Ejemplo 2:

Definimos los siguientes atributos para las etiquetas table

table {
border-color: #000000;
border-style: solid;
border-width: 10px;
}

No obstante podemos utilizar directamente el atributo border (width,style,color)

table {
border: 10px solid #000000;
}

Como ya se ha dicho con anterioridad, hemos de intentar que nuestro archivo CSS sea siempre lo más limpio y organizado posible. Una buena forma de lograrlo es estructurándolo de forma que podamos encontrar fácilmente las distintas clases que hemos definido. Para ello resulta vital la inclusión de comentarios, que pueden cumplir una doble función, informar y a la vez separar o agrupar nuestro código.

Remarcar que los comentarios en CSS se insertan entre las etiquetas /* para indicar el comienzo, y */ para marcar el final del comentario.

Veámos un ejemplo práctico.

Ejemplo 1:

/* === CABECERA ==== */
.HeaderContainer { … }
.HeaderLink { … }

/* === PIE DE PÁGINA ==== */
.FooterContainer { … }
.FooterLink { … }

Como se puede observar, hemos definido dos líneas de comentarios, que nos agrupan y separan los CSS utilizados en la implementación de la Cabecera por un lado, y los utilizados en la implementación del Pie de página por el otro. Cumpliendo así esa doble función que mencionabamos con anterioridad de organizar e informar.

Además la inclusión de estos comentarios ira creciendo en importancia, a medida que se incrementen las líneas de nuestro código, y el número de atributos CSS que vayamos definiendo. También será importante en el caso de que sean varias las personas que tengan que utilizar y trabajar sobre ese código CSS. Cuanto más conciso, claro y definido sea nuestro código, como ocurre generalmente en programación, mucho mejor.

Muchos de estos conceptos han nacido gracias a comunidades como la World Wide Web Consortium (W3C), que se encarga desde 1994 de guiar, especificar y definir ciertas recomendaciones o buenas prácticas, para tratar de sacar el máximo partido a las posibilidades y capacidades de la web, pero sobre todo para homogeneizar criterios tanto para (X)HTML como para CSS.

Al hilo de estas recomendaciones también se han ido creando y desarrollando interesantes aplicaciones web con el objetivo de actuar como validadores de los estándares web promulgados por el W3C. Algunos de estos servicios automatizan las reglas básicas de (X)HTML o CSS, por ejemplo. Unas herramientas que nos ayudan a saber si, como desarrolladores web que somos, estamos generando un código correcto y conforme a los estándares web del W3C.

VALIDADOR CSS
http://jigsaw.w3.org/css-validator/