¿Es posible hacer referencia a una regla CSS dentro de otra?

Por ejemplo, si tengo el siguiente HTML:

<div class="someDiv"></div>

y este CSS:

.opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}

Como en los lenguajes de scripting, tiene funciones genéricas que se usan a menudo escritas en la parte superior del script y cada vez que necesita usar esa función, simplemente llama a la función en lugar de repetir todo el código cada vez.

No, no puede hacer referencia a un conjunto de reglas de otro.

Sin embargo, puede reutilizar selectores en múltiples conjuntos de reglas dentro de una hoja de estilo y usar múltiples selectores en un solo conjunto de reglas ( separándolos con una coma ).

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

También puede aplicar varias clases a un solo elemento HTML (el atributo de clase toma una lista separada por espacios).

<div class="opacity radius">

Cualquiera de esos enfoques debería resolver su problema.

Probablemente ayudaría si usara nombres de clase que describan por qué un elemento debe tener un estilo en lugar de cómo debe tener un estilo. Deje el cómo en la hoja de estilo.

No puede a menos que esté usando algún tipo de CSS extendido como SASS . Sin embargo, es muy razonable aplicar esas dos clases adicionales a .someDiv.

Si .someDives único, también elegiría darle una identificación y hacer referencia a ella en css usando la identificación.

Si está dispuesto y puede emplear un poco de jquery, simplemente puede hacer esto:

$('.someDiv').css([".radius", ".opacity"]);

Si tiene un javascript que ya procesa la página o puede incluirlo en alguna parte de las etiquetas <script>. Si es así, envuelva lo anterior en la función de documento listo:

$(document).ready( function() {
  $('.someDiv').css([".radius", ".opacity"]);
}

Recientemente me encontré con esto mientras actualizaba un complemento de wordpress. Se han cambiado, lo que utiliza muchas directivas "! Importantes" en el CSS. Tuve que usar jquery para forzar mis estilos debido a la genial decisión de declarar! Importante en varias etiquetas.

Puede hacerlo fácilmente con el preprocesador SASS usando @extend.

someDiv {
    @extend .opacity;
    @extend .radius;
}

De lo contrario, también puede usar JavaScript (jQuery):

$('someDiv').addClass('opacity radius')

Lo más fácil es, por supuesto, agregar varias clases directamente en el HTML

<div class="opacity radius">

Simplemente agregue las clases a su html

<div class="someDiv radius opacity"></div>

Tuve este problema ayer. La respuesta de @ Quentin está bien:

No, you cannot reference one rule-set from another.

pero hice una función de javascript para simular la herencia en css (como .Net):

    var inherit_array;
    var inherit;
    inherit_array = [];
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.style != null) {
                inherit = cssRule_i.style.getPropertyValue("--inherits").trim();
            } else {
                inherit = "";
            }
            if (inherit != "") {
                inherit_array.push({ selector: cssRule_i.selectorText, inherit: inherit });
            }
        });
    });
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.selectorText != null) {
                inherit_array.forEach(function (inherit_i, index) {
                    if (cssRule_i.selectorText.split(", ").includesMember(inherit_i.inherit.split(", ")) == true) {
                        cssRule_i.selectorText = cssRule_i.selectorText + ", " + inherit_i.selector;
                    }
                });
            }
        });
    });

Array.prototype.includesMember = function (arr2) {
    var arr1;
    var includes;
    arr1 = this;
    includes = false;
    arr1.forEach(function (arr1_i, index) {
        if (arr2.includes(arr1_i) == true) {
            includes = true;
        }
    });
    return includes;
}

y CSS equivalente:

.test {
    background-color: yellow;
}

.productBox, .imageBox {
    --inherits: .test;
    display: inline-block;
}

y HTML equivalente:

<div class="imageBox"></div>

Lo probé y trabajé para mí, incluso si las reglas están en diferentes archivos css.

Actualización: encontré un error en la herencia jerárquica en esta solución, y lo resolveré muy pronto.

Puede usar la función var () .

La función CSS var () se puede utilizar para insertar el valor de una propiedad personalizada (a veces denominada "variable CSS") en lugar de cualquier parte del valor de otra propiedad.

Ejemplo:

:root {
  --main-bg-color: yellow;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: black;
  }
}

body {
  background-color: var(--main-bg-color);
}