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
Relevância: filtrar todas as regras das diferentes fontes para manter apenas as regras que se aplicam a um determinado elemento.
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:
coluna ID: Inclui apenas seletores de ID. Para cada ID em um seletor correspondente, adicione 1-0-0
ao valor do peso.
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.
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) |