Css Cascading Style Sheet
Sabemos que cada día nos estamos especializando mas en la mejora de nuestro código, y leo en el blog de Andres(aka Anieto2K), que Aloe Studio, se han puesto a trabajar con el ordenamiento de las propiedades css, agrupadas en secciones para comprenderlas mejor.
- Display y flujo
- Posición
- Dimensiones
- Margenes, Padding, Border,…
- Tipografía
- Background
- Opacidad,Cursores,…
Aunque entra en conflicto otra técnica que supe hace poco y consistía en ordenar todas las propiedades css por orden alfabético, por ejemplo (”border,display,font,z-index,etc“).
Sin bien estas técnicas no lograran que corra mejor nuestro sitio, si nos pueden ayudar a organizar y hasta disminuir nuestro código de una manera muy eficiente, usando alguna de ellas.
Ejemplo de como se vería un código con este tipo de orden.
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: ;
}
Y coincido dice Andres, creo que esta es un mejor opcion que la que comente anteriormente(la de ordenar css alfabeticamente).
Creo que cada dia, iremos programando mejor.
Via | Ordenación del CSS
Related posts:
- [Recursos] Tabla de equivalencias para medir en la web En webadictos nos comentan que ha aparecido una tabla de...
- [Wordpress] Alineando y mejorando las imagenes en el blog Esta creo que es una “noticia”, un poco pasada pero...
- [Javascript] Menú deslizante usando Jquery El seraphinux ultimamente le ha dado por escribir mas que...
- :: Javascript :: Empaquetador de javascript Dean Edwards ha desarrollado un empaquetador para javascript, con el...
- :: Ajax :: Creando tabs con css y javascript Bien después de que pues casi no he escrito nada,...
Related posts brought to you by Yet Another Related Posts Plugin.
Comentar