Unlocking the Power of Custom CSS Properties

What are Custom CSS Properties?

Custom CSS properties, also known as CSS variables, have been a part of the CSS Variables Module since 2012. Although they were initially introduced as “variables,” they were later renamed to “custom properties” to reflect their broader capabilities.

A custom CSS property is defined by two leading dashes followed by an identifier of your choice, like so:

--my-custom-property: value;

They can be used like regular CSS properties and can be defined inside any CSS block. The value of a custom property can be any expression that would be valid for a CSS property.

The Problem with Custom Properties

One of the limitations of custom properties is that they don’t have any inherent meaning or behavior. When you define a custom property, it won’t automatically trigger any specific behavior or layout changes. However, you can use JavaScript to retrieve the value of a custom property and use it to program custom behavior.

Where Custom Properties Shine: Frameworks

Custom properties become particularly useful when working with frameworks. In this context, custom properties can serve as an API to control the behavior of the framework. This allows developers to modify the behavior of the framework without having to dig into the underlying code.

Case Study: Responsive Animated UIs with layerJS

LayerJS is a framework for creating animated layered user interfaces with simple HTML markup. It provides a universal concept for defining common UI patterns, such as menus, sliders, and accordions. By using custom CSS properties, developers can control the behavior of layerJS in a responsive way.

Creating a Side Menu with layerJS

To demonstrate the power of custom properties, let’s create a side menu using layerJS. We’ll define two layers: one for the menu and one for the content. We’ll then use custom properties to control the behavior of the menu, making it responsive and animated.

/* Define the layers */
.menu {
  --layer-id: menu;
}

.content {
  --layer-id: content;
}

We’ll use custom properties to control the layout and behavior of the menu, making it seamless and efficient.

Making it Responsive

To make the menu responsive, we’ll define CSS clauses for mobile screens with different parameters. We’ll use custom properties to control the layout and behavior of the menu.

/* Mobile screen styles */
@media only screen and (max-width: 768px) {
 .menu {
    --menu-width: 200px;
    --menu-height: 100vh;
  }
}

/* Tablet screen styles */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
 .menu {
    --menu-width: 300px;
    --menu-height: 50vh;
  }
}

By using custom properties, we’ve decoupled the behavior of our application from the underlying code, making it easier to modify and maintain.

Whether you’re working with layerJS or another framework, custom properties are definitely worth exploring to unlock their full potential in creating responsive web designs.