Evitando repetidas constantes no CSS

Question

Existem técnicas úteis para reduzir a repetição de constantes em um arquivo CSS?

(Por exemplo, um monte de diferentes seletores que deve aplicar a mesma cor ou o mesmo tamanho de tipo de letra)?

Answer 1

Recentemente, as variáveis foram adicionadas para o oficial CSS especificações.

Variáveis permitem que você para algo como isto :

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>

Infelizmente, o suporte ao navegador ainda é muito pobre. De acordo com CanIUse, os únicos navegadores que oferecem suporte a esse recurso hoje (9 de março de 2016), são Firefox 43+, Chrome 49+, Safari 9.1+ e iOS Safari 9.3+ :

---

Alternativas :

Até CSS variáveis são amplamente suportado, você pode considerar usar um CSS pré-processador de linguagem como Menos ou Sass.

CSS pré-processadores não só permitem que você use variáveis, mas muito bonito permitir que você faça alguma coisa que você pode fazer com uma linguagem de programação.

Por exemplo, em Sass, você poderia criar uma função 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

Elementos podem pertencer a mais de uma classe, assim você pode fazer algo como isto:

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

E, em seguida, o conteúdo parte em algum lugar:

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

Pontos fracos aqui são que ele fica muito prolixo no corpo e é improvável que você será capaz de obtê-lo para baixo a lista de uma cor só uma vez.Mas você pode ser capaz de fazê-lo apenas duas ou três vezes e você pode agrupar essas cores juntas, talvez em sua própria folha.Agora, quando você deseja alterar o esquema de cores que eles estão todos juntos e a mudança é muito simples.

Mas, sim, a minha maior queixa com CSS é a incapacidade de definir a sua própria constantes.

Answer 3

Você deve vírgula separado cada um id ou uma classe, por exemplo:

h1,h2 {
  color: #fff;
}

Answer 4

Você pode utilizar variáveis globais para evitar duplicacy.

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

Aqui, você pode inicializar uma variável global em :raiz pseudo seletor de classe. :raiz é de nível superior do DOM.

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

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

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

NOTA:Esta é uma tecnologia experimental Porque esta tecnologia da especificação não tiver estabilizado, verifique a tabela de compatibilidade para o bom prefixos para utilização em vários navegadores.Também note que a sintaxe e o comportamento de uma tecnologia experimental está sujeito a alterações em futuras versões de navegadores como o spec alterações. Mais Informações aqui

No entanto, você sempre pode usar o Sintaticamente Incrível Folhas de Estilo i.e.

No caso Sass, você tem que usar $variable_name no topo para inicializar a variável global.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Answer 5

Você pode usar dinâmico css frameworks como menos.

Answer 6

Pessoalmente, eu uso apenas por vírgulas separed seletor, mas há alguma solução para escrever css por meio de programação.Talvez isso seja um pouco de exagero para você mais simples necessidades, mas dê uma olhada no CleverCSS (Python)

Answer 7

Tente variáveis Globais para evitar a duplicação de codificação

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

Ou você pode criar diferentes classes de

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

Answer 8

Até onde eu sei, sem programaticamente gerar o arquivo CSS, não há nenhuma maneira para, digamos, definir o seu favorito tom de azul (#E0EAF1) em um e somente um ponto.

Você poderia muito facilmente escrever um programa de computador para gerar o arquivo.Executar um simples de localizar e substituir operação e, em seguida, salvar como .arquivo css.

Ir a partir desta fonte.css...

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

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

para este destino.css...

h1,h2 {
  color: #E0EAF1;
}

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

com o 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

Você pode usar herança múltipla em seus elementos html (por exemplo, <div class="one two"> mas eu não estou ciente de uma forma de ter constantes em arquivos CSS-se.

Neste link (o primeiro encontrado quando pesquisando sua pergunta) parece ter uma forma bastante aprofundada olhar para o problema:

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

Answer 10

CSS Variáveis, se é que já se torna implementado em todos os principais navegadores, pode, um dia, resolver este problema.

Até então, você vai ter que copiar e colar, ou usar um pré-processador de qualquer espécie, como outros têm sugerido (normalmente usando o server-sider scripts).

Answer 11

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

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

<p> some red text </p>

Você pode alterar a cor por JS

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


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