|

Consejos para organizar tus CSS

ByLuis

Muchas veces cuando estamos diseñando nuestras páginas web, nos encontramos con que vamos añadiendo estilos a nuestras CSS, por lo que al final tenemos un CSS bastante desorganizado y caótico. Aquí os dejo unos pocos consejos para tener unas CSS limpias y organizadas.

  • Agrupa los estilos: júntalos por categorías (cabecera, tipografía, …) y sepáralos mediante comentarios.
  • Elige correctamente las categorías
  • Importa otras hojas de estilo
  • Usa tabulación y saltos de línea
  • Usa selectores para descendientes…

Squeaky Clean CSS

Vía / Caótico Neutral

Similar Posts

CSS para impresión sin cambiar totalmente el aspecto de la web

ByLuis

Muchas de las técnicas para hacer hojas de estilo que permitan imprimir correctamente nuestra web producen una salida que no se parece en nada a lo que se muestra en pantalla. Esto suele confundir al usuario y le produce la impresión de que ha imprimido una pagina distinta.
En ErraticWidsom nos enseñan a hacer hojas de estilo para impresión mantiendo la línea de diseño que se ve en pantalla.
Vía / Digg

CSS Poster: esquema de CSS

ByLuis

CSS Poster es una aplicación que dado un fichero CSS nos devuelve un gráfico con todos los estilos y las relaciones que hay entre ellos.
cssposter.png
El gráfico muestra un árbol, empezando por el logo del servicio, del que cuelgan los distintos estilos y entre estos, sus afectados. Por ejemplo, si tenemos la clase opcion, los párrafos que cuelgan de opcion (opcion p) estarán conectados entre sí, con relación padre-hijo.
Una aplicación que nos puede ser muy interesante para tener un esquema de nuestros estilos. La única pega que encuentro es que el asterísco (*), o incluso el body no aparecen como nodos padre, quizás sea pedir demasiado.
CSS Poster
Vía / X-WEB

|

Vídeos sin el elemento embed

ByLuis

Incluir vídeos, del tipo que sean, en nuestras páginas web suele traernos dificultades, sobre todo si queremos que sean vistas en cualquier navegador y si queremos seguir los estándares. Si os encontráis con este problema nada mejor que echarle un ojo a este artículo, en el cual se indica como incluir mediante el uso de la etiqueta object vídeos de distintos formatos, ya que embed no es estándar.
Entre los distintos tipos de vídeos que incluye están los que usa el Flash Player, como YouTube o Google Video, películas en formato Windows Media y QuickTime.
Ya no tienes excusa para seguir los estándares.
Bye, Bye <embed>

|

Modifica dónde guardar los marcadores de Firefox

ByLuis

firefox.pngHoy me he encontrado con que apagué mal el ordenador ayer, y cuando he ido a poner el Firefox… [tachaaan]… no tenía los marcadores. ¡Socorro!, todos los feeds que tengo con el Sage perdidos. Aunque he podido recuperarlos, y aún no sé cómo, lo que sí he querido hacer es guardar los marcadores en otro directorio, en el cual se hacen copias de seguridad.

El método es sencillo:

  • Cierra Firefox
  • Copia o mueve el archivo bookmarks.html y el bookmarks.bak que se hayan en el profile en el directorio nuevo
  • Escribe about:config en la barra de dirección de Firefox
  • Haz click con el botón derecho del ratón, pulsa en Nuevo->Cadena
  • Escribe como nombre de la preferencia: browser.bookmarks.file
  • Escribe el path completo del archivo bookmarks.html (incluido el nombre del archivo)

Listo, ya tenemos cambiada la localización de los marcadores.

Customize the Firefox Bookmarks location

| | |

CSSVista: editor CSS para Firefox e IE6

ByLuis

CSSVista es una aplicación desarrollada por la gente de SiteVista que nos permite editar CSS y ver los resultados que se producen directamente en IE6 y Firefox.
cssvista.png
Se trata de una aplicación gratuita, todavía en fase de desarrollo que nos puede ser de gran utilidad cuando maquetamos un diseño y queremos que se vea correctamente en ambos navegadores. Aunque yo prefiero usar un editor normal y refrescar el contenido en el navegador que esté probando en ese momento.
CSSVista
Vía / Lifehacker