Me suena haber visto algo en uno smashing magazine pero no te puedo asegurar... échale un ojo a ver si tienes suerte.

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

:)

Tengo "CSS: the definitive guide" y me suena haber leído algo de eso al principio (cuando habla de la cascada, obviamente). Pero creo que el problema deviene al utilizar navegadores antiguos.

En la Smashing también hay uno realmente bueno que habla de el orden en que se aplican las ordenes, pero no por tipo de propiedad sino por especificidad en las declaraciones.

También tengo la idea de haber leído algo, pero estoy casi seguro de que no hay un orden determinado para hacerlo. De hecho hay un artículo en Samshing Magazine que reúne técnicas para una buena escritura de CSS, y algunos los ordenan alfabéticamente, por ejemplo. Lo que sí importa según tengo entendido es el orden de los selectores y el tipo de selector. Lo que me da curiosidad es esa coincidencia en los editores visuales de hojas de estilo de tener cierto orden en la interfase: fuentes, fondos, padding, margin, float, etc... La dejo picando y seguiré investigando. Gracias por picarme con la curiosidad.

Pues yo tengo mi método que no sé si será el mejor o no, pero me gusta. Primero declaro las propiedades que definen tamaños y posiciones de bloque, luego tipografía y al final colores y bordes ¿por qué? porque lo que más guerra suele dar es lo primero y así de un vistazo veo qué está afectando a la colocación y dimensiones de los elementos y al final dejo lo menos "importante", colorines y tipografía. Mi orden viene a ser algo así: position, float, left, top, width, height, display, overflow, font, background y border

Como lo hago yo es

1) como se va a comportar ( display ) ej block, linea

2) su tamaño height y width :

3) su posicionamiento, aqui entraria position y float

4) sigo el modelo de cajas, primero el margen segundo el border y tercero el padding

y a partir de aqui ya si que voy un poco descontrolado con lo que queda, pero intento poner

1) la alineacion de ese texto

2) la fuente;

3) el color

4) el background

sigo esto para separar un poco como se va a colocar y despues como se va a ver

saludos

Los artículos smashingmagazine son geniales, ambos los he leído por encima y ayudan un montón.

@RUDE en el primer enlace que es donde hablan de ponerlos alfabéticamente.

A mi la idea de ponerlos alfabéticamente no me gusta, prefiero colocarlo por comportamientos y características aunque todo es probar.

Veo que tanto Jorge como noth coinciden en colocar primero los comportamientos de la caja y por ultimo aunque cada uno al azar sobre su aspecto.

Trabajare sobre los dos a ver cual me viene mejor.

He estado buscando y no encontraba nada, ahora todo esta mas claros, gracias a todos :).

El orden lógico seria de afuera para adentro... margenes, tamaño, estilo, alineacion del texto, texto... siguiente caja (div)... no?

@ZydRick Síp, yo uso esa forma

Hay varias técnicas, y cada uno debería usar la que le vaya mejor, porque considero que muchos programadores no optan por la opción con más legibilidad y que sea entendible por otros.

A base de muchos proyectos vas aprendiendo cosas, como que input[type=text] no aplicará a IE6, pero quizá no es tan grave que los usuarios de IE6 no vean estos estilos, o que no hace falta #content #main para solventar especificidad en IE, mejor jugarlo de otra forma. O intentar no usar !important a menos que sea totalmente necesario.

Otra cosa importante, es que separar los estilos en muchos archivos no es tan óptimo, a veces es complicado separar css por páginas, mejor usar, forms.css, base.css, ie.css y se acabó, en fin, todo un mundo...

Gracias por el post ;)

@frenadoll en este mundo en el que se quiere estandarizar todo sería bueno tener un forma, programando "Alone" estaría perfectamente de acuerdo contigo, pero si el trabajo es en grupo necesitas saber donde buscar y no recorrer todo el css para encontrar la propiedad, en cuanto a lo de separar en diferentes archivos, yo uso base, typography, forms, grid y por ultimo y no menos importante "iesucks.css"

Yo tuve la misma pregunta que tu hace tiempo y no encontré nada mas que alfabéticamente, yo los he empezado a ordenar hace poco, con ayuda de algunas cosas que he visto en mi actual trabajo, yo pongo:

display, postion, float

Yo tuve la misma pregunta que tu hace tiempo y no encontré nada mas que alfabéticamente, yo los he empezado a ordenar hace poco, con ayuda de algunas cosas que he visto en mi actual trabajo, yo pongo:

display, postion, float - mas importantes de ver para mi margin, border, padding - sigo también el modelo de cajas width, height background, color font, text-....

P.D.: He visto que otras personas que usan un orden parecido ,creo que no seria mala idea discutir un orden entre todos para, optimizar la localización de cada propiedad... yo la dejo caer P.D: Publico 2 veces por que se me trunco el anterior mensaje, supongo, que por el sistema de seguridad...

@boton Curioso, es lo que hace la w3c XD!

yo también declaro de afuera hacia adentro, creo que es más que nada por comodidad, primero ubícas bién las cajas(a veces poniedo bordes o bg--color aleatorios solo para distingir bién las cajas) luego las decoras.

lei

He empezado a aplicar los estilos como comentáis, es mejor ir acompañando al modelo de caja y luego terminar con las propiedades que solo afectan al diseño como fondos y colores.

Luego publico mi forma aunque es muy parecida a la que usáis (esta basada en ellas).

display overflow clear

position float

height width

margin border padding

font text

background color

:)

Yo también recuerdo haber leído ese post, pero parece que no me lo guardé, acabo de mirar el del.icio.us y nada.

Imagino que en parte dije: ¡ey, que coño más dará! :)

@Nordic jeje, bueno la importancia es intentar tener un orden en toda la hoja de estilo, ya que te pones te pones :P.

Uy!!! cambio eso de ley por leí.... ;-)

19 eso es cierto. Yo no utilizo ningún orden consciente, aunque sí tengo mis normas internas para saber encontrar las cosas. Por ejemplo:

• Ir de lo genérico a lo concreto. Primero defino el aspecto de los elementos comunes, luego las cajas contenedoras, y finalmente los detalles de los bloques, normalmente en el orden en que se presentan en el navegador.
• Todo muy muy comentado. Con grandes líneas para las grandes secciones/páginas, y ya otros más pequeños para los detalles o bloques sueltos.
• Siempre la misma nomenclatura. Utilizo nombres similares, y escritos igual. Nada de 'main-content', 'main_content' y 'mainContent'.
• Ah, normalmente uso el último de esos.
• y... si, dejar la hoja de estilos lo más limpia posible, y utilizar una aparte para los necesarios apaños de IE6. Ya sabes, la basura aparte. :-P

Vaya, el comentario salió fatalmente formateado. :(

@Nordic esto me recuerda que tengo que actualizar jeje.

Algunos de esos puntos también los hago yo, sobre todo hoja para IE e ir de lo genérico a lo concreto.

pues yo lo de dividir los css, en hojas distintas, lo hago de la siguiente forma, trabajo maquetando y programando para una empresa web, con webs bastante grandes en secciones.

Lo que propenis, una hoja para texto otra para formularios y así, lo probé pero le veo un error, pierdes la consciencia de la herencia, no sabes que puedes estar heredando, porque sencillamente está en otra hoja.

Yo lo hago así

Tengo un general.css, donde coloc: 1) mis estilos reset que suelo utilizar 2) la estructura de la web , header, content, pie etc.. 3) algunos estilos que casi siempre se usa, nav-utiidades, nav-menu, enlaces, y h1

esto así al empezar

después miro el proyecto, imaginemos que es un concesionario tendremos, varias secciones, marcas, modelos, venta automoviles

pues creo una css solo para cada seccion

de esta forma en el head, si estoy viendo la seccion de marcas, solo cargaría el general.css y marcas.css

no necesito saturar la carga, con un formulario de contacto que no estoy viendo, y así lo tengo bastante más ordenado y algo en marcas no sale bien, voy directo.

y dentro de marcas.css

si que tengo /*** estructura ***/

/*** enlaces ***/

/*** formularios ***/

/*** Seccion marcas internacionales ***/ etc ...

saludos

@noth Yo tengo algo parecido.

http://icebeat.bitacoras.com/post/224/organizar-un-css

No se si es el que estas buscando pero me pasaron una pagina muy interesante acerca de CSS en HTML DOG: http://www.htmldog.com/reference/cssproperties/

Si no es lo que buscabas por lo menos espero que sea util. Saludos y muy buena web!

@Alkaucil Muchas gracias tio, esta genial la pagina, algo asi buscaba para crear un bundle para textmate.