2010-12-30 15 views
10

Estoy buscando una manera de organizar automáticamente (alfabéticamente o por cualquier otro "estándar" aceptado) todas mis propiedades de CSS. Preferiría un método en Dreamweaver, pero tomaré cualquier cosa en este momento.¿Cuál es la mejor herramienta para organizar o alfabetizar automáticamente tus propiedades de CSS?

Ejemplo:

.div-name { 
padding: 5px; 
width: 300px; 
margin: 10px; 
color: #000; 
} 

se convertiría en:

.div-name { 
color: #000; 
margin: 10px; 
padding: 5px; 
width: 300px; 
} 
+6

eso no es bueno, CSS significa hojas de estilo en cascada, lo que significa que la el orden es importante –

+1

¡Interesante pregunta, nunca escuché de una herramienta así! Conozco un buen formateador de código fuente, pero eso no ordena los elementos. @Eric quiere decir ordenar las propiedades en sí –

+6

Quiere ordenar las propiedades, no las declaraciones del selector. – Sandwich

Respuesta

6

personalmente no resultar útil, pero eso es sólo yo. Uso mi propia jerarquía según la importancia, y la mantengo constante en todas mis hojas de estilo. Cada persona puede tener diferentes preferencias con respecto a esto. Personalmente, me gusta hacer cualquier formato posicional primero, seguido por el diseño parámetros de tamaño, entonces y luego colores y otras propiedades de formato de texto .

Esto me permite identificar y editar rápidamente las propiedades más importantes, las que pueden afectar el diseño son para mí las más importantes.

He aquí un resumen:

1. formato posicional como display, position ... porque esto puede afectar en gran medida el diseño

2. diseño como margin o padding ... igual que el anterior

3. talla como width, height o font-size ... esto tiene la capacidad de afectar el diseño.

4. de color y formato de texto como color, background-color, letter-spacing o text-transform

+2

Claro. Eso puede ser cierto. Pero necesito una herramienta que organice mis propiedades, incluso si se trata de una jerarquía personalizada. Es muy engorroso organizar miles de propiedades a mano. –

+0

Entendido, gracias por la respuesta :) – Sandwich

1

CSSTidy es un ejecutable y script PHP que puede utilizar para realizar cambios de formato como este (así como optimizaciones). De hecho, cleancss.com que se mencionó @rcravens está "basado en" esta herramienta.

18

Pruebe CSScomb. Esta herramienta ordena y agrupa su CSS y tiene complementos para una gran variedad de editores de código. Puedes probarlo online.

+1

Plug-in CSScomb para Gulp.js https://npmjs.org/package/gulp-csscomb –

+0

@KonstantinTarkus Awesome! –

+0

Esta herramienta parece 404 ahora. – Johannes

Cuestiones relacionadas