CSS - Reducir css

 
Vista:

Reducir css

Publicado por Vektor (2 intervenciones) el 26/09/2019 19:06:50
Muy buenas! Tengo un código en css que me funciona, pero no se si es posible reducirlo de 1 a infinito sin tener que escribir tantas líneas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
article.blog-entry {opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;}
 
article.blog-entry:nth-child(1) {
  animation-delay: 0.1s;
}
 
article.blog-entry:nth-child(2) {
  animation-delay: 0.2s;
}
 
article.blog-entry:nth-child(3) {
  animation-delay: 0.3s;
}
 
article.blog-entry:nth-child(4) {
  animation-delay: 0.4s;
}
 
article.blog-entry:nth-child(5) {
  animation-delay: 0.5s;
}
 
article.blog-entry:nth-child(6) {
  animation-delay: 0.6s;
}
 
article.blog-entry:nth-child(7) {
  animation-delay: 0.7s;
}
 
article.blog-entry:nth-child(8) {
  animation-delay: 0.8s;
}
 
article.blog-entry:nth-child(9) {
  animation-delay: 0.9s;
}
 
article.blog-entry:nth-child(10) {
  animation-delay: 1s;
}
 
article.blog-entry:nth-child(11) {
  animation-delay: 1.1s;
}
 
article.blog-entry:nth-child(12) {
  animation-delay: 1.2s;
}
 
article.blog-entry:nth-child(13) {
  animation-delay: 1.3s;
}
 
article.blog-entry:nth-child(14) {
  animation-delay: 1.4s;
}
 
article.blog-entry:nth-child(15) {
  animation-delay: 1.5s;
}
 
article.blog-entry:nth-child(16) {
  animation-delay: 1.6s;
}
 
article.blog-entry:nth-child(17) {
  animation-delay: 1.7s;
}
 
article.blog-entry:nth-child(18) {
  animation-delay: 1.8s;
}
 
article.blog-entry:nth-child(19) {
  animation-delay: 1.9s;
}
 
article.blog-entry:nth-child(20) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(21) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(22) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(23) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(24) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(25) {
  animation-delay: 2s;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Reducir css

Publicado por juan jose (57 intervenciones) el 26/09/2019 22:59:46
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
article.blog-entry{opacity:0;animation-name:fadeIn;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards;}
article.blog-entry:nth-child(1){animation-delay:0.1s;}
article.blog-entry:nth-child(2){animation-delay:0.2s;}
article.blog-entry:nth-child(3){animation-delay:0.3s;}
article.blog-entry:nth-child(4){animation-delay:0.4s;}
article.blog-entry:nth-child(5){animation-delay:0.5s;}
article.blog-entry:nth-child(6){animation-delay:0.6s;}
article.blog-entry:nth-child(7){animation-delay:0.7s;}
article.blog-entry:nth-child(8){animation-delay:0.8s;}
article.blog-entry:nth-child(9){animation-delay:0.9s;}
article.blog-entry:nth-child(10){animation-delay:1s;}
article.blog-entry:nth-child(11){animation-delay:1.1s;}
article.blog-entry:nth-child(12){animation-delay:1.2s;}
article.blog-entry:nth-child(13){animation-delay:1.3s;}
article.blog-entry:nth-child(14){animation-delay:1.4s;}
article.blog-entry:nth-child(15){animation-delay:1.5s;}
article.blog-entry:nth-child(16){animation-delay:1.6s;}
article.blog-entry:nth-child(17){animation-delay:1.7s;}
article.blog-entry:nth-child(18){animation-delay:1.8s;}
article.blog-entry:nth-child(19){animation-delay:1.9s;}
article.blog-entry:nth-child(20),article.blog-entry:nth-child(21),article.blog-entry:nth-child(22),article.blog-entry:nth-child(23),article.blog-entry:nth-child(24),article.blog-entry:nth-child(25){animation-delay:2s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

esta es una opción el unico codigo repetido es el animation-delay:2s que lo puedes juntar asi, este te lo pongo asi para que sea algo legible

cosas que se podrian reducir. no se si esas animaciones solo son para todos los blog-entry igual te podrias ahorrar el article


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.blog-entry{opacity:0;animation-name:fadeIn;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards;}
.blog-entry:nth-child(1){animation-delay:0.1s;}
.blog-entry:nth-child(2){animation-delay:0.2s;}
.blog-entry:nth-child(3){animation-delay:0.3s;}
.blog-entry:nth-child(4){animation-delay:0.4s;}
.blog-entry:nth-child(5){animation-delay:0.5s;}
.blog-entry:nth-child(6){animation-delay:0.6s;}
.blog-entry:nth-child(7){animation-delay:0.7s;}
.blog-entry:nth-child(8){animation-delay:0.8s;}
.blog-entry:nth-child(9){animation-delay:0.9s;}
.blog-entry:nth-child(10){animation-delay:1s;}
.blog-entry:nth-child(11){animation-delay:1.1s;}
.blog-entry:nth-child(12){animation-delay:1.2s;}
.blog-entry:nth-child(13){animation-delay:1.3s;}
.blog-entry:nth-child(14){animation-delay:1.4s;}
.blog-entry:nth-child(15){animation-delay:1.5s;}
.blog-entry:nth-child(16){animation-delay:1.6s;}
.blog-entry:nth-child(17){animation-delay:1.7s;}
.blog-entry:nth-child(18){animation-delay:1.8s;}
.blog-entry:nth-child(19){animation-delay:1.9s;}
.blog-entry:nth-child(20),.blog-entry:nth-child(21),.blog-entry:nth-child(22),.blog-entry:nth-child(23),.blog-entry:nth-child(24),.blog-entry:nth-child(25){animation-delay:2s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

Que aun lo quieres reducir mas, pues a una linea

1
.blog-entry{opacity:0;animation-name:fadeIn;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards;}.blog-entry:nth-child(1){animation-delay:0.1s;}.blog-entry:nth-child(2){animation-delay:0.2s;}.blog-entry:nth-child(3){animation-delay:0.3s;}.blog-entry:nth-child(4){animation-delay:0.4s;}.blog-entry:nth-child(5){animation-delay:0.5s;}.blog-entry:nth-child(6){animation-delay:0.6s;}.blog-entry:nth-child(7){animation-delay:0.7s;}.blog-entry:nth-child(8){animation-delay:0.8s;}.blog-entry:nth-child(9){animation-delay:0.9s;}.blog-entry:nth-child(10){animation-delay:1s;}.blog-entry:nth-child(11){animation-delay:1.1s;}.blog-entry:nth-child(12){animation-delay:1.2s;}.blog-entry:nth-child(13){animation-delay:1.3s;}.blog-entry:nth-child(14){animation-delay:1.4s;}.blog-entry:nth-child(15){animation-delay:1.5s;}.blog-entry:nth-child(16){animation-delay:1.6s;}.blog-entry:nth-child(17){animation-delay:1.7s;}.blog-entry:nth-child(18){animation-delay:1.8s;}.blog-entry:nth-child(19){animation-delay:1.9s;}.blog-entry:nth-child(20),.blog-entry:nth-child(21),.blog-entry:nth-child(22),.blog-entry:nth-child(23),.blog-entry:nth-child(24),.blog-entry:nth-child(25){animation-delay:2s;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Reducir css

Publicado por Víctor (2 intervenciones) el 26/09/2019 23:10:18
Gracias @juanjose eso sería más como minify no? Yo me refería a algún algoritmo para que se haga sólo de 1 a infinito sin tener que especificar todos los items. Imagínate que es un infinite scroll... te mueres poniendo eso jejeje Aún así ya te digo, muchas gracias y además me hace pensar que he formulado mal la pregunta o consulta.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Reducir css

Publicado por juan jose (57 intervenciones) el 26/09/2019 23:38:27
el tema de reducir codigo, es haciendo clases en comun, o si tienes una propiedad repetidas muchas veces, poner un conjunto de clases

por ejemplo tu tenias esto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
article.blog-entry:nth-child(20) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(21) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(22) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(23) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(24) {
  animation-delay: 2s;
}
 
article.blog-entry:nth-child(25) {
  animation-delay: 2s;
}


que lo podrias hacer de esta forma

1
2
3
article.blog-entry:nth-child(20),article.blog-entry:nth-child(21),article.blog-entry:nth-child(22),article.blog-entry:nth-child(23),article.blog-entry:nth-child(24),article.blog-entry:nth-child(25){
animation-delay:2s;
}

de la clase 20 a la 25 todas utilizan solo animation-delay y todas tienen valor 2s entonces es en lo unico que se puede reducir codigo.

creo que es a lo que te refieres, a reducir codigo y no compactar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar