Selector de ID doble

[TrinityCore]

Buenas gente, espero esten bien.

Veran, queria saber si habria manera de hacer un selector de Doble ID (se que se puede), pero lo que quiero es que seleccione un ID y el "doble" que sea cualquiera...

Me explico, imaginen la situacion en donde quiero darle un aspecto x a una ventana.

Código CSS:

#window{
    background-color:rgba(255,255,255,1);
    border:1px solid rgba(0,0,0,0.5);
    border-radius:2px 2px;
    width:50vmin;
    height:30vmin;
}
 

Perfecto, la ventana #window tiene un aspecto, pero imaginen que ahora quiero darle un aspecto diferente, ya que esta ventana la usare en muchas ocaciones y su aspecto ha de variar, lo haria asi..

Código CSS:

#window#aspect1{
    background-color:rgba(255,255,255,0.5);
    border:1px solid rgba(0,0,0,0.2);
    border-radius:0px 0px;
    width:30vmin;
    height:15vmin;
}
 

hasta aqui bien, puedo usar la base de window y retocarla con otro ID sin modificar la original, ahora me sirve para dos usos.
Pero imaginen ahora que tengo varias... y claro, cada #window tiene hijos, por lo que hacer lo anterior con cada una y mas teniendo en cuenta los hijos seria un volon de pelo.

¿podria existir algo que facilite el tema de los hijos?
por ejemplo (esto es una forma de que entiendan no sirve de nada)

Código CSS:

#window#aspect2:child*{
    background-color:rgba(255,255,255,1);
    border:1px solid rgba(0,0,0,0.5);
    border-radius:2px 2px;
    width:50vmin;
    height:30vmin;
}
 

De esta manera me ahorraria hacer esto

Código CSS:

#window#aspect2{
    background-color:rgba(255,255,255,1);
    border:1px solid rgba(0,0,0,0.5);
    border-radius:2px 2px;
    width:50vmin;
    height:30vmin;
}
#window#aspect2 .image{
    background-image:....;
}
#window#aspect2 .title{
    color:....;
}
 

¿Seria posible?

[g3kdigital]

Hay una solución y perdón de antemano decir esto tan seco, pero:

No uses id, usa clases.

Es decir, un ID es precisamente para un elemento único y no con variantes, con tipos, o similares, ni nada. Los id, son el último paso en las buenas prácticas usando css y hoy día, solo se recomienda su uso para combinarlo con javascript. El uso de clases es muy sencillo y permite la multiclase sin ningún problema y de hecho en tu ejemplo de caso de uso aplica muy bien y de hecho jejeje es la solución que siempre vas a encontrar en internet si haces una pequeña búsqueda. Ejemplo de uso con clases:

Código HTML:

<div class="window aspect1"></div>
<div class="window aspect2"></div>
 

Código CSS:

.window.aspect1{
    background-color:rgba(255,255,255,0.5);
    border:1px solid rgba(0,0,0,0.2);
    border-radius:0px 0px;
    width:30vmin;
    height:15vmin;
}
 
.window.aspect2{
    background-color:rgba(255,255,255,1);
    border:1px solid rgba(0,0,0,0.5);
    border-radius:2px 2px;
    width:50vmin;
    height:30vmin;
}
 

Como mucho puedes hacer algo así:

Código HTML:

<div id="window1" class="aspect1"></div>
<div id="window2" class="aspect2"></div>
 

Código CSS:

[id*="window"].aspect1{
    background-color:rgba(255,255,255,0.5);
    border:1px solid rgba(0,0,0,0.2);
    border-radius:0px 0px;
    width:30vmin;
    height:15vmin;
}
 
[id*="window"].aspect2{
    background-color:rgba(255,255,255,1);
    border:1px solid rgba(0,0,0,0.5);
    border-radius:2px 2px;
    width:50vmin;
    height:30vmin;
}
 

Pero nunca así, porque no es valido que hayan dos elementos con el mismo ID:

Código HTML:

<div id="window" class="aspect1"></div>
<div id="window" class="aspect2"></div>
 

Así veras que lo usan todos los frameworks o templates, proyectos importantes y referentes.

Es muy sencillo y de hecho si lo haces como pretendes (usando el mismo id o multi ids para varios elementos) vas a ver alarmas en todos los validadores de marcado oficiales.

Éxitos en tu proyecto y feliz día.

[pzin]

Yo te diría que uses IDs para lo que son, y las clases para lo que son. También ponerle nombres descriptivos sería bueno; para cuando te olvides dentro de unos meses y quieras retocar algo, o para el que venga después.

En tu caso, lo lógico sería #window.low_opacity.

Ahora, para responder a la pregunta original, que entiendo es cómo puedas simplificar código y no repetir las cosas hasta la saciedad: usa algún preprocesador CSS. A mí me gusta Sass, a otros Stylus, a otros LESS…

Código CSS:

// Creas tu mixin
@mixin window($opacity, $border_opacity, $border_radius, $width, $height)
  background-color: rgba(255,255,255,$opacity)
  border: 1px solid rgba(0,0,0,$border_opacity)
  border-radius: $border_radius
  width: $width
  height: $height
 
// Y luego creas tus estilos
#window
  &.low_opacity
    +window(0.5, 0.2, 0, 30vmin, 15vmin)
  &.otra_cosa
    +window(1, 0.5, 5px, 30vmin, 15vmin)
  // etc
 

Se pueden mejorar e incluso reducir alguna cosa, pero como ejemplo creo que vale.