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;
}

Etiquetas:

Este post fue publicado el pasado 26 de noviembre del 2008 a las 22:55 en las categorías CSS. Puedes seguir los comentarios de este post através del RSS. También puedes dejar aquí tu comentario, o hacer un trackback desde tu propio blog.

Deja tu comentario

Nombre*

Email*

Web

Comentario

Puedes utilizar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notificarme los nuevos comentarios por correo electrónico.
También puedes suscribirte sin comentar.