Para no marearnos la cabeza y hacer nuestro código más legible, lo mejor sería que ordenemos nuestro código de acuerdo a varios criterios. Ya os explicamos anteriormente cómo ordenar los archivos CSS en función del tamaño, número de ficheros, etc. Esta vez lo haremos en función de las propiedades.
En Aloe Studio han dividido las propiedades en distintas secciones. Se pueden resumir así:
- Display y flujo
- Posición
- Dimensiones
- Margenes, Padding, Border,…
- Tipografía
- Background
- Opacidad,Cursores,…
Así podremos tener nuestro código CSS ordenado de acuerdo a las propiedades:
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: ;
}
También se pueden ordenar las propiedades alfabéticamente, algo desde mi punto de vista algo ilógico, ya que, ¿Para qué queremos tener por ejemplo, border antes que header?
Esta es una forma de ordenar tu hoja de estilos, pero, y tú ¿Cómo ordenas tus CSS?
Si lo deseas puedes complementar más leyendo este artículo de Deziner Folio.
Vía | Anieto2k
