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:
- Display y flujo
- Posición
- Dimensiones
- Margenes, Padding, Border,…
- Tipografía
- Background
- 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.
23 comentarios, 2 referencias
+
#