css - style - tags html5
Evitar constantes repetidas en CSS (11)
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:
<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 incluir un solo color una vez. Pero es posible que solo puedas hacerlo dos o tres veces y puedas 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.
¿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)?
Puede usar herencia múltiple en los elementos html (por ejemplo, <div class="one two"> ), 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:
Personalmente, solo uso el selector separado por comas, pero hay alguna solución para escribir css mediante programación. Tal vez esto es un poco exagerado para sus necesidades más simples, pero eche un vistazo a CleverCSS (Python)
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).
Puede usar marcos de css dinámicos como less .
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 sintaxis 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;
}
Debería separar por comas cada identificación o clase, por ejemplo:
h1,h2 {
color: #fff;
}
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 programa 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)
Pruebe las variables globales para evitar la duplicación de la codificación
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;
}
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);
}
<div class="theme-default">
<div class="pad-box">
<p>
This is a test
</p>
<button>
Themed button
</button>
</div>
</div>
Lamentablemente, el soporte del navegador sigue siendo muy pobre. 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 pre-procesador CSS como Less o Sass .
Los preprocesadores de CSS no solo le permiten usar variables, sino que le permiten hacer todo lo que puede hacer con un lenguaje de programación.
Por ejemplo, en Sass, puedes 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;
}
: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'');