Use inline CSS variables for smart layout efficiency!

Author: Ahmad shaded
Translator: Front-end Xiaozhi Source: sitepoint

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

There are situations where I need an easy way to create grid layouts. For example, quickly draw a five-column grid without modifying CSS every time I change my mind. In this article, let's explore some use cases together and consider how to implement and use them.

how it works

Before diving into these concepts, let's review the basics of CSS variables, which we might also call "custom properties".

All major browsers support CSS variables, here is the support for each browser:

If you want to define a CSS variable to be a global variable, you need to add it to the :root declaration ( :root is equivalent to <html> ). If the variable is specific to a component, it can be defined within the group declaration.

In the example below, I define a global variable --size which is used for the width and height of the square element.

 :root {
    --size: 50px;
}

.square {
    width: var(--size);
    height: var(--size);
}

What if --size is not defined? CSS supports defining default variables or fallback variables in case the passed variable is invalid.

var(--size, 10px) in the example below. If --size is invalid, the width and height values will be 10px .

 .square {
    width: var(--size, 10px);
    height: var(--size, 10px);
}

In addition to this, CSS variables can also be used in inline CSS styles. E.g

HTML

 <div class="elem" style="--background: red;"></div>

CSS

 .elem {
    background: var(--background);
}

Next, we use these concepts and demonstrate some examples.

Everyone said that there is no project to write on the resume, so I helped you find a project, and also included a [Building Tutorial] .

CSS Grid Example

Sidebar and main content

图片描述

In this design, I use CSS Grid for the following:

Sidebar and Main Menu
form item
three-column layout

The width of the sidebar is fixed and the main content changes. Suppose the width of the sidebar is 240px .

1. Sidebar and Main Menu

Html

 <div class="o-grid" style="--columns: 240px 1fr">
    <aside></aside>
    <main></main>
</div>

Html

 .o-grid {
    display: grid;
    grid-template-columns: var(--columns);
}

2. Form Items

By design, there are two columns per row, and the html structure is as follows:

Html

 <div class="o-grid" style="--columns: 1fr 1fr">
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
</div>

CSS

 .o-grid {
    display: grid;
    grid-template-columns: var(--columns);
}

3. Three-column layout

In the example below, I've added --repeat-number：3 and --gap：8px as inline CSS. These variables will be added to the o-grid class and the settings of the grid will be based on these variables.

HTML

 <div class="o-grid" style="--repeat-number: 3; --gap: 8px;">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

 .o-grid {
  display: grid;
  grid-template-columns: repeat(var(--repeat-number), 1fr);
  grid-gap: var(--gap, 0);
}

I like to add default values to CSS variables in case the variable is not set. In the above code, I used var(--gap, 0) , if the user does not provide --gap variable, its default value will be 0 .

Dynamic grid item: `minmax`

To me, this is a widely used use case and is very important. I use Grid minmax a lot, but when I use it on multiple pages, I have a problem.

Let's take a basic example without CSS variables.

In CSS, I use minmax to define a minimum width for each grid item 250px .

CSS

 .o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);
  grid-gap: 16px;
}

Now, what if the design requires grid items to be at least 300px in width? Do I need to create a version like the following?

 .o-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

Imagine there are five different grids, each with different item widths, so the above is not the correct solution.

Using CSS variables, I can do the following

 .o-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr);
    grid-gap: var(--gap);
}

In HTML, you can set CSS variables on tags:

 <!-- Example 1 -->
<div class="o-grid" style="--item-width: 250px;">
     <div></div>
     <div></div>
     <div></div>
</div>

<!-- Example 2 -->
<div class="o-grid" style="--item-width: 350px;">
     <div></div>
     <div></div>
     <div></div>
</div>

<!-- Example 3 -->
<div class="o-grid" style="--item-width: 150px;">
     <div></div>
     <div></div>
     <div></div>
</div>

Example source code: https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

Everyone said that there is no project to write on the resume, so I helped you find a project, and also included a [Building Tutorial] .

Flexbox example

In the example, there is an article title with author name and tags. The way these are laid out on the page is dynamic, so a way to quickly switch between these layouts is needed.

HTML

 <div class="article-header">
    <h2>Article title</h2>
    <div class="article-header__meta" style="--justify: space-between;">
        <p>By Ahmad Shadeed</p>
        <p>Published under: CSS, Design</p>
    </div>
</div>

CSS

 .article-header__meta {
    display: flex;
    justify-content: var(--justify);
}

With it I can adjust the inline style to change the value to another keyword. I find this useful when doing quick prototyping or even making a website.

button

button width

CSS variables also apply to button elements. Suppose there is a form with two input fields and a button.

My purpose is to control the width of the button by using an inline CSS variable. Sometimes a button should occupy the 100% width of its parent control.

html

 <button class="c-button" style="--width: 100%;">Submit</button>

css

 .c-button {
    /* Other styles */
    width: var(--width, initial);
}

button color

Another useful use is when there are ghost buttons (outline buttons). The color of the button can be any color, and by using CSS variables, the color can be easily changed.

HTML

 <button class="c-button c-button--ghost" style="--color: #5e35b1;">Save Edits</button>
<button class="c-button c-button--ghost" style="--color: #ec2828;">Delete</button>

CSS

 .c-button--ghost {
  /* Other styles */
  background: transparent;
  color: var(--color, #000);
  border-color: currentColor;
}

CSS variables are also suitable for hover effects. On hover, the button background will change to a solid color and the font color will be white.

图片描述

Example source code: https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995

profile picture

Each character is a different size, which is great to work around with CSS variables. Suppose there are four user avatars of different sizes.

In CSS, the following styles are defined:

 .c-avatar {
  display: inline-block;
  margin-right: 2rem;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.2);
}

By using the Calc() function, I can pass a --size variable that will be multiplied by a base width value, defined in the HTML --size variable:

 <img src="user.jpg" alt="" class="c-avatar" style="--size: 1">
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2">
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3">
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4">

Example source code: https://codepen.io/shadeed/pen/cdaac5ff667e1f7d9c8241655441f10d

Original: https://css-tricks.com/patterns-for-practical-css-custom-properties-use/
The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

Use inline CSS variables for smart layout efficiency!

how it works

CSS Grid Example

Sidebar and main content

Dynamic grid item: `minmax`

Flexbox example

button

button width

button color

profile picture

comminicate

王大冶

引用和评论

6 款“看起来像开挂”的 AI Agents

如何在仓库中添加只对自己生效的.gitignore规则？

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

不要再这样编写 async/await

EventLoop事件循环机制(浏览器和Node EventLoop)

微信授权全链路打通指南

angular 19 学习记录

Use inline CSS variables for smart layout efficiency!

how it works

CSS Grid Example

Sidebar and main content

Dynamic grid item: minmax

Flexbox example

button

button width

button color

profile picture

comminicate

王大冶

引用和评论

6 款“看起来像开挂”的 AI Agents

如何在仓库中添加只对自己生效的.gitignore规则？

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

不要再这样编写 async/await

EventLoop事件循环机制(浏览器和Node EventLoop)

微信授权全链路打通指南

angular 19 学习记录

Dynamic grid item: `minmax`