Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

martes, 18 de noviembre de 2008

20 recomendaciones para CSS

Manteniendo el CSS organizado
  1. 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>

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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?

  8. 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?

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


  10. 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.

  11. 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.

  12. 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




  13. 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.

  14. 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).

  15. 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
    */


  16. 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.

  17. 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



  18. 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.

  19. 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]-->


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


  21. 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.

  22. 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


Referencia: aPaddedCell
Licencia: este artículo es publicado bajo una licencia Creative Commons
Share:

Publicidad

Estadísticas

A cotidiano, me siguen