Evitá utilizar CSS inline or CSS in-page
Los estilos CSS pueden ser aplicados de 4 maneras diferentes:CSS inline
<p style="margin-left: 20px;></p>CSS mediante enlace
<link rel="stylesheet" href="nombre-estilo.css" type="text/css">
</head>
<body>Utilizá clases e identificadores en forma apropiada
Especialmente aquellos que se inician con CSS, se les suele armar una verdadera confusión al momento de establecer una diferencia entre class e ID.
La línea de razonamiento que ayuda a aclarar esto, es la siguiente. Si algo ocurre sólo una vez a lo largo de la página, usá entonces ID. Para múltiples ocurrencias debe utilizarse un CLASS.
Es importante, en tiempo de diseño, considerar los cambios futuros. Si existe algún cambio este estilo se repetirá en la página? Si la respuesta es sí o tal vez, entonces usá CLASS.Utilizá un estilo consistente
Tené presente que podés escribir los estilos CSS, en línea
p {font-size: 10px; margin-bottom: 1em;}
O bien en bloque
p {
font-size: 10px;
margin-bottom: 1em;
}
Existe una amplia variedad de preferencias personales al respecto. Algunos desarrolladores encuentran que la utilización del estilo en línea le resulta más fácil para luego encontrar selectores. En cambio, la utilización de un estilo en bloque facilita encontrar propiedades más rápidamente.No especifiques el mismo selector más de una vez
Una pobre organización de la estructura del documento CSS, o tal vez por pereza, puede resultar en consecuencia que algunos selectores sean especificados más de una vez. Por ejemplo, podés especificar algunas propiedades para lista al inicio de la hoja de estilos, luego si decidís agregar alguna propiedad adicional no deberían estar al final de la hoja de estilos sino, al inicio; junto con las declaraciones originales.
Antes de agregar un selector, es una buena práctica asegurarse si no fue agregada previamente.Utilizá selectores en minúsculas
Los selectores son caso sensitivo, lo cual significa que #Header no es lo mismo que #header. En orden de evitar errores, siempre es mejor especificar los selectores en minúsculas. Esta práctica, ayuda a ser consistente en el uso de los caracteres. De mano de otro ejemplo, para evitar errores usá siempre guión bajo o guión, pero no ambos.Utilizá convenciones estándares para los IDs comunes
La mayoría de los diseñadores web ha llegado a un acuerdo (tácito, por cierto) en cómo nombrar determinados elementos. Para aquellos de habla inglesa el header es #header y el footer es #footer. Así también como es nuestro idioma es una práctica común nombrar los Ids como #cabecera y #pie.
Esto ayuda a que otros comprendan nuestro código y nosotros el de los demás.
¿Qué sentido tiene inventar para el pie un ID que se llame #contenedor-final?Utilizá nombres de selectores con significado
Mientras que te sea posible, poné en práctica nombres semánticos (que tengan significado) para tus selectores.
No sólo para que otros desarrolladores puedan comprender tu código. Sino, lo más importante, cuando tengas que hacer vos miso un futuro mantenimiento del sitio.
Si, por ejemplo, tenés una clase que aplica una alineación a la izquierda (de una imagen) ¿qué mejor que nombrarla .image-left, .img-left o .imagen-izquierda?
Para qué darle otro nombre?Cuando te sea posible, abreviá
Es muy común comenzar a escribir una hoja de estilos y a los pocos minutos, tener algo así como:
ul {
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
Cuando ya veas que tenés eso, simplificá. Menos es más (y es lo mismo)
ul {
margin: 10px 0 10px 20px;
}
De idéntica manera, cuando uno se acostumbra al método abreviado, ya escribe:
p {
margin: 6px 0;
}
Lo cual es lo mismo que
p {
margin: 6px 0 6px 0;
}Ordená las propiedades en el selector
Las siguientes declaraciones no se ven mal, por cierto
ul#navegacion {
background-color: #600;
color: #fff;
font-size: 12px;
height: 24px;
margin: 90px auto 0;
padding: 0;
text-align: right;
width: 768px;
}
Pero las siguientes, a mi gusto, se ven mejor
ul#navegacion {
width: 768px;
height: 24px;
padding: 0;
margin: 90px auto 0;
text-align: right;
font-size: 12px;
background-color: #600;
color: #fff;
}
¿Por qué?
Me gusta ordenar las cosas por su propósito y objetivo.
En este ejemplo, las propiedades del modelo de caja, están todas juntas. Las propiedades del texto, también. Y, finalmente, el color de fondo y de la fuente, también están juntas.Acostumbráte a resetear los estilos de los navegadores
Todos los navegadores tienen por defecto un valor para controlar como se visualizan los elementos básicos.
Es una buena práctica cargar al inicio, una hoja de estilos que haga un resete de todos y cada uno de eso valores.
Al respecto, Eric Meyer, mantiene actualizada una verdadera CSS reset.
Conviene cargarla al inicio del CSS o, como hago yo, tener una hoja aparte llamada reset.css, que carga antes que otra.Dividí tu hoja de estilos en secciones específicas
Arreglando los selectores dentro de grupos para diferentes propósitos ayuda a mantenerlos más ordenados. Esto asegura que las secciones mantengas los selectores relacionados, por lo que así se evita que un selector sea llamado más de una vez.
Por ejemplo:- reseteo de la hoja de estilo
- elementos básicos (body, p, ul, ol, li)
- clases más comunes (como en el ejemplo .anterior, .image-left)
- selectores específicos para ciertas partes de la página
- diseño de la plantilla
- contenedores
- encabezado
- navegación
- contenido
- pie de página
Agregar un encabezado a cada sector del CSS
/* CSS reset */
/*--------------pie de página----------------*/
/*========= clases comunes ==================*/
Teniendo en mente que lo que está contenido entre /* y */ no es interpretado por el navegador porque son comentarios de CSS, es una buena práctica identificar los bloques (por lo menos el inicio de cada uno).Incluí los colores de referencia
Cuántas veces has tenido que buscar cual es el correcto valor hexadecimal para los colores utilizados en el diseño. Tenerlos especificados, mediante comentarios, al inicio del CSS ayuda a ubicarlos luego más fácilmente. Está técnica, puede bien verse así en tu hoja de estilos:
/*
Verde principal: #d7ecaa
Verde claro: #f1fcdb
Verde muy claro: #e8f7c4
Marrón: #a66c38
Marrón claro: #632f00
*/Usá comentarios sólo cuando sea necesario
Si todas las declaraciones están escritas en forma correcta, entonces hay muy poco que explicar o comentar. Cualquiera puede comprender lo que el CSS dice. Evitar hacer comentarios innecesarios mantendrá el tamaño del archivo bien pequeño.
Lo que sí no está de más, por ejemplo, incluir un comentario acerca de una propiedad extra para corregir un problema de visualización en algún navegador en particular.Considerá dividir tu CSS en archivos separados
Si tu archivo CSS es muy extenso, tal vez debas considerar separar el contenido según la funcionabilidad.
Por ejemplo. Si una parte del CSS contiene la presentación de un formulario, que sólo es utilizado en una sección del sitio ¿para qué tenerlo en el CSS que carga en todas las páginas?
Podés bien tener diferentes archivos:- reset.css
- plantilla.css
- contenido.css
- formulario.css
Evitá utilizar hacks específicos
Comúnmente los hacks explotan el mal renderizado de determinados navegadores.
El primer inconveniente con ellos es que comúnmente no están bien documentados.
Para determinadas visualizaciones es común encontrar el uso de voice-familiy, para hacer que IE, por ejemplo, se comporte de tal o cual manera.
En el correcto aprendizaje de CSS hay que evitar el uso de estos, especialmente cuando la función que tienen, en forma básica, es distinta.Utilizá comentarios condicionales para determinados navegadores
Los comentarios condicionales para IE, por ejemplo, es una práctica para que sólo este navegador pueda verlo. Ello permite cargar CSS para determinada versión o rango de versiones.
Por ejemplo, este condicional cargará ie.css sólo para Internet Explorer:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Para versiones IE6 y anteriores:
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6bugs.css" type="text/css" />
<![endif]-->Utilizá al mínimo la especificidad
En CSS los selectores más específicos sobreescribirán los selectores más generales.
div#contenedor ul li {
padding: 4px 0;
}
Si #contenedor es un DIV que contiene toda la página, todas las listas tendrán un padding superior e inferior de 4px; ahora si yo quiero que las listas dentro del DIV #contenido tengas menos padding, habrá que hacer lo siguiente:
div#contenido ul li {
padding: 2px 0;
}
Se ve claramente que esto lleva a más y más selectores complejos. A más selectores que agregues más debés sobreescribir las propiedades. Para evitar estos inconvenientes es mejor llevar al mínimos la especificidad de los selectores (utilizando unos pocos selectores en cuanto sea posible). De una manera más simple, lo siguiente:
li {
padding: 4px 0;
}
#contenido li {
padding: 2px 0;
}Utilizá completamente los selectores CSS
No es necesario poner un CLASS o un ID por cada elemento que pensemos va a tener un estilo diferente. Es bueno, por eso, entender acerca de los selectores que tenemos disponibles.
Un ejemplo, podés tener un menú de navegación de la siguiente forma:
<div id="navegacion">
<ul>
<li class="enlace_nav"><a href="enlace1.html" class="enlace">link 1</a></li>
<li class="enlace_nav"><a href="enlace2.html" class="enlace">link 2</a></li>
<li class="enlace_nav"><a href="enlace3.html" class="enlace">link 3</a></li>
</ul>
</div>
Para lo cual el CSS podría bien ser el siguiente:
#navegacion ul {
margin: 0;
display: inline;
}
#navegacion .enlace_nav {
float: left;
}
#navegacion .enlace_nav a.enlace{
color: #fff;
background-color: #600;
text-decoration: none;
padding: 2px 10px;
}
#navegacion .enlace_nav a.enlace:hover {
background-color: #666;
}
El principal inconveniente con esto es que uno termina con una buena cantidad extra de CLASSes en el documento HTML, el cual no es necesario. Simplemente hay que utilizar selectores descendentes para aplicar estilo CSS a las listas dentro de la barra de navegación:
<ul id="navegacion">
<li><a href="enlace1.html">link 1</a></li>
<li><a href="enlace2.html">link 2</a></li>
<li><a href="enlace3.html">link 3</a></li>
</ul>
De esta forma, el CSS queda así:
#navegacion ul {
margin: 0;
display: inline;
}
#navegacion li {
float: left;
}
#navegacion a {
color: #fff;
background-color: #600;
text-decoration: none;
padding: 2px 10px;
}
#navegacion a:hover {
background-color: #666;
}
El resultado es código HTML más sencillo y un CSS más claro.Redundancia o dependencia
Para quienes han escrito CSS durante un tiempo, probablemente han tenido este problema. Es normal tener una buena cantidad de elementos con características similares de visualización. Después de todo, un estilo visual consistente es el secreto de un buen diseño. El inconveniente es que podés estar escribiendo las mismas propiedades a lo largo del CSS.
Una alternativa es segmentar los grupos comunes dentro de CLASSes propias o utilizar selectores para aplicar un conjunto de propiedades genéricas.
Estas CLASSes serán aplicadas a los elementos que lo requieran. Pero ¿qué ocurre si uno quiere modificar una de estas propiedades aplicadas a uno de esto elementos?
Es necesario agregar selectores más específicos para el elemento que lo necesita.
Siguiendo con este método, terminás con una buena cantidad de selectores aplicando CSS al mismo elemento y al cambiar una propiedad se obtienen resultados inesperados en algún lugar del resto del diseño.
Sería más fácil separar las propiedades CSS para cada selector? Bueno, entonces volvemos donde empezamos: reescribiendo el mismo CSS varias veces.
En definitiva, cualquiera de ambos métodos forma parte del gusto personal y cómo uno, en particular, se siente más cómodo diseñando. Pero la tendencia es: la redundancia trabaja mejor para pequeños proyectos que para los grandes. Sitios muy complejos se benefician más de mano del uso de la dependencia que los simples y pequeños.
Dave Shea ha profundizado mucho, al respecto en su entrada (en inglés) Redundancy vs. Dependency
CSS on-page
<style type="text/css" media="screen"%gt;
#lista li
{
list-style: none;
padding: 0.25em;
border-top: 1px dashed #00BFFF;
margin-right: 2em;
}
</style>
CSS @import
Para importar estilos dentro de otras hojas de estilo.
La razón por la que organizo de esta manera es principalmente por la filosofía de cascada en CSS. El reset CSS y los elementos básicos necesitan ir primero a fin que puedan ser sobreescritos posteriormente por selectores más específicos. Esto es útil si tengo que encontrar las clases comunes y los elementos más frecuentes, mientras que la plantilla de diseño rara vez cambia.
Referencia: aPaddedCell
Licencia: este artículo es publicado bajo una licencia Creative Commons
Mi nombre es