mozilla

Revision 334403 of Using CSS variables

  • Revision slug: CSS/Using_CSS_variables
  • Revision title: Using CSS variables
  • Revision id: 334403
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment
Tags: 

Revision Content

{{draft}}{{SeeCompatTable}}

CSS Variables are entities defined by authors, or users, of Web pages to contain specific values throughout a document. They are set using custom properties and are accessed using a specific functional notation var().

Problems to solve

When building large sites, authors have been facing a maintainability challenge. In such Web sites, the size of the CSS is quite large and a lot of information in it is written at a multiple places. For example, maintaining a coherent color scheme throughout a document, implies to reuse a few color values at numerous positions in the CSS files. Altering the scheme, whether it is a tweaking a single color or completely rewriting is therefore a complex task, needing precision as a single find and replace often isn't enough.

The situation is especially worse with frameworks where changing colors need editing the framework itself. Preprocessors like LESS or SASS are quite helpful in these situation, but increasing the complexity of the creation system, by adding an extra processing step.

A second advantage of these variables is that the name itself contains semantical information, allowing a CSS files to be easier to read and understand: main-text-color is easier to understand than the reuse of #00ff00 throughout the text, especially if this very same color is also used in another context.

How CSS Variables can help

In imperative programming languages, like Java, C++ or even JavaScript, the state can be tracked through the notion of variables. Variables are symbolic names associated with a given value, that can vary with the time.

In declarative language like CSS time-changing values are not common and the concept of variables is pretty uncommon.

Nevertheless, via CSS introduces the notion of cascading variables in order to contribute to solve the maintainability challenge. It allows to symbolically refer to a value throughout the CSS tree.

What are CSS Variables

CSS Variables consist in two groups of entities:

  • variables, that is an association between an identifier and a value that can be used instead of any regular values, using the var() functional notation: var(example-variable) returns the value of the example-variable value.
  • custom property, that are special properties of the form var-* where * represent the variable name, that are used to define the value of a given variable: var-example-variable: 20px; is a CSS declaration, using the custom var-example-variable property to set the value of the CSS variable example-variable to 20px.

Custom properties are similar to regular properties: they are subject to the cascade and does inherit their value from their parent if not redefined.

First steps with CSS Variables

Let's start with this simple CSS that colors elements of different classes with the same color:

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

applied to this html:

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

leads to:

{{EmbedLiveSample("sample1",600,180)}}


There are a lot of repetition in the css: the background color, brown, is set at numerous positions. If for some projects, it is possible to solve this repetition problem by declaring it higher in the hierarchy and use inheritance, it is not always possible. By declaring a variable on the ::root pseudo-element and using it solves the problem.

::root {
  var-main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color:  var(main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color:  var(main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color:  var(main-bg-color);
}

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>
leads to the very same result.

Inheritance of CSS Variables

Custom properties do inherit. It means that if no values is set for a custom property on a given element, the value of its parent is reused:

<div class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

with the following CSS:

.two { var-test: 10px; }
.three { var-test: 2em; }

In that case, the result of var(test) are:

  • for the class="two" element: 10px
  • for the class="three" element: 2em
  • for the class="four" element: 10px (inherited from its parent)
  • for the class="one" element: invalid value, which is the default value of any custom properties.

Revision Source

<div>
  {{draft}}{{SeeCompatTable}}</div>
<p><strong>CSS Variables</strong> are entities defined by authors, or users, of Web pages to contain specific values throughout a document. They are set using custom properties and are accessed using a specific functional notation <code>var()</code>.</p>
<h2 id="Problems_to_solve">Problems to solve</h2>
<p>When building large sites, authors have been facing a maintainability challenge. In such Web sites, the size of the CSS is quite large and a lot of information in it is written at a multiple places. For example, maintaining a coherent color scheme throughout a document, implies to reuse a few color values at numerous positions in the CSS files. Altering the scheme, whether it is a tweaking a single color or completely rewriting is therefore a complex task, needing precision as a single find and replace often isn't enough.</p>
<p>The situation is especially worse with frameworks where changing colors need editing the framework itself. Preprocessors like LESS or SASS are quite helpful in these situation, but increasing the complexity of the creation system, by adding an extra processing step.</p>
<p>A second advantage of these variables is that the name itself contains semantical information, allowing a CSS files to be easier to read and understand: <code>main-text-color</code> is easier to understand than the reuse of <code>#00ff00</code> throughout the text, especially if this very same color is also used in another context.</p>
<h2 id="How_CSS_Variables_can_help">How CSS Variables can help</h2>
<p>In imperative programming languages, like Java, C++ or even JavaScript, the state can be tracked through the notion of <em>variables</em>. Variables are symbolic names associated with a given value, that can vary with the time.</p>
<p>In declarative language like CSS time-changing values are not common and the concept of variables is pretty uncommon.</p>
<p>Nevertheless, via CSS introduces the notion of cascading variables in order to contribute to solve the maintainability challenge. It allows to symbolically refer to a value throughout the CSS tree.</p>
<h2 id="What_are_CSS_Variables">What are CSS Variables</h2>
<p>CSS Variables consist in two groups of entities:</p>
<ul>
  <li>variables, that is an association between an identifier and a value that can be used instead of any regular values, using the <code>var()</code> functional notation: <code>var(example-variable)</code> returns the value of the <code>example-variable</code> value.</li>
  <li>custom property, that are special properties of the form <code>var-*</code> where * represent the variable name, that are used to define the value of a given variable: <code>var-example-variable: 20px</code><code>;</code> is a CSS declaration, using the custom <code>var-example-variable</code> property to set the value of the CSS variable <code>example-variable</code> to <code>20px</code>.</li>
</ul>
<p>Custom properties are similar to regular properties: they are subject to the cascade and does inherit their value from their parent if not redefined.</p>
<h2 id="First_steps_with_CSS_Variables">First steps with CSS Variables</h2>
<p>Let's start with this simple CSS that colors elements of different classes with the same color:</p>
<div id="sample1">
  <pre class="brush:css; highlight:[3,20,26,32]">
.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

</pre>
  <p>applied to this html:</p>
  <pre class="brush:html">
&lt;div&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="one"&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;input class="three"&gt;
&nbsp;&nbsp;&nbsp; &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
&lt;/div&gt;
</pre>
  <p>leads to:</p>
  <p>{{EmbedLiveSample("sample1",600,180)}}</p>
</div>
<p><br />
  There are a lot of repetition in the css: the background color, brown, is set at numerous positions. If for some projects, it is possible to solve this repetition problem by declaring it higher in the hierarchy and use inheritance, it is not always possible. By declaring a variable on the ::root pseudo-element and using it solves the problem.</p>
<div id="sample2">
  <pre class="brush:css; highlight:[2, 7, 24,30,36]">
::root {
  var-main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color:  var(main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color:  var(main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color:  var(main-bg-color);
}

</pre>
  <div style="display:none">
    <pre class="brush:html">
&lt;div&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="one"&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;input class="three"&gt;
&nbsp;&nbsp;&nbsp; &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
&lt;/div&gt;
</pre>
  </div>
  leads to the very same result.<br />
  <h2>Inheritance of CSS Variables</h2>
  <p>Custom properties do inherit. It means that if no values is set for a custom property on a given element, the value of its parent is reused:</p>
  <pre class="brush: html">
&lt;div class="one"&gt;
  &lt;div class="two"&gt;
    &lt;div class="three"&gt;
    &lt;/div&gt;
    &lt;div class="four"&gt;
    &lt;/div&gt;
  &lt;div&gt;
&lt;/div&gt;</pre>
</div>
<p>with the following CSS:</p>
<pre class="brush: css">
.two { var-test: 10px; }
.three { var-test: 2em; }
</pre>
<p>In that case, the result of <code>var(test)</code> are:</p>
<ul>
  <li>for the <code>class="two"</code> element: <code>10px</code></li>
  <li>for the <code>class="three"</code> element: <code>2em</code></li>
  <li>for the <code>class="four"</code> element: <code>10px</code> (inherited from its parent)</li>
  <li>for the <code>class="one"</code> element: <em>invalid value</em>, which is the default value of any custom properties.</li>
</ul>
Revert to this revision