Skip to content

Instantly share code, notes, and snippets.

@janogarcia
Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save janogarcia/6ccf328a5b0ded7b79c9 to your computer and use it in GitHub Desktop.
Save janogarcia/6ccf328a5b0ded7b79c9 to your computer and use it in GitHub Desktop.
CSS Class Groups Combinations

Colors = {red, yellow, green, ..., n1}
Sizes = {small, medium, big, ..., n2}
Shapes = {round, soft, square, ..., n3}
Fills = {hollow, solid, gradient, ..., n4}

Cómo obtener todas las posibles combinaciones para las siguientes condiciones:

  • El tamaño mínimo de las combinaciones es 1 y el tamaño máximo n es igual al número total de grupos: mínimo 1 {red}, máximo 4 {red, small, round, hollow}
  • No se pueden repetir los elementos: {red, red} no es una combinación válida
  • Sólo puede haber un elemento de cada grupo: {red, yellow} no sería una combinación válida
  • El orden no importa: no hay que diferenciar entre {red, small} y {small, red}

Para el siguiente ejemplo, si no me he equivocado, he calculado que serían 63 combinaciones válidas:

Colors = {red, yellow, green}
Sizes = {small, medium, big}
Shapes = {round, soft, square}

9 (3+3+3) combinaciones de 1 elemento: {red}, {yellow}, {green}, ...
27 (3x3+3x3+3x3) combinaciones de 2 elementos: {red, small}, {red, medium}, {red, big} ...
27 (3x3x3) combinaciones de 3 elementos: {red, small, round}, {red, small, soft}, {red, small, square} ...

Qué formula podría usar en http://www.wolframalpha.com/ para resolver cualquier caso (número de grupos y número de elementos en cada grupo variables)? Basta con obtener el número total de combinaciones, no sería necesario generar el listado de combinaciones.

Gracias!

https://twitter.com/janogarcia
http://janogarcia.es

@mirenbz
Copy link

mirenbz commented Mar 10, 2015

Jano, si no entiendo mal, lo que quieres es una forma de introducir un numero de variables con un número posible de valores y calcular el número total de combinaciones posibles? Es decir, una cuestión más aritmética que de CSS, ¿no?

@janogarcia
Copy link
Author

Eso es, Miren. De CSS realmente no tiene absolutamente nada (podrían ser camisetas o caramelos en vez de clases CSS), sólo que las reglas especificadas para las combinaciones me sirven para calcular el total de combinaciones útiles de clases CSS.

@janogarcia
Copy link
Author

Para el ejemplo que he puesto de 3 grupos, cada uno con 3 elementos, es fácil calcular las combinaciones posibles fijándote un poco.

Lo que me gustaría saber es cómo hacerlo para cualquier caso: número de grupos variable, distinto número de elementos en cada grupo.

Por ejemplo, 5 grupos con diferentes números de elementos:

Colors = {red, yellow, green, blue, black, white}
Sizes = {tiny, small, medium, big}
Shapes = {round, soft, square}
Fills = {hollow, solid}
Font = {light, medium, bold}

@mirenbz
Copy link

mirenbz commented Mar 10, 2015

Creo que en este post de Mathematics SE responden a tu pregunta. En tu ejemplo, serían 3 opciones + 1 (no incluir ninguna opción de ese grupo) = 4 opciones en cada grupo, así que 4 x 4 x 4 = 64 - 1 (la opción {0,0,0} = 63.

Es decir, multiplicar el número de opciones (+1 por el 0 = no incluir nada de ese grupo) de todos los grupos y restarle 1 (la opción de no incluir nada de ningún grupo).

@mirenbz
Copy link

mirenbz commented Mar 10, 2015

Para el ejemplo que pones en el comentario, 7 x 5 x 4 x 3 x 4 - 1 = 1679 posibles combinaciones.

@janogarcia
Copy link
Author

Una solución muy elegante, me encanta. Mil gracias, Miren!

@mirenbz
Copy link

mirenbz commented Mar 10, 2015

Está pendiente de revisión por un experto matemático de la uni [hola, Juanjo ;)]. Si ve alguna pega, responde él mismo o me cuenta y te respondo yo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment