Javier Belmonte Blog personal de Javier Belmonte, técnico de proyectos web en Avanzis, aprendiz de SEO, SEM y CM, estudiante de Informática, emprendedor, blogger, geek, gamer y director de @lasnovedades.

Como ya comenté en mi presentación, uno de los temas principales que se abordará en este blog es el que tiene que ver con las hojas de estilo, también denominadas cascade style sheet y más conocidas como CSS, el termino que se utiliza habitualmente cuando nos referimos a ellas.

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.