Buena herramienta que nos devuelve la estructura CSS básica que deberíamos usar para darle estilos a un HTML. Aunque no todos los estilos van a sernos necesarios, si es útil para obtener la estructura inicial y así poder trabajar con algo inicialmente.
Indicando un HTML obtendremos un CSS (vacío) como el siguiente:
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.
Curioso y gratificante ver que no solo los nosotros sufrimos al IE, sino que los propios que trabajan en Microsoft lo sufren. En una de sus CSS se puede apreciar como una clase tiene el nombre StupidIEMarginHack y otra el nombre StupidIEWidthHack. Esto me recuerda la costumbre que solemos tener de poner trazas con insultos, palabras mal sonantes, … debido a la desesperación que sufrimos al desarrollar y que luego se nos olvida quitar.
Vía / Digg
Una lista bastante interesante de aplicaciones que nos pueden ayudar a realizar nuestros estilos. Organizado en diferentes categorÃas, nos podemos encontrar aquellas centradas en el tipo de letra, formularios, layouts, navegación, optimizadores y otras varias que no se pueden reunir en una categorÃa completa.
Entre la lista destacarÃa las siguientes:
Em Calculator: para pasar tamaños de fuentes en pixels a em.
JotForm: para crear formularios de forma online, arrastrando objetos y colocándolos en el sitio que deseemos.
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:
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.
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.