7 Técnicas básicas sobre CSS

// Septiembre 24th, 2009 // misceláneas

Con el objetivo de ordenar mis apuntes sobre CSS me he propuesto hacer un pequeño listado con una breve descripción de 7 técnicas muy básicas pero útiles sobre CSS.

1. RESET.CSS

¿Que hace? Lo que hace es resetear los estilos y las propiedades por defecto que los diferentes navegadores le dan a cada elemento. Al utilizarlo conseguimos una página cross-browser (multinavegador).

Lo más recomendable es incluirlo en un archivo css diferente del de los estilos de nuestra web (reset.css por ejemplo) y realizar la llamada primero al reset y luego el resto:

< link rel=”stylesheet” href=”reset.css” type=”text/css” />
< link rel=”stylesheet” href=”general.css” type=”text/css” />

Los reset.css frameworks más utilizados son los de Yahoo Reset CSS o Eric Meyer’s CSS Reset.

2. SHORTHAND CSS

¿Que hace? Los shorthand no son más que una manera reducida de escribir las propiedades de estilos CSS. Lo más importante es que generan un código más limpio y fácil de entender.

En lugar de crear una CSS como esta:

  1. .header {
  2. background-color: #fff;
  3. background-image: url(image.gif);
  4. background-repeat: no-repeat;
  5. background-position: top left;
  6. } 
.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left;
    }

Se puede acortar hasta conseguir lo siguiente:

  1. .header {
  2. background: #fff url(image.gif) no-repeat top left 
.header {
      background: #fff url(image.gif) no-repeat top left
    }

Más info – Introduction to CSS Shorthand, Useful CSS shorthand properties

3. DIFERENCIAR CLASS DE ID

¿Cómo? Ambos son dos selectores para nombrar los tipos de clases. Los selector tipo CLASS se representan con un “.” antes de nombrar las características de la clase. Los selectores tipo ID se representan con un “#” antes de nombrar las características de la clase.

¿Como saber cuando usar un ID o un CLASS?

El ID es un selector unico, solo se puede usar una vez en toda la página, mientras que los selectores CLASS se pueden usar tantas veces como se necesite.

Mas info – Class vs. ID | When to use Class, ID | Applying Class and ID together | CSS Syntax

4. UTILIZAR <li>

¿Por qué? Son las listas de siempre pero con CSS. Uno de los problemas más habituales al empezar a trabajar con las CSS es el abuso de los <div>, <divitis> como ya he leido en algún sitio. Los <li> son muy útiles si se utilizan correctamente y particularmente para el diseño del menu principal.

Mas info – Taming Lists, Amazing LI

5. OLVIDAR LAS  <table> PROBAR CON LOS  <div>

¿Por qué? Las tablas de siempre pero con CSS. Quizás esta conversión sea la más dolorosa y lenta pero tu código lo agradecerá. Mi consejo es que para tablas sencillas, 4×4, utilices los <div> y una vez cojas soltura pruebes con cosas más complejas.

Mas info – Tables are dead, Tables Vs. CSS, CSS vs tables

6. ELIMINA SELECTORES SUPERFLUOS

¿Qué? Se trata de eliminar aquellas declaraciones CSS que pueden ser más simples, en lugar de:

    1. ul li { … } 
    ul li { ... }
    1. ol li { … } 
    ol li { ... }
    1. table tr td { … } 
    table tr td { ... }

Se puede acortar como

    1. li { … } 
    li { ... }
    1. td { … } 
    td { ... }

7. CAMBIAR TEXTO POR IMAGEN

Es una práctica común la de reemplazar el título de la página, <h1>title</h1>, por una imagen. Para hacerlo solo hay que añadir una imagen y llamarla correctamente desde las CSS.

  1. h1 {
  2. text-indent:-9999px;
  3. background:url(“title.jpg”) no-repeat;
  4. width:100px;
  5. height:50px;
  6. } 
h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}

Explicación: La opción text-indent:-9999px; muestra el título fuera del screen y en su lugar coloca la imagen que hemos llamado con el background.

  • No Related Post
w. Jesús López Cortiñas
d. Consultor de Marketing Online. Seo, Sem, Blogs, Redes Sociales, facebook , twitter, tuenti...

5 Responses to “7 Técnicas básicas sobre CSS”

  1. Joel de Almeida dice:
    Septiembre 25, 2009 en 10:10 am

    genial! no conocia la técnica 7! muy bien! ;)

  2. cmacias dice:
    Septiembre 29, 2009 en 4:56 pm

    Hola Jesus, muy buenas técnicas desde luego, pero cada una de ellas son matizables según el diseño en el que las quieras aplicar.

    1.- El reseteo que yo utilizo es el de Eric Meyer, aunque con un par de reglas a mayores que creo que son necesarias.

    4.- Las listas para crear menúes están muy bien cuando quieres generar una estructura más o menos compleja de diseño. Para cosas simples un enlace básico dentro de un div es lo ideal.

    5.- Ojo. Las tablas siguen siendo los mejores elementos para mostrar datos tabulares. Los lectores de los navegadores para discapacitados visuales leen los datos de las tablas de forma “lógica”, por lo que son el medio ideal para mostrar este tipo de datos.

    6.- Generalemente en un proyecto normal suelen convivir “listas ordenadas” y “listas desordenadas”, por lo que siempre es interesante diferenciar hacer un “ol li {}” o “ul li”. En cuanto a las tablas más de lo mismo, un “” puede depender de un “tbody”,”thead” o “tfoot”, por lo que no está de más el especificar quien es su “padre”.

    Al margen de todo esto, hay más técnicas que nos pueden facilitar la vida a la hora de crear un sitio web.

    Un saludo

  3. Jesús López dice:
    Septiembre 29, 2009 en 5:07 pm

    Hola Joel,

    Gracias por tu comentario y por pasarte. Son técnicas básicas pero seguro que tu podrías contarme mucho mas… :P

    Saludos,

  4. Jesús López dice:
    Septiembre 29, 2009 en 5:25 pm

    Hola Carlos,

    Totalmente de acuerdo en que son matizables ya que las entiendo como técnicas básicas.

    1. ¿Qué añades al reseteo? Utilizamos el reseteo para evitar problemas con los distintos navegadores pero después cada diseño tiene sus propias CSS enfocadas en dos navegadores: explorer y firefox.

    4. Compro. Si no se preve un crecimiento es más rápido hacerlo así.

    5. Buena apreciación. Mientras no se desarrolle un microformato para las tabulaciones las tablas son el formato más extandar.

    6. Respecto a los listados suele repetirse el mismo error. Como se puede tener varios listados y estes con distintos formatos suelen multiplicarse las CSS que no se utilizan. Por ello mi orientación es para recordar que se deben reducir en la medida de lo posible.

    Más que haber más técnicas yo diría que esto tan solo es un apunte sobre “iniciación a la buena praxis” en las CSS. Seguro que con una cerveza me contarías muchas más interesantes…

    Saludos y gracias por el aporte.

  5. cmacias dice:
    Septiembre 30, 2009 en 1:17 am

    Hola Jesús.

    En el punto 1, añado un reseteo a los elementos “body” y “html” que evita el doble scroll en Opera para casos en que quiera un diseño al 100% de alto, también reseteo los “hr” que en más de una ocasión te pueden gastar un susto. Y efectivamente aunque no es un reseteo, tengo una serie de clases que me evita el tener que usar etiquetas que están a punto de desaparecer (deprecated) y otras que les dan a determinados elementos sus propiedades “lógicas”.

    Desgraciadamente no todo es Explorer y Firefox. Chrome, Safari y Opera son en principio los que más respetan el standard, independientemente de que tienen sus propias reglas para uno u otro efecto, además de que en la comunidad de desarrolladores su uso va creciendo.

    Y Bingo, para el punto 6 lo lógico es no complicarse la vida con tags enlazados y “enredados”. Desgraciadamente con un proyecto mediano/grande, la complejidad del diseño te obliga a tener que enlazar etiquetas para no tener que crear clases que pueden llegar a complicarlo más.

    Y claro que acepto esa cerveza. Sólo tenemos que poner un día y una hora.

    Un saludo

Leave a Reply