動的スタイルを作成して CSS コードの可読性と保守性を向上させる

CSS 変数を使用して、ますます洗練され効率的な Web アプリケーションを作成する方法を学びます。

Web プロジェクトが成長し、ますます複雑になるにつれて、最終的には数千行にわたる広範な CSS コードが使用されることが非常に一般的となり、このコード内ではプロパティに割り当てられる値の繰り返しの頻度が高くなる可能性が非常に高くなります。大きいものも。

以下の例でわかるように、color プロパティとbackground-color プロパティに同じ値の繰り返しがあります。

.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 変数を使用すると、値を 1 か所に保存し、他のいくつかの場所で参照できるようになります。

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 プロパティはドキュメント内でスタイルを定義した結果が同じであり、構文と使用法という点では類似していますが、以下で説明するように、互いに完全に異なる機能を持っていることがわかります。

変数識別子

変数は、2 つのハイフン (--) の後に大文字と小文字を区別する変数の名前が続き、最後に変数に有効な値を指定することで簡単に識別できます。

--bg-secondary: #00ff00;

上記の例でわかるように、変数の追加の利点の 1 つは、変数に定義する名前がカスタムで比較的セマンティックであることです。これは、 --bg-secondary 識別子が変数として理解しやすいことを意味します。 16 進コード #00ff00.

をプロパティの値として直接挿入する代わりに、メイン (またはプライマリ) 背景色に関連したセカンダリ背景色を設定します。

プロパティでは、変数と比較して、名前の先頭にハイフンを使用することはできません。これは、ハイフンは単語を font-size、text-align などの複合プロパティに区切るために使用されるためです。例外として、名前の先頭に 1 つのハイフンを使用するプレフィックス -webkit、-moz、-ms、-o を持つ特定のプロパティがあります。これらのプロパティは、まだ完全に標準化されていない、または標準化されていない実験的な機能に使用されます。公式の CSS 仕様。

--text-selected: none;

user-select: none;

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

このようにして、ハイフンの有無にかかわらず、プロパティの目的を区別できます。

変数の値

変数に割り当てることができる値は、シーケンスにプロパティで許可されていない値が含まれていない限り、1 つ以上の値のシーケンスであるプロパティ値に対応する値と同じです。は単に無効な値です:

--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 中国語 Web サイトの他の関連記事を参照してください。