3

Quando eu tiver uma variável global e modificar manualmente o valor da variável atribuindo um novo valor a ela em um escopo local, ela estaria sendo a mesma ou diferente? Como, por exemplo:

:root {
  --primary-color: #ff0000;
}

#first-box {
  --primary-color: #00ff00;
}

#first-box, #second-box {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: var(--primary-color);
}
<div id="first-box"></div>
<div id="second-box"></div>

No exemplo acima a variável --primary-color do escopo local de #first-box é a mesma variável do escopo global de :root, porém foi redefinida o seu valor localmente apenas para esse elemento? Ou simplesmente a variável declarada no escopo local de #first-box é uma nova variável com um novo valor totalmente diferente da variável do escopo global de :root?

0

2 Respostas 2

4
+25

Não se trata de um problema de escopo ou herança!

Quando eu tiver uma variável global e modificar manualmente o valor da variável atribuindo um novo valor a ela em um escopo local, ela estaria sendo a mesma ou diferente?

Não é uma pergunta fácil de responder, principalmente se levarmos em conta o cenário apresentado na pergunta pois o exemplo mostrado não ilustra em um problema de escopo ou herança de Propriedades CSS Personalizadas e sim pontua um problema com Algoritmo CSS de Especifidade.

:root {                       /* especificidade 0,1,0 */
  --primary-color: #ff0000;
}

#first-box {                  /* especificidade 1,0,0 se sobrepõe a especificidade 
                                 do seletor :root para elemento cujo o id é first-box */
  --primary-color: #00ff00;
}

#first-box,                    /* especificidade 1,0,0 */
#second-box {                  /* especificidade 1,0,0 */
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: var(--primary-color);
}

Cascata, Especificidade e Herança:

Para começar a responder essa pergunta é preciso conhecer alguns conceitos basilares do CSS, que são:

Nos links a cima você encontrará informações mais detalhada a respeito de cada tópico. Para responder a pergunta será feita uma breve introdução sobre cada tema com um enfoque mais acentuado em Cascata e Especificidade que são o tema central da pergunta.

Cascata:

Em CSS Cascata é um dos algoritmos que definem como os navegadores combinam valores de propriedade originários de diferentes fontes.
O trabalho do algoritmo de Cascata é selecionar declarações CSS para determinar os valores corretos para as propriedades CSS. As declarações CSS vêm de diferentes tipos de origem:

  • Folhas de estilo do agente do usuário: são as folhas de estilo básicas embutidas no navegador que fornecem estilos padrão a qualquer documento. Embora algumas restrições nas folhas de estilo do agente do usuário sejam definidas pela especificação HTML, devido as particularidades de como os navegadores implementam essas folhas de estilo diferenças serão apresentadas entre os navegadores.
  • Folhas de estilo do autor: são as folhas de estilos escritos por desenvolvedores da web. Esses estilos podem redefinir os estilos de agente do usuário e definir os estilos para o design de uma determinada página da Web ou aplicativo.
  • Folhas de estilo do usuário: são folhas de estilos aplicadas pelo o usuário do site. Dependendo do navegador, os estilos do usuário podem ser configurados diretamente ou adicionados por meio de extensões. Até o momento em que escrevo essa resposta nem todos os navegadores suportam folhas de estilo do usuário.

A Cascata determina como encontrar o valor a ser aplicado para cada propriedade de cada elemento do documento HTML. Na documentação já citada será encontrada uma discussão mais aprofundada sobre o assunto.
Seguem os critérios

  1. Relevância: filtrar todas as regras das diferentes fontes para manter apenas as regras que se aplicam a um determinado elemento.

  2. Origem e importância: classificar essas regras de acordo com sua importância, ou seja, se são seguidas ou não por !important, e por sua origem. A ordem simplificada da cascata é a seguinte:

Ordem (crescente) Origem(Folhas de estilo) Importância
1 agente do usuário (navegador) normal
2 do utilizador normal
3 autor (desenvolvedor) normal
4 Animações CSS @keyframe
5 autor (desenvolvedor) !important
6 do utilizador !important
7 agente do usuário (navegador) !important
8 transições CSS

Veja em Cascata completa o algoritmo de cascata com o uso de camadas, omitidas aqui por questões de simplificação na abordagem do problema.
3. Especificidade: no caso de igualdade com uma origem, considerar a especificidade de uma regra para escolher um valor ou outro. A especificidade dos seletores é comparada e a declaração com a maior especificidade vence.
4. Ordem de aparência:, havendo valores concorrentes para uma propriedade que estão em seletores de correspondência de bloco de estilo de igual especificidade, a última declaração na ordem de estilo é aplicada.

Especificidade:

A especificidade é o algoritmo usado pelos navegadores para determinar a declaração CSS mais relevante para um elemento. após determinar a origem e a importância da cascata, que por sua vez determina o valor da propriedade a ser aplicada ao elemento. O algoritmo de especificidade calcula o peso de um seletor CSS para determinar qual regra das declarações CSS concorrentes é aplicada a um elemento.

O algoritmo de especificidade é basicamente um valor de três colunas de pesos onde o peso é determinado pelo número de seletores de cada categoria de peso no seletor correspondente ao elemento (ou pseudoelemento). Se houver duas ou mais declarações fornecendo valores de propriedade diferentes para o mesmo elemento, o valor da declaração no bloco de estilo com o seletor correspondente com o maior peso algorítmico será aplicado.

As categorias de peso do listadas em ordem decrescente de especificidade:

  1. coluna ID: Inclui apenas seletores de ID. Para cada ID em um seletor correspondente, adicione 1-0-0 ao valor do peso.

  2. coluna CLASSE: Inclui seletores de classe, seletores de atributo e pseudo classes. Para cada classe, seletor de atributo ou pseudo classe em um seletor correspondente adicione 0-1-0 ao valor do peso.

  3. TIPO Inclui seletores de tipo e pseudo elementos. Para cada tipo ou pseudo elemento em um seletor correspondente adicione 0-0-1 ao valor do peso.

O seletor universal * e a pseudo classe :where() e seus parâmetros não são contados ao calcular o peso, então seu valor é 0-0-0, mas eles correspondem aos elementos. Esses seletores não afetam o valor do peso da especificidade.

Combinadores, como +, >, ~, e ||, podem tornar um seletor mais específico no que é selecionado, mas não adicionam nenhum valor ao peso da especificidade.

Herança:

Em CSS a herança controla o que acontece quando nenhum valor é especificado para uma propriedade em um elemento.

As propriedades CSS podem ser categorizadas em dois tipos:

  • propriedades herdadas: por padrão são definidas como o valor calculado do elemento pai.
  • propriedades não herdadas: são definidas como valor inicial da propriedade.

Consulte a documentação de cada propriedade CSS para saber se uma propriedade é herdada ou não por padrão.

Teste de Mesa:

Depois de conhecidos os algoritmos que os navegadores usam para determinar os valores das propriedades CSS é possível calcular manualmente os valores da propriedades num de Teste de Mesa.
Para isso tomemos o código da pergunta e para tonar as coisas mais interessantes serão feitas algumas modificações:

#first-box {
  --primary-color: #00ff00;
}

:root {
  --primary-color: #ff0000;
}

div:hover {
  --primary-color: #0000ff;
}

#first-box,
#second-box {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: var(--primary-color);
}
<div id="first-box"></div>
<div id="second-box"></div>

A lista de modificações:

  • Troca da posição dos setores #first-box e :root.
#first-box {
  --primary-color: #00ff00;
}
:root {
  --primary-color: #ff0000;
}
  • Adição do seletor de pseudo classes :hover.
div:hover {
  --primary-color: #0000ff;
}

Então a ação que deve ser feita é aplicar o algoritmo cascata passo a passo e tabular os resultados.

1º passo:

Filtrar todas as regras das diferentes fontes para manter apenas as regras que se aplicam a um determinado elemento:

elemento regras
<div id="first-box">
#first-box
:root
div:hover
#first-box,#second-box
<div id="second-box">
:root
div:hover
#first-box,#second-box

2º passo:

Classificar cada regras de acordo com sua importância e por sua origem.

elemento <div id="first-box"> origem importância propriedades
#first-box
Folha de estilo do utilizador normal
--primary-color: #00ff00;
:root
Folha de estilo do utilizador normal
--primary-color: #ff0000;
div:hover
Folha de estilo do utilizador normal
--primary-color: #0000ff;
#first-box,
#second-box
Folha de estilo do utilizador normal
width: 100px;
height: 100px;
margin: 5px;
background-color: var(--primary-color);
elemento <div id="#second-box"> origem importância propriedades
:root
Folha de estilo do utilizador normal
--primary-color: #ff0000;
div:hover
Folha de estilo do utilizador normal
--primary-color: #0000ff;
#first-box,
#second-box
Folha de estilo do utilizador normal
width: 100px;
height: 100px;
margin: 5px;
background-color: var(--primary-color);

No caso todas as regras possuem a mesma origem então o cálculo dos valores das propriedades será decidido nos próximos passos

3º passo:

Calcular a especificidade de cada regra:

elemento <div id="first-box"> especificidade propriedades
#first-box
1-0-0
--primary-color: #00ff00;
:root
0-1-0
--primary-color: #ff0000;
div:hover
0-1-1
--primary-color: #0000ff;
#first-box,
#second-box
1-0-0
width: 100px;
height: 100px;
margin: 5px;
background-color: var(--primary-color);
elemento <div id="second-box"> especificidade propriedades
:root
0-1-0
--primary-color: #ff0000;
div:hover
0-1-1
--primary-color: #0000ff;
#first-box,
#second-box
1-0-0
width: 100px;
height: 100px;
margin: 5px;
background-color: var(--primary-color);

4º Passo

Calcular o valor das propriedades para cada elemento:

<div id="first-box"> valores sem hover valores com hover
--primary-color #00ff00 #00ff00
width 100px 100px
height 100px 100px
margin 5px 5px
background-color var(--primary-color) var(--primary-color)
<div id="second-box"> valores sem hover valores com hover
--primary-color #ff0000 #0000ff
width 100px 100px
height 100px 100px
margin 5px 5px
background-color var(--primary-color) var(--primary-color)
-5

São diferentes! Porém, sempre respeitando o que foi definido na raíz.

Segundo o próprio site do developer mozilla:

A pseudo-classe CSS :root se equipara à raiz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, :root representa o elemento e é idêntico ao seletor html, exceto que sua especificidade é mais alta.

Uma vez que você define uma variável global, ela sempre será global. Mas e se você quiser alterar algo específico o css também respeita isso. Mas ele não substitui globalmente o que você deseja, substitui apenas aquele local que você abriu uma exceção.

Peguei o seu código e customizei no code pen e para ter certeza fiz o seguinte: Eu criei uma terceira box! O third-box para poder aplicar um css específico nele. E de fato funcionou. E então criei uma quarta box! O fourth-box para poder entender se ele pegaria o último css que criei ou se ele respeitaria a minha declaração global! E ele respeitou a minha declaração global! Ele pintou o quadrado de vermelho! Assim como foi definido no escopo.

:root {
  --primary-color: #ff0000;
}

#first-box {
  --primary-color: #00ff00;
}

#third-box {
  --primary-color: #222;
}

#first-box, #second-box, #third-box, #fourth-box {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: var(--primary-color);
}
<div id="first-box"></div>
<div id="second-box"></div>
<div id="third-box"></div>
<div id="fourth-box"></div>

Responde sua pergunta? Qualquer coisa vamos conversado! :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .