透過建立動態樣式來提高 CSS 程式碼的可讀性和可維護性

了解如何使用 CSS 變數建立日益複雜且高效的 Web 應用程式。

隨著Web 專案的發展並變得越來越複雜，擁有數千行的大量CSS 程式碼最終變得非常常見，並且在這些程式碼中，分配給屬性的值的重複頻率很可能還有大的。

正如您在下面的範例中看到的，顏色和背景顏色屬性中存在相同的值重複：

.one {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.two {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.three {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.four {
    color: #f0f0f0;
    background-color: #a52a2a;
}

在上面的例子中，相同的顏色可以在程式碼中數百個不同的地方使用。由於普通屬性的值相對固定，如果將來你決定改變所有具有相同顏色的元素的顏色，這將需要你在整個程式碼中手動搜尋顏色值並將其替換為相同的顏色。

但是，當使用 CSS 變數時，您作為 Web 開發人員的生活開始變得更加高效，CSS 變數允許將值儲存在一個位置，然後可以在其他多個位置引用。

需要明確的是，CSS 變數基本上是自訂屬性，而不是直接的實際程式變數。 CSS 變數的值在必要時計算，僅限於元素的範圍，並且不能動態操作或在樣式執行期間​​更改其值。

程式語言中的變數是可以包含不同類型值的資料存儲，並在程式執行過程中進行操作和修改，而 CSS 中的變數用於儲存特定值，以便在 CSS 屬性中重複使用。

現在，在下面的範例中，交換變數的固定值並使用var() 函數代替屬性值來檢索變數值，如果您決定更改顏色，則只需要更改變數的值，並且使用該變數的所有實例將自動更新：

:root {
    --text-primary: #f0f0f0;
    --bg-primary: #a52a2a;
}

.one {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.two {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.three {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.four {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

非常酷，對吧？如果您想了解 CSS 變數所能提供的所有潛力，請留到本文結束。

祝您閱讀愉快！

---

概括

• 變數基本上就是屬性
• 變數範圍
• var() 函數
• 屬性和變數的無效值

---

變數基本上就是屬性

好吧，我的目的不是要讓你感到困惑！但是，是的，這表明 CSS 變數和 CSS 屬性在文件中定義樣式的結果相同，並且在語法和使用方面相似，但是它們具有完全不同的功能，如下所示。

變數標識符

可以使用雙連字符 (--) 輕鬆識別變量，後跟區分大小寫字母的變量名稱，最後是對該變量有效的值：

--bg-secondary: #00ff00;

如您在上面的範例中所看到的，變數的額外好處之一是您為它們定義的名稱是自訂的且相對語義的，這意味著--bg-secondary 識別碼更容易理解為與主（或主要）背景顏色相關的輔助背景顏色，而不是直接插入十六進位代碼#00ff00.

作為屬性中的值

與變數相比，屬性不允許在名稱開頭使用連字符，因為連字符用於將單字分隔成複合屬性，例如 font-size、text-align 等。例外的是，有一些帶有前綴-webkit、-moz、-ms 和-o 的特定屬性在名稱開頭使用單個連字符，這些屬性用於尚未完全標準化或納入的實驗性功能官方CSS 規範.

--text-selected: none;

user-select: none;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

這樣，無論有沒有連字符，您都可以區分該屬性的用途。

變數值

可以賦給變數的值與任何屬性值對應的值相同，可以是一個或多個值的序列，只要該序列不包含該屬性不允許的值或只是一個無效值：

--horizontal: left;
--text-color: #0000ff;
--shadow: 0 0 10px #3a3939, 0 0 20px #666565;
--gradient: linear-gradient(90deg, #3c719e 0%, #2323ab 35%);

Embora existam semelhanças entre as variáveis CSS e propriedades CSS, ambas têm propósitos e funcionalidades diferentes, enquanto uma é usada para armazenar e reutilizar valores, a outra define estilos específicos para elementos individuais.

Herança da Variável

As variáveis CSS podem ser herdadas, assim como as propriedades normais do CSS, isso significa, que ao definir um valor para uma variável em um elemento, ela será aplicada automaticamente a todos os elementos que forem descendentes desse mesmo elemento, a menos que eles definam um novo valor.

Como, por exemplo:

.father {
    --font-small: 16px;
}

.child-1 {
    --font-small: 3.4em;
}

<div class="father">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

No exemplo acima, o resultado para cada elemento será:

• Para o elemento com a classe .father será definido: 16px.
• Para o elemento com a classe .child-1 será definido: 3.4em.
• Para o elemento com a classe .child-2 será definido o valor herdado do elemento pai: 16px.

Por conta disso, toda vez que você usar uma variável em um determinado elemento, tanto este elemento quanto os elementos dentro dele, também poderão ter os mesmos valores definidos na variável.

---

Escopo da variável

As variáveis CSS possuem como escopo os elementos em que as mesmas foram declaradas. O escopo nada mais é que a área ou contexto em que uma variável pode ser acessada e utilizada.

Existem dois tipos de escopos para as variáveis o escopo Global e Local. As variáveis de escopo global é uma variável que está disponível para ser usada em todo o documento, enquanto as variáveis de escopo local, limita o uso da variável em elementos específicos.

Escopo da Global

É muito útil o escopo global para tornar uma variável CSS acessível para todos os elementos do documento.

Como, por exemplo:

:root {
    --bg-dark: #1b1a1a;
}

#first-box {
    background-color: var(--bg-dark);
}

#second-box {
    background-color: var(--bg-dark);
}

No exemplo acima, a variável --bg-dark foi declarada no escopo da pseudo-classe :root, isso significa, que essa variável vai estar disponível para qualquer elemento. Faz sentido, declarar neste caso a variável no escopo global já que na página pode existir vários elementos com um design escuro.

A pseudo-classe :root é comumente utilizada para a declaração de variáveis, isso porque, ela é semelhante à raiz de uma árvore e basicamente se refere ao elemento que faz com que todos os outros elementos do documento fiquem contidos dentro dele, assim como os ramos e nós de uma árvore estão contidos na raiz da árvore.

Ao utilizar a pseudo-classe :root para declarar as suas variáveis, lembre-se que ela é semelhante ao seletor de elemento html, exceto que ela possui a especificidade mais alta de 0–0–1–0, enquanto o seletor htmlpossui a especificidade mais baixa de 0–0–0–1.

Escopo Local

O escopo local é a limitação que uma variável CSS vai ter para ser acessível dentro de um determinado elemento.

Como, por exemplo:

#third-box {
    --bg-info: #00ff00;
    background-color: var(--bg-info);
}

#fourth-box {
    background-color: var(--bg-info);
}

No exemplo acima, a variável --bg-info foi declarada no escopo do elemento que possui o id (#third-box), isso significa, que essa variável só vai estar disponível dentro deste elemento, ou seja, a cor de fundo só vai ser aplicada nele ou nos elementos dentro dele.

Enquanto ao tentar chamar a mesma variável para o elemento com id (#fourth-box) ela é "especificada como não definida" e a cor de fundo não será aplicada. Se você tiver a certeza que apenas alguns elementos na página vai receber um estilo específico, faz sentido usar o escopo local no elemento pai desses elementos.

Dependendo da sua necessidade, você pode declarar a variável com o mesmo nome ou com outros valores diferentes para elementos distintos:

#third-box {
    --bg-info: #00ff00;
    background-color: var(--bg-info);
}

#fourth-box {
    --bg-info: #0000ff;
   background-color: var(--bg-info);
}

No exemplo acima, as variáveis estão sendo declaradas em escopos diferentes (cada variável possui o seu próprio escopo), isso quer dizer que não são as mesmas variáveis.

---

Função var()

Como foi visto anteriormente nos exemplos, a função var() do CSS é usada para referenciar e aplicar os valores das variáveis CSS em diferentes propriedades ao longo do código:

:root {
    --text-dark: #0e0e0e;
}

.section-alert {
    color: var(--text-dark);
}

Mas, existe uma funcionalidade a mais que cerca essa função que é o valor de fallback que veremos logo a seguir, no qual pode ser útil ao trabalhar com Custom elements e Shadow DOM.

Valor de Fallback

O valor de fallback é um valor alternativo na função var() usado quando a variável fornecida não estiver definida ou for inválida.

A sintaxe é bem simples, a função var() aceita dois argumentos separados por uma vírgula, por tanto, o primeiro argumento é o nome da variável e caso for definido um segundo argumento ele será o valor de fallback que será usado no lugar da variável indisponível.

Como, por exemplo:

.section-alert {
    color: var(--text-dark, #202020);
}

No exemplo acima, se a variável text-dark não estiver disponível o valor #202020 será utilizado na propriedade.

Entenda que o valor de fallback não é usado para oferecer um valor alternativo para navegadores que não oferecem suporte a variáveis e sim, para navegadores que oferecem suporte a variáveis para que o mesmo possa escolher um valor diferente se a variável fornecida não estiver definida ou tiver um valor inválido.

Múltiplos Valores de Fallback

Como a função var() aceita apenas dois argumentos, caso você faça algo semelhante ao exemplo abaixo será considerado inválido:

.section-info {
    color: var(--text-dark, #202020, #454545);
}

Porém, você consegue fornecer mais de um valor de fallback, definindo no segundo argumento da função var() outra função var():

.section-info {
    color: var(--text-dark, var(--text-normal, #454545));
}

No exemplo acima, caso a variável --text-dark esteja indisponível será usado a variável --text-normal e que por sua vez, se também não estiver disponível será usado o valor de argumento #454545.

---

Valores Inválidos de Propriedades e Variáveis

Se você tentar atribuir um valor qualquer a uma propriedade normal que seja inválido, quando o navegador encontrar este valor ele simplesmente vai descartar e os elementos vão receber os valores que teriam se a declaração simplesmente não existisse.

Como, por exemplo:

div {
    background-color: orange;
}

div {
    background-color: 4rem;
}

No exemplo acima, foi especificado o valor de 4rem a propriedade background-color da segunda regra, esse valor definitivamente está incorreto já que essa propriedade e todas as propriedades do CSS aceita um determinado conjunto de valores válidos. O valor 4rem é comum e pode ser utilizado em propriedades como font-size, padding, margine etc.

Nesse caso, por conta do valor ser inválido para essa propriedade a declaração é descartada e o resultado é como se a regra não existisse ou seja, a primeira regra será aplicada e a cor de fundo da div ficará laranja.

Isso ocorre, porque o navegador segue as regras da cascata no processamento e renderização de estilos. Quando várias regras se aplicam ao mesmo elemento, o navegador precisa determinar qual delas deve prevalecer. Essas regras são brevemente avaliadas com base em sua especificidade e ordem de precedência (no caso do exemplo anterior pelo fato das duas regras terem seletores com a mesma especificidade foi levado em conta a ordem de precedência).

Por tanto, quando o navegador encontra uma declaração com um valor inválido para uma propriedade normal, ele entende que essa declaração não é válida e a descarta. O navegador então passa para a próxima declaração que seja possivelmente válida. Se não houver mais nenhuma declaração aplicável, o navegador utiliza o valor herdado ou inicial do elemento.

Isso garante, uma melhor experiência de navegação estável e confiável para os usuários, evitando que os elementos sejam exibidos de forma confusa ou não intencional quando não há declarações de estilo explícitas.

No entanto, as variáveis vão se comportar de maneira diferente em relação as propriedades normais. Quando o navegador encontra uma função var() referenciando uma variável inválida, o valor inicial ou herdado da propriedade é usado.

O exemplo abaixo é exatamente o do exemplo anterior, exceto que é usado uma variável:

:root {
    --bg-color: 4rem;
}

div {
    background-color: orange;
}

div {
    background-color: var(--bg-color);
}

Nesse caso, o valor 4rem da variável é inválido para a propriedade background-color da última regra e a ordem de precedência não será levada em consideração aqui, ou seja, a cor orange da segunda regra não será aplicada. Como a propriedade background-color não é herdável, o navegador aplicará o valor inicial dessa propriedade, que é transparente ou rgba(0, 0, 0, 0).

---

Conclusão

Essas são as variáveis CSS que podem ser usadas em diversos momentos e situações para fornecer maior flexibilidade e reutilização de código. Portanto, se você precisar definir valores comuns, trabalhar com responsividade ou criar temas e personalização, pode ser muito útil utilizar variáveis CSS. Elas não apenas simplificam o processo de manutenção do código, mas também tornam o design mais consistente e fácil de ajustar conforme necessário. Adotar variáveis CSS é uma prática inteligente que pode elevar a eficiência e a qualidade de seus projetos de desenvolvimento web.

以上是透過建立動態樣式來提高 CSS 程式碼的可讀性和可維護性的詳細內容。更多資訊請關注PHP中文網其他相關文章！