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

|

Selectores CSS3 que soportará Opera

ByLuis

http://sentidoweb.com/img/2007/01/opera_logo-thumb.png

En cuestión de CSS Opera suele ir por delante del resto navegadores. En el blog de uno de sus desarrolladores nos adelantan algunos de los selectores, en este caso pseudo-clases, que soportarán sus futuras versiones:

  • :root: selecciona el elemento padre del documento, que normalmente será el <html>
  • :not(s): representa a todos los elementos del documento excepto aquellos que NO coincidan con el selector "s" (ej.: not(#menu) ).
  • :nth-child(n): representa al hijo n de un elemento. Ej.: div:nth-child(2) seleccinará todos los elementos div que sean segundo hijo de cualquier elemento (gracias Federico).
  • :nth-of-type(n): representa al hermano n de un elemento. Ej.: div:nth-of-type(2) seleccinará el segundo elemento del div especificado.
  • :first-of-type: representa al primer elemento que es el primer elemento de su tipo dentro de la lista de hijos del elemento padre.
  • :target

Estos otros elementos están implementados en el núcleo de Opera pero por diversas razones no están aun habilitados

  • :empty : representa a un elemento que no tiene ningún tipo de hijo.
  • :nth-last-child(n): representa a un elemento que tiene n hermanos después de él.
  • :nth-last-of-type(): representa a un elemento que tiene n hermantos del mismo tipo.
  • :last-child: represetna al ultimo hijo de un elemento.
  • :last-of-type: representa al último hermano de su tipo. Sería lo mismo que :nth-last-of-type(1).
  • :only-child: representa a un elemento cuyo padre no tiene ningún otro elemento hijo.
  • :only-of-type: representa a un elemento cuyo padre no tiene otro elemento hijo del mismo tipo.

Vía / Slightly Ajar

|

Mastering the 960 Grid System

ByLuis

We’re already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. If you’ve only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, you’ll be able …

Post original

Guía de estilos CSS para e-mails

ByLuis

Extensa guía de propiedades CSS que permiten los clientes de correo a la hora de presentar los emails en formato HTML.
El trabajo que han realizado es impresionante y va siendo actualizado cada cierto tiempo. Nos muestra las propiedades CSS y si se ven el los clientes de correo de escritorio o los clientes web.
emailcss.png
CSS support in email clients
Vía / WebAppers

|

Laboratorio: mostrar que thumbnails has visitado

ByLuis

Una de las cosas que más me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.

Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaño original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.

imagenes-visitadas.png

Para hacerlo es sencillo, creas una capa con un tamaño específico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que será el thumbnail en sí.

Dentro de la capa incluyes un enlace que se mostrará como un bloque (display: block) y que no mostrará nada, bueno, en este caso si mostrará un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verá, esto lo hacemos así para que los dispositivos que no admitan estilos puedan ver algo.

Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.

.contenedor-imagen {
width: 150px;
height: 85px;
}
.contenedor-imagen a {
text-indent: -100000px;
display: block;
width: 150px;
height: 85px;
border: 2px solid #FFFFFF;
}
.contenedor-imagen a:hover {
border: 2px solid #FF0000;
}
.contenedor-imagen a:visited {
background: url(visitada.gif);
}
<div class="contenedor-imagen" style="background: url(miniatura.png)">
<a href="http://sentidoweb.com?ejemplo1">Sentido Web</a>
</div>

Ejemplo

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