Contenido

Ordenación del CSS

19 feb

+ 25

Recuerdo que hace ya mucho tiempo hablamos con Daniel Mota sobre la cantidad de comentarios en nuestros CSS, pero aún podemos ser más meticulosos con estos ficheros. Podemos definir una ordenación básica que usemos para todos los elementos de nuestros CSS.

En Aloe Studio han dividido las propiedades en una serie de secciones (bastánte obvias) que engloban las propiedades ordenadas:

  1. Display y flujo
  2. Posición
  3. Dimensiones
  4. Margenes, Padding, Border,…
  5. Tipografía
  6. Background
  7. Opacidad,Cursores,…

De esta forma obtenemos un listado de propiedades ordenadas como esta:

el {
	display: ;
	visibility: ;
	float: ;
	clear: ;

	position: ;
	top: ;
	right: ;
	bottom: ;
	left: ;
	z-index: ;

	width: ;
	min-width: ;
	max-height-width: ;
	height: ;
	min-height: ;
	max-height: ;
	overflow: ;

	margin: ;
	margin-top: ;
	margin-right: ;
	margin-bottom: ;
	margin-left: ;

	padding: ;
	padding-top: ;
	padding-right: ;
	padding-bottom: ;
	padding-left: ;

	border: ;
	border-top: ;
	border-right: ;
	border-bottom: ;
	border-left: ;

	border-width: ;
	border-top-width: ;
	border-right-width: ;
	border-bottom-width: ;
	border-left-width: ;

	border-style: ;
	border-top-style: ;
	border-right-style: ;
	border-bottom-style: ;
	border-left-style: ;

	border-color: ;
	border-top-color: ;
	border-right-color: ;
	border-bottom-color: ;
	border-left-color: ;

	outline: ;

	list-style: ;

	table-layout: ;
	caption-side: ;
	border-collapse: ;
	border-spacing: ;
	empty-cells: ;

	font: ;
	font-family: ;
	font-size: ;
	line-height: ;
	font-weight: ;
	text-align: ;
	text-indent: ;
	text-transform: ;
	text-decoration: ;
	letter-spacing: ;
	word-spacing: ;
	white-space: ;
	vertical-align: ;
	color: ;

	background: ;
	background-color: ;
	background-image: ;
	background-repeat: ;
	background-position: ;

	opacity: ;

	cursor: ;

	content: ;
	quotes: ;
	}

Al igual que en el artículo, nunca me ha gustado ordenar las propiedades CSS alfabéticamente, no le encontraba lógica a definir antes el border: antes que la posición.

¿Y tu? ¿Como ordenas tus ficheros CSS?

Actualización

Para complementar la lectura, recomiendo echarle un vistazo a las buenas maneras propuestas por Deziner Folio, son bastánte obvias pero importantes de conocer.

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

  • 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.

  • 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.

  • 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

  • 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. :-P

  • 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.

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

  • 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.

  • @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.

  • 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.

  • @monkeydeveloper: Ahí está mi MonoDeveloper Polemizador :D

    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

  • Joder… ¿Ordenar por abc? :D :D

    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. :D

    ¡El CTRL+F es imprescindible!

  • 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!

  • 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!

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

    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… :-P

  • 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 ^^!

  • 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.

  • 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.

  • 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á :D
    Aunque quizá lo hago mal, y hay que hacerlo de otra forma.

  • 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.

  • 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.

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

  • 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

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.