Consejos para estructuras tus CSS

ByLuis

Buenos consejos para realizar tus estilos CSS bien estructurados.

  • Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
  • Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
  • Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
  • Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
  • Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
  • Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Write a well structured CSS file without becoming crazy

Vía / CSS Globe

Similar Posts

| | |

Personaliza los radio y los checkbox

ByLuis

Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
radiocheckbox.png
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
Vía / Infected-FX

YAML: framework CSS

ByLuis

YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseños web proporcionandonos diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.
yaml.png
A parte, nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.
YAML
Vía / Ajaxian

70 ideas para crear mejores CSS

ByLuis

Un gran recopilatorio sobre consejos y técnicas para desarrollar tus CSS. Un lugar dónde encontrar bastantes cosas de las que necesitamos cuando queremos desarrollar unos CSS en condiciones. Cambiar colores al texto o poner bordes no es suficiente, los CSS son más complejos.

La lista está dividida en diferentes apartados:

  • Cómo empezar.
  • Organizar el código.
  • Tratar con id, class, selectores y propiedades.
  • Abrevia el código.
  • Tipografía.
  • Depurar el código.
  • Consejos técnicos sobre id y class.
  • Consejos técnicos sobre selectores.
  • Estilos en enlaces.
  • Técnicas CSS.
  • IE.
  • Obtener inspiración.

Entre todos los consejos, algunos me gustaría destacar, puede que sean conocidos de sobra, pero nunca viene mal volver a recordarlos.

  • Para empezar, usa una página en blanco, dibuja dónde quieres cada bloque (cabecera, contenido, paneles laterales, pie de página), sitúa las capas y empieza a crear los estilos.
  • Organiza tus CSS en bloques y añade comentarios para indentificarlos, cuando quieras añadir, modificar o borrar, siempre será más cómodo y rápido si lo haces así.
  • Escribe los contenedores al mínimo, piensa bien en la estructura y no lo llenes todo de capas.
  • Evita los selectores y el hacking, aunque sobre el hacking yo diría que ni lo uses.
  • Escribe en los comentarios al inicio los códigos de colores que utilices para facilitarte el trabajo.
  • Escribe el nombre de los ids y los class de acuerdo con la semántica.
  • Acorta la notación hexadecimal: #334455 es #345. Yo en esto fallo, me cuesta hacerlo así, malas costumbres.
  • Usa mayúsculas o minúsculas mediante estilos.
  • Usa bordes para localizar las capas cuando estés depurando.

70 Expert Ideas For Better CSS Coding

Vía / Techmeme

Render más rápido de las tablas con CSS

ByLuis

En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.

La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:

.fixed_table {
table-layout: fixed;
}
.auto_table {
table-layout: auto;
}

El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.

El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.

Use the table-layout CSS property to speed up table rendering

Vía / Posh CSS

|

Floatutorial

ByLuis

Un impresionante tutorial que nos va enseñando paso a paso como posicionar elementos HTML con float y clear. Nos enseña con ejemplos:

  • Información general, definición de conceptos, explicación de float y clear.
  • Posicionamiento de una imagen a la derecha, añadiéndole márgenes y bordes.
  • Posicionamiento de la imagen y su pie de foto, aplicando bordes.
  • Crear thumbnails.
  • Usar listas de elementos para crear botones “Anterior” – “Siguiente”.
  • Usar listas de elementos para crear pestañas.
  • Crear efecto de letra inicial de párrafo de tamaño superior al resto.
  • Estilo de dos columnas.
  • Estilo de tres columnas.

Floatutorial

Vía / Dzone