Cuando digo más limpio aparte de tener menos código me refiero a que sea más fácil de leer, aquí os dejo algunos trucos:
Agrupar propiedades
en vez de usar padding-top:10;padding-right:20;padding-bottom:30;padding-left:40; usar padding: 10px 20px 30px 40px;
Separar hacks en un css separado
por si hay que aplicar css especiales para internet explorer u otro navegador.
Usa el tabulador para ordenar el código
Para indicar cuando una clase o evento esta dentro de otra clase, por ejemplo:
A{text-decoration:none}
A:HOVER{text-decoration:underline}
Estructura y comenta el código
1- Resets
2- Elementos básicos
3- Clases genéricas
4- Estructura principal
5- Cabecera
6- Contenido
7- Pie de página
Yo delego toda la responsabilidad en Stylus. Mis .styl están organizados por:
- etiquetas
- ids
- classes
Siempre en orden alfabético.
Los import al principio, las variables despues, luegolo demás
En el 99 de los proyectos uso LESS o SASS según convenga. Así que tengo algunos extras de organización como
mixins.
anidamiento de elementos.
includes e imports.
Por otro lado en cada clase siempre coloco las propiedades por este orden.
visibilidad
flujo
dimensiones
decoración
transiciones
Personalmente prefiero tener el css lo más ajustado posible para mejorar el rendimiento y después utilizar un prettifier para hacerlo legible en caso de que necesite trabajar con él.
Aunque la verdad es que hasta ahora el mejor "prettifier" que eh encontrado es ver la línea concreta del CSS en acción con firebug y no me suele hacer falta nada más.
aquí otra técnica denominada sintaxis BEM
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
en la que se trata de usar un patrón en los nombres de las clases:
.block representa un nivel superior
.block__element indica que es descendiente de .block
.block--modifier representa un distinto estado o versión de .block
Agrupar propiedades
en vez de usar padding-top:10;padding-right:20;padding-bottom:30;padding-left:40; usar padding: 10px 20px 30px 40px;
Separar hacks en un css separado
por si hay que aplicar css especiales para internet explorer u otro navegador.
Usa el tabulador para ordenar el código
Para indicar cuando una clase o evento esta dentro de otra clase, por ejemplo:
A{text-decoration:none}
A:HOVER{text-decoration:underline}
Estructura y comenta el código
1- Resets
2- Elementos básicos
3- Clases genéricas
4- Estructura principal
5- Cabecera
6- Contenido
7- Pie de página
¿Conocéis más trucos para tener un css limpio?
10/06/2014 11:35
- etiquetas
- ids
- classes
Siempre en orden alfabético.
Los import al principio, las variables despues, luegolo demás
24/03/2015 15:00
mixins.
anidamiento de elementos.
includes e imports.
Por otro lado en cada clase siempre coloco las propiedades por este orden.
visibilidad
flujo
dimensiones
decoración
transiciones
05/04/2015 22:20
27/11/2013 16:58
Aunque la verdad es que hasta ahora el mejor "prettifier" que eh encontrado es ver la línea concreta del CSS en acción con firebug y no me suele hacer falta nada más.
27/11/2013 17:38
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
en la que se trata de usar un patrón en los nombres de las clases:
.block representa un nivel superior
.block__element indica que es descendiente de .block
.block--modifier representa un distinto estado o versión de .block
24/03/2015 16:51
class="circle card small"
con las tres clases separadas en lugar de una sola tipo "circle-card-small". Así puedes reutilizar muchas propiedades, haciendo por ejemplo:
class="circle card large"
class="card large"
class="card small round-corners"
edit: aqui habia puesto etiquetas html y me las había matado... jajaja
30/03/2015 15:54
BEM
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/