Trucos CSS: Optimizando nuestro CSS (I)

16 jun. 2008
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;
}
comments powered by Disqus
subir