IceBeat

No hemos podido encontrar el articulo pero a todos nos suena, al final hemos llegado en los comentarios a un acuerdo y suponemos que la mejor forma de organizar las propiedades CSS es ir desde afuera para adentro.

Comportamiento

• display
• overflow
• clear

Posición

• position
• float
• top

Tamaño

• height
• width

Margenes y bordes

• margin
• border
• padding

Texto

• font
• text
• line-height

Fondos y colores

• background
• color

No pasa nada si no utilizas ningún orden pero es algo que se agradece cuando el volumen de código aumenta.

Ando buscando un articulo que ley hace tiempo sobre el orden de las propiedades en las hojas de estilos, por mucho que pregunto al señor google y a los expertos no doy con el enlace.

Trata de saber el orden adecuado para escribir CSS, no el orden de la hoja de estilos, sino saber si primero ha de ir los margins y padddings, luego las fuentes, los colores, etc..

Os suena?

Este tip puede ser una tontería pero es algo que a simple vista no se tiene en cuenta.

Cuando usamos position absolute sabemos que la capa se mueve con las propiedades top,left, right y bottom, pero si la caja contenedora tiene position relative el elemento se mueve en relación al tamaño de la caja y no de la página web.

Lo vemos por ejemplo para redondear capas o añadir sombras.

<div>
    <h3>Hola!</h3>
</div>

div {
position:relative;
}

div h3 {
position:absolute;
top:0;
left:0;
}

La diferencia de usar position relative la puedes ver en este pequeño gráfico.

Leo en ajaxian que ha nacido una librería llamada Cruiser. Utiliza el mismo concepto que cssing, usar la sintaxis CSS para escribir javascript.

Yo ando terminando mi script, el cual tiene algunas similitudes (lógico) y otras un poco más potentes.

Me alegra saber que hay personas que piensan en que es necesario implementar estas características.

Me gusta la idea de utilizar un tag link para referenciar al archivo, pero no me convence tener que cargarlo y parsearlo cada vez que se refresque la página.

He vuelto a retomar CSSing. el proyecto es demasiado grande y me es imposible cumplir mis expectativas, CSSing consiste en generar CSS y Javascript solamente escribiendo código CSS.

Como últimamente esta de moda Javascript estoy adaptando el proyecto, Iván me ayudo en aclarar algunas partes (para que complicarse la vida creando un semilenguaje cuando puedes usar la sintaxis de CSS) y ahora en vez de generar CSS solo se podrá usar para crear Javascript.

Estoy usando Mootools para generar la salida, pero se podrán usar otras librerías (jQuery, Prototype):

//selector:pseudoclass
a#form:mouseover {
    color: #000;
    background-color: effect(#fff);
}

//macro del selector, para no repetir
$:click {    
    send: #form_option;
}

//código generado por el parser
$$('a#form').each(function(el) {
    el.addEvent('mouseover', function(e){
        e.setStyles('color: #000;');
        e.effect('background-color').start(#fff);
    });
    el.addEvent('click', function(e){
        $$('#form_option').send();
    });
});

Obviamente esto es solo un boceto, así que estoy abierto a sugerencias :P.