Evitar constantes repetidas en CSS

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

(Por ejemplo, un grupo de selectores diferentes que deberían todos aplicar el mismo color o el mismo tamaño de letra)?

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

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

Y luego en la porción de contenido en alguna parte:

 
Your content

Las debilidades aquí son que se vuelve bastante prolijo en el cuerpo y es poco probable que puedas incluir un solo color una vez. Pero puede hacerlo solo dos o tres veces y puede agrupar esos colores, quizás en su propia hoja. Ahora cuando quieres cambiar el esquema de colores, todos están juntos y el cambio es bastante simple.

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

Debería separar por comas cada identificación o clase, por ejemplo:

 h1,h2 { color: #fff; } 

Recientemente, las variables se han agregado a las especificaciones oficiales de CSS.

Las variables te permiten algo así:

 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); } 
 

This is a test

Puede usar variables globales para evitar la duplicación.

 p{ background-color: #ccc; } h1{ background-color: #ccc; } 

Aquí, puede inicializar una variable global en : selector de pseudo clase de raíz . : root 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. Debido a que la especificación de esta tecnología no se ha estabilizado, verifique en la tabla de compatibilidad los prefijos apropiados para usar en varios navegadores. También tenga en cuenta que la syntax y el comportamiento de una tecnología experimental están sujetos a cambios en las versiones futuras de los navegadores a medida que cambia la especificación. Más información aquí

Sin embargo, siempre puede usar las Hojas de estilo sintácticamente impresionantes, es decir,

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

 $base : #ccc; p{ background-color: $base; } h1{ background-color: $base; } 

Puede usar marcos de css dynamics como less .

Personalmente, solo uso el selector separado por comas, pero hay alguna solución para escribir css mediante progtwigción. Tal vez esto es un poco exagerado para sus necesidades más simples, pero eche un vistazo a CleverCSS (Python)

Pruebe las variables globales para evitar la duplicación de la encoding

 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; } 

Hasta donde yo sé, sin generar programáticamente el archivo CSS, no hay forma de, por ejemplo, definir su tono de azul favorito (# E0EAF1) en un solo lugar.

Podrías escribir fácilmente un progtwig de computadora para generar el archivo. Ejecute una operación simple de búsqueda y reemplazo y luego guárdelo como un archivo .css.

Ir desde este source.css …

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

a este target.css …

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

con un 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) 

Puede usar herencia múltiple en los elementos html (por ejemplo,

), pero no conozco la forma de tener constantes en los archivos CSS.

Este enlace (el primero que se encuentra al buscar en Google su pregunta) parece tener un aspecto bastante profundo del problema:

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

Las variables de CSS , si alguna vez se implementa en todos los principales navegadores, algún día pueden resolver este problema.

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

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

some red text

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');