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:
- .header
5 respuestas a 7 Técnicas básicas sobre CSS
Deja un comentario
genial! no conocia la técnica 7! muy bien!
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
Hola Joel,
Gracias por tu comentario y por pasarte. Son técnicas básicas pero seguro que tu podrías contarme mucho mas…
Saludos,
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.
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