Yo nunca entendí la ventaja de ordenar el CSS alfabéticamente. Yo lo ordeno por orden de importancia, con pequeñas agrupaciones lógicas. ¿Qué sentido tiene tener la altura en las primeras lineas y el ancho al final?
Cuando alguien pregunta por ordenar el código, tampoco entiendo en qué cabeza cabe poner las clases con mayúsculas.
Yo, como digo, ordeno los atributos por importancia y agrupación lógica. Así los atributos más importantes están siempre en este orden en las primeras lineas:
- position
- top
- right
- bottom
- left
- transform (sobre todo va aquí por si uso
translate() - display (obviamente aquí pudiera ir float ya que float cambia el display del elemento)
- width
- height
- margin
- padding
El resto de posiciones dan un poco más igual. Ya sea porque son más raras de usar o menos importantes.
Lo demás, como digo, es menos interesante, el color que tenga, el fondo, el borde o cómo se gestiona el espacio en blanco…
Para el tema del
minimizado no uso nada, ya que como uso un pre-procesador (SASS) viene casi implícito. Que por cierto, el código de arriba según yo quedaría así (en SASS):
Código CSS:
Ver original#circulo
background-color: blue
border-color: goldenrod
border-radius: 50%
#cuadrado
background-color: green
border-color: red
#triangulo
background: linear-gradient(45deg, darkred 33%, transparent 0)
repeat: no-repeat
size: 200px 200px
border-color: pink
.circulo, .cuadrado, .triangulo
float: left
width: 200px
height: 200px
margin: 5px 10px
padding: 3px 6px
border: 1px solid
Que una vez compilado se
minifica y además cambia los nombres de los colores por… colores. Y finalmente con un post-procesador (autoprefixer) se le añaden los prefijos propietarios que se hayan indicado para soportar tal o cual navegador del año de la reconquista.