Evitar constantes repetidas en CSS

Question

¿Existe alguna técnica útil para reducir la repetición de constantes en un archivo CSS?

(Por ejemplo, ¿un montón de selectores diferentes que deberían aplicar el mismo color o el mismo tamaño de fuente)?

Answer 1

Recientemente, Se han añadido variables. a las especificaciones oficiales de CSS.

Las variables te permiten hacer algo como esto:

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

Desafortunadamente, la compatibilidad con los navegadores sigue siendo muy deficiente. Según CanIUse, los únicos navegadores que admiten esta función hoy (9 de marzo de 2016) son Firefox 43+, Chrome 49+, Safari 9.1+ y iOS Safari 9.3+:

---

Alternativas:

Hasta que las variables CSS sean ampliamente compatibles, podría considerar usar un lenguaje de preprocesador CSS como Menos o Hablar con descaro a.

Los preprocesadores CSS no solo le permitirían usar variables, sino que prácticamente le permitirían hacer cualquier cosa que pueda hacer con un lenguaje de programación.

Por ejemplo, en Sass, podrías crear una función como esta:

@function exponent($base, $exponent) {
    $value: $base;
    @if $exponent > 1 {
        @for $i from 2 through $exponent {
            $value: $value * $base;
        }
    }
    @if $exponent < 1 {
        @for $i from 0 through -$exponent {
            $value: $value / $base;
        }
    }
    @return $value; 
}

Answer 2

Los elementos pueden pertenecer a más de una clase, por lo que puedes hacer algo como esto:

.DefaultBackColor
{
    background-color: #123456;
}
.SomeOtherStyle
{
    //other stuff here
}
.DefaultForeColor
{
    color:#654321;
}

Y luego en alguna parte de la parte de contenido:

<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>

Las debilidades aquí son que se vuelve bastante prolijo en el cuerpo y es poco probable que puedas reducirlo a enumerar un color solo una vez.Pero es posible que puedas hacerlo sólo dos o tres veces y puedas agrupar esos colores, tal vez en su propia hoja.Ahora, cuando quieras cambiar la combinación de colores, estarán todos juntos y el cambio es bastante simple.

Pero sí, mi mayor queja con CSS es la incapacidad de definir tus propias constantes.

Answer 3

Debes separar con comas cada ID o clase, por ejemplo:

h1,h2 {
  color: #fff;
}

Answer 4

Puede utilizar variables globales para evitar duplicaciones.

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

Aquí puede inicializar una variable global en :raíz selector de pseudoclase. :raíz es el nivel superior del DOM.

:root{
    --main--color: #ccc; 
}

p{
  background-color: var(--main-color);
}

h1{
  background-color: var(--main-color);
}

NOTA:Esta es una tecnología experimental porque la especificación de esta tecnología no se ha estabilizado, verifique la tabla de compatibilidad para que los prefijos adecuados lo usen en varios navegadores.También tenga en cuenta que la sintaxis y el comportamiento de una tecnología experimental están sujetos a cambios en futuras versiones de los navegadores a medida que cambien las especificaciones. Más información aquí

Sin embargo, siempre puedes utilizar las hojas de estilo sintácticamente impresionantes, es decir.

En el caso de Sass, debes usar $variable_name en la parte superior para inicializar la variable global.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Answer 5

Puede utilizar marcos CSS dinámicos como menos.

Answer 6

Personalmente, solo uso un selector separado por comas, pero existe alguna solución para escribir CSS mediante programación.Tal vez esto sea un poco excesivo para sus necesidades más simples, pero eche un vistazo a CSS inteligente (Pitón)

Answer 7

Pruebe las variables globales para evitar codificación duplicada

h1 {
  color: red;
}
p {
  font-weight: bold;
}

O puedes crear diferentes clases.

.deflt-color {
  color: green;
}
.dflt-nrml-font {
  font-size: 12px;
}
.dflt-header-font {
  font-size: 18px;
}

Answer 8

Hasta donde yo sé, sin generar el archivo CSS mediante programación, no hay manera de, digamos, definir su tono de azul favorito (#E0EAF1) en un solo lugar.

Podrías escribir fácilmente un programa de computadora para generar el archivo.Ejecute una operación simple de buscar y reemplazar y luego guárdela como un archivo .css.

Vaya desde esta fuente.css…

h1,h2 {
  color: %%YOURFAVORITECOLOR%%;
}

div.something {
  border-color: %%YOURFAVORITECOLOR%%;
}

a este target.css…

h1,h2 {
  color: #E0EAF1;
}

div.something {
  border-color: #E0EAF1;
}

con código como este… (VB.NET)

Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)

Answer 9

Puede utilizar herencia múltiple en sus elementos html (p. ej. <div class="one two">) pero no conozco ninguna forma de tener constantes en los archivos CSS.

Este enlace (el primero que se encuentra al buscar en Google su pregunta) parece tener una visión bastante profunda del problema:

http://icant.co.uk/articles/cssconstants/

Answer 10

Variables CSS, si alguna vez se implementa en los principales navegadores, algún día podría resolver este problema.

Hasta entonces, tendrá que copiar y pegar, o utilizar un preprocesador de cualquier tipo, como han sugerido otros (normalmente utilizando secuencias de comandos del lado del servidor).

Answer 11

    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    } 

<p> some red text </p>

Puedes cambiar el color por JS.

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim(); 


document.documentElement.style.setProperty('--primary-color', 'blue');