aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

• Emilio

  @2 febrero 19th, 2009 at 11:04 pm

  En nuestro caso los ordenamos alfabeticamente pues se nos facilita la busqueda de alguna propiedad.

  Responder
• Eloi

  @3 febrero 19th, 2009 at 11:28 pm

  Alfabéticamente, sin duda alguna.

  Motivos? Pereza y facilidad. Me explico, pereza de aprender ese orden, es más, no me lo he acabado ni de mirar así que imagínate.

  Y, ahora, a los tres becarios de turno, o al nuevo desarrollador senior de la empresa, hazle memorizar también la lista cuando, alfabéticamente, no hay que aprender nada y absolutamente todo el mundo lo va a hacer sin ningún problema.

  Responder
• Ade Castro

  @4 febrero 19th, 2009 at 11:36 pm

  En algunos casos, los ordenaba según las propiedades más importantes. Por ejemplo, si las propiedades imprescindibles para el flujo o visualización de ese elemento eran un clear, o float, o display, o un simple width, las ponía en primer lugar, seguidas de las menos importantes y más variables como color, borde, etc., dependiendo del caso.

  Pero me parece mucho mejor el orden que plantean Aloe Studio, y a partir de ahora intentaré aplicarlo siempre.

  Gracias por la idea.

  Responder
• Sra.Css

  @5 febrero 19th, 2009 at 11:40 pm

  Uhmm..me pasa como a Ade y también un poco como lo que comentaban en Stop Design:

  http://stopdesign.com/archive/2005/03/04/staying-organized.html

  Responder
• Demian

  @6 febrero 20th, 2009 at 1:26 am

  Teniendo en cuenta que ni HTML ni CSS son lenguajes que se compilen, mi método es hacerlos con todos los comentarios que crea necesario para que se auto-expliquen y sean muy sencillos de leer y luego, antes de subirlos, comprimirlos con alguna aplicación para que ocupen lo menos posible y se transmitan rápido.

  Personalmente prefiero que lo que se suba ocupe poco y sea modular. El orden en el fichero de producción es irrelevante en mi caso.

  La versión legible siempre la lleno de cantidades ingentes de comentarios. A veces me paso de tanta explicación. 😛

  Responder
• Pablo Veintimilla

  @7 febrero 20th, 2009 at 3:28 am

  En realidad hasta hoy el orden no fue de mi atención únicamente colocaba las propiedades y ya. Pero ahora creo que alfabéticamente es la solucion rápida y práctica. Sin nada que aprender y sobre todo consiguendo su objetivo. Hacer el código organizado y rehusable.

  Responder
• monkeydeveloper

  @8 febrero 20th, 2009 at 8:57 am

  ¿Ordenar las propiedades css?¿Para qué? El coste de ordenación supera los beneficios de tener las propiedades ordenadas.

  Responder
• Hereldar

  @9 febrero 20th, 2009 at 10:54 am

  Yo soy bastante maniático del orden en mis códigos, al principio iba colocando las propiedades sin ningún orden, pero después me cansé y busqué un orden lógico.

  Al final, estoy utilizando algo muy parecido a lo que propone Aloe Studio, pero con algunas diferencias. Por ejemplo, las propiedades «color» y «background» las suelo poner antes de la propiedad «font» y no después. Y hay alguna propiedad que aún la lío a veces porque la utilizo poco y aún no he establecido su lugar.

  En respuesta a monkeydeveloper, te diré que en mi caso los beneficios son muchos: por motivos de trabajo tengo que aparcar la programación de vez en cuando, a veces por meses, y no veas la diferencia de volver a un código ordenado y comentado a un caos informe.

  Responder
• monkeydeveloper

  @10 febrero 20th, 2009 at 11:26 am

  @Hereldar: No quiero polemizar demasiado, pero yo no creo que hacer CSS sea programar y creo que aunque tener las propiedades ordenadas tendrá su beneficio, el coste de ordenarlas es mucho mayor. ¿Aprender de memoria la ordenación de la que habla Andrés en su post y luego aplicarla? muy costoso, ¿ordenación alfabética? menudo estrés, me he de saber el abecedario primero. ¿hacer que todo un equipo de gente lo sepa? ya te digo.. ¿y los que entran nuevos?

  Lo que quiero decir es que con un CTRL + F hasta el elemento y luego otro CTRL + F hasta la propiedad (si no la ves a simple vista, que yo creo que pasa la mayoría de las veces) irás más rápido, o al menos yo creo que voy. Igual es que aplico pocas propiedades a cada elemento… todo puede ser.

  IMHO hacer este tipo de cosas es innecesario. Aunque cada uno tiene sus manías.

  Responder
• Alfonso

  @11 febrero 20th, 2009 at 11:39 am

  Primero separo las propiedades en ficheros, teniéndo la hoja de estilos principal que importa a las otras: colors.css (border, background, color…), fonts.css (font, line-height…), spaces.css (display, margin, padding, position, z-order…), forms.css (estilos exclusivamente para formularios), layout.css (estilos exclusivos del layout del sitio), header.css (lo mismo pero para la cabecera).

  Dentro de cada fichero ordeno por especificidad: primero lo más genérico y luego lo más específico (*, .class, div.class, #id, div#id).

  Y luego dentro de cada regla ordeno las propiedades alfabéticamente.

  Lo que parece tan lioso es en la práctica muy rápido de mantener y depurar ya que el lugar en el que hay que escribir (y luego encontrar) una propiedad se hace casi de forma automática.

  Responder
• aNieto2k

  @12 febrero 20th, 2009 at 11:51 am

  @monkeydeveloper: Ahí está mi MonoDeveloper Polemizador 😀

  Yo también creo que es más costoso ambos métodos, pero también estoy de acuerdo en que debe de haber algún orden. Quizás no tan extremos como el propuesto por Aloe Studio, pero si que ha de haber alguno.

  El propuesto en este post, obliga a que el maquetador tenga que conocer que son las propiedades de flujo, las de posición, las de coloreado, …. y después ordenarlas en estos grandes grupos.

  No creo que llevarlo más allá sea productivo.
  @Alfonso: Hombre, son gustos, pero tener tantos ficheros abiertos a la vez, más los HTML, los PHP, los JS, … debe de ser un caos (en mi caso lo sería :D).

  Lo de la especificidad me ha gustado, de más genérico a menos.

  Saludos

  Responder
• josepzin

  @13 febrero 20th, 2009 at 11:52 am

  Joder… ¿Ordenar por abc? 😀 😀

  Yo primero pongo los resets, luego en otro bloque los css que definen el header, body, footer. Luego debajo de cada uno de ellos voy poniendo los elementos que estarán en cada uno de esos bloques.

  Y luego cuando todo es un caos, voy al final y agrego propiedades según necesito. 😀

  ¡El CTRL+F es imprescindible!

  Responder
• Nosolomusica

  @14 febrero 20th, 2009 at 12:24 pm

  Uy, esto sí que es nuevo.

  Yo sí tengo la manía de ordenar, no los atributos (que los voy añadiendo con CSSEdit según lo veo), pero sí las propiedades según su orden de aparición en la página. Es decir, la primera propiedad sería body y la última divo#footer, así las localizo rápidamente cuando abro el fichero (¿aún se sigue diciendo fichero? xD).

  Pero ordenar los atributos… ¡Qué locura!

  Responder
• eln0ta

  @15 febrero 20th, 2009 at 12:33 pm

  Yo de forma propia sigo un orden muy parecido al que muestra el colega, pero le corregiría el orden background y color, poniéndolos al revés. La razón es que es el color de texto el que se ve sobre el color de fondo, con lo que primero ha de definirse el fondo.

  Si sois ordenados en el trabajo, eso se transmite a la hora de hacer cualquier cosa, incluido el escribir CSS. No se trata de aprender métodos ahora sino de ser coherente siempre con todo lo que se hace. Si no habéis ordenado nunca las propiedades es probable que tampoco ordenéis los selectores correctamente etc.

  Y vamos, si alguna vez habéis visto un fichero CSS de algún sitio medianamente bueno, todos tienen perfectamente segmentado el tema, con sus selectores al mínimo, sus comentarios adecuados y sus propiedades como Dios manda. Digo yo que algo bueno se nos debería pegar de la gente a la que respetamos en nuestro trabajo, ¿no?

  Un saludo y happy coding!

  Responder
• Demian

  @16 febrero 20th, 2009 at 4:21 pm

  Je, después de leer comentarios he revisado mis CSS para ver si, inconscientemente, tenían algún orden y si, lo tienen. 😛

  Por supuesto, si hablamos en general los elementos vienen primero los que se redefinen (body, h1, etc.) comenzando por los contenedores más grandes a los más pequeños y los que aparecen antes (header) antes de los que aparecen después (footer), luego los elementos por ID siguiendo el orden de aparición y luego los elementos en línea, también en orden de aparición.

  Y las propiedades creo que las vengo poniendo tratando de adivinar un poco como lo interpreta el motor gráfico del navegador, que visto lo que pone Andrés arriba se parece mucho, aunque yo suelo poner primero lo que atañe al fondo y luego lo del frente, porque me da la impresión que así lo dibujan los navegadores.

  Digamos que en líneas generales suelo intentar que el navegador tarde lo menos posible en interpretar la hoja de estilos. Esto es lo que suelo hacer cuando no comprimo las hojas de estilo, y lo hago de manera un poco intuitiva (no siempre sigo un orden estrícto).

  Creo que soy más maniatico de lo que pensaba… 😛

  Responder
• Covi

  @17 febrero 20th, 2009 at 5:22 pm

  Juas!, como @Demian, no sé por qué, aunque imagino que leería algo en mi biblia: Web Standars de Zeldman, yo los vengo organizando algo así desde que empecé.
  Aunque seguramente no sea la forma más lógica ya que es costumbre y entonces, lo normal, tampoco tenía demasiada idea.

  Solo sé que las dimensiones, si las tienen, es lo primero,
  luego va la visibilidad y posicionamiento
  y a partir de aquí, inconscientemente, escribo según la importancia en el elemento -que suele ser lo normal-.
  Eso sí, los estilos de fuente y los fondos, siempre que no sea como digo algo básico para el elemento, van al final.

  El problema es caer en los frameworks CSS y en la clasitis… que te hace olvidar estos temas ^^!

  Responder
• Covi

  @18 febrero 20th, 2009 at 5:25 pm

  Ah… y también depende de las reglas para forzar a Explorer <=6 en relación a la especificidad.
  Así que… al parecer, parece que es la opinión de la mayoría, cualquier ordenación es difícil de mantener porque siempre existen excepciones para maquetar ese elemento especialmente.

  Responder
• Sandro

  @19 febrero 20th, 2009 at 9:55 pm

  Pues no tengo la costumbre de ordenar, pero mas o menos creo q seria display, medidas, margenes y padding, border. Despues van totalmente desordenados los atributos adicionales q voy necesitando modificar. Lo que si hago es separar mis hojas de estilos por divs, classes y tags.

  Saludos.

  Responder
• Quitz

  @20 febrero 21st, 2009 at 12:16 pm

  Lo más normal es poner solo lo que haga falta. Si, por ejemplo, no quieres que un texto esté subrayado o en negrita, basta con no poner ‘font-weight’… y ya está 😀
  Aunque quizá lo hago mal, y hay que hacerlo de otra forma.

  Responder
• Angelfire

  @21 febrero 21st, 2009 at 3:26 pm

  Igual, sea como sea el orden la las propiedades igual se van a mostrar, aunque ya si estamos trabajando en proyectos grandes creo que una buena opción seria en orden alfabetico.

  Responder
• Sra.Css

  @22 febrero 21st, 2009 at 8:18 pm

  Es una cuestión de pensar en los demás. Cuando tus proyectos deben tocarlos otras personas, creo que agradecerán que todo este claro y limpio. Y no cuesta tanto, tan sólo seguir un método.

  Responder
• antonio

  @23 febrero 23rd, 2009 at 3:20 pm

  La verdad es que yo creo que lo mejor es ordenador alfabeticamente, de esta manera tienes que aprendertelo de memoria.

  Responder
• oliverastro

  @24 febrero 27th, 2009 at 2:05 pm

  mi orden es por orden alfabético, además que indento los elementos anidados específicos, por ejemplo:

  #wrap {
  estilos
  }
  #wrap elemento_anidado {
  estilos
  }

  luego al subirse lo comprimo para bajar el peso y hacerlo más rápido

  PD: algo parecido vi en csslab.cl

  Responder

Comentar

↑

#