Cuando trabajamos con hojas de estilos muy grandes es preferible estructurar el código de forma que nos resulte mas sencillo modificarlo en un momento dado. Seguir unas pautas y marcarnos unas reglas es básico para mejorar nuestros CSS.
Contenidos
Algunos desarrolladores separan el código CSS en varios archivos y los importan a uno principal de la siguiente manera:
¿Uno o múltiples archivos?
@import "reset.css"; @import "template.css"; @import "forms.css";
¿Qué es mejor en la práctica? ¿Separar el código usando varios archivos o usando un único archivo CSS? No hay una norma específica para esto. Cada diseño es un mundo, y depende de cada uno realizar una valoración objetiva sobre la complejidad real de la estructura del mismo para justificar el uso de varios archivos. Desde mi punto de vista este uso no es útil para el desarrollo de páginas pequeñas, la gestión de un único archivo es mas sencilla que la de muchos.
Agrupa estilos mediante shorthand
Aplicando la técnica shorthand conseguiremos agrupar varias propiedades de un estilo dentro de una sola propiedad, consiguiendo hacer nuestros archivos CSS mucho mas ligeros.
Por ejemplo, podremos aplicar esta técnica en los atributos margin de nuestra hoja de estilos de la siguiente forma:
margin: 10px 20px 30px 40px;
Este código equivaldría, sin usar shorthand, a lo siguiente:
margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;
Podéis comprobar por vosotros mismos la cantidad de líneas que nos ahorramos con esta técnica, con el correspondiente ahorro de peso final en nuestro archivo CSS.
Redefine los elementos HTML
Una buena regla para mejorar nuestros CSS es redefinir los elementos HTML en las primeras líneas de nuestras hojas de estilos.
html { ... }
body { ... }
a:link, a:visited { ... }
a:hover { ... }
h1, h2, h3, h4, h5, h6,
form, input, text-area { ... }
h1 { ... }
h2 { ... }Identa tus elementos
Con el fin de mejorar la lectura de nuestro código es aconsejable “tabular” nuestros elementos. Hay que tener cuidado con esta técnica y usarla de la forma correcta atendiendo a una jerarquía según la importancia de cada elemento.
#header {
height:150px;line-height:150px;
}
#header .logo a {
float:left;display:block;padding:31px 15px;width:400px;border:inherit;
}
#header .logo a:hover { border:none; }
#header ul {
float:right;font-size:22px;text-transform:lowercase;text-shadow:1px 1px 0 #fff;
}
#header ul li {
display:inline;float:left;margin-right:20px;
}
#header ul li a:link, #header ul li a:visited {
color:#444;text-decoration:none;border-bottom:2px solid #b8b8b8;
}
#header ul li a:hover {
color:#000;border-bottom:2px solid #ae684e;outline:none;
}
#header li.current-cat { font-weight:bold; }Utiliza grupos para atributos similares
Este consejo resulta muy simple pero a la vez muy útil. Separamos los atributos similares en grupos y los enumeramos alfabéticamente. En el siguiente ejemplo por un lado tenemos el grupo de los atributos generales del DIV y por otro lado el de la tipografía:
.div {
background: #fff;
border: 1px solid #000;
height: 100px;
margin: 10px;
padding: 5px;
width: 300px;
...
color: #000;
font-family: Arial;
font-size: 12px;
line-height: 15px;
}De esta forma será más sencillo manejar cada sección individual con los atributos relacionados.
Imagen cedida por @pankajpatel
