DEV Community

loading...
Cover image for CSS design method using CSS Variables - VIC

CSS design method using CSS Variables - VIC

ttakatech profile image T.Taka.Tech ・5 min read

Introduction

This design method is to break away from structuring the class name. I personally thought it and it is currently a poorly proven method. Please note.

For convenience, this design method is referred to as VICVar(), Inline, Custom property) in this paper.

VIC can also be applied to some development methods such as atomic design and components, etc.

I hope it will be helpful for somebody. Also, if such a design method already exists, I would appreciate it if you could teach me.

Basic design of VIC

There are three important elements of VIC.

  • var ()
  • Inline description (style attribute)
  • Custom property

For the explanation of each function, refer to the following "Supplement".

Rather than styling by class name structuring like BEM, styling is done by inline description (style attribute) scope and custom properties.

A specific example is as follows.

<body>
<Div class = "grid" style = "-tmp-col: 1fr 3fr 10fr 1fr; --tmp-row: 10vh 80vh 10vh">
   <div class = "header" style = "-col: 1/5; --row: 1/1">
    Header
   </ div>
   <div class = "side-bar" style = "-col: 2; --row: 2;">
     side-bar
   </ div>
   <div class = "main" style = "--col: 3; --row: 2;">
     main
   </ div>
   <div class = "footer" style = "-col: 1/5; --row: 3;">
    Footer
   </ div>
 </ div>
</ body>
Enter fullscreen mode Exit fullscreen mode
.grid {
  display: grid;
  grid-template-columns: var (-tmp-col, auto);
  grid-template-rows: var (-tmp-row, auto);
}

.grid> * {
  grid-column: var (-col, auto);
  grid-row: var (-row, auto);
}
Enter fullscreen mode Exit fullscreen mode

Display example
Alt Text

In this way, it was a single CSS, but different styles were applied by custom properties.
Conventionally, CSS selectors for headers, CSS selectors for sidebars, etc. were required, but VIC does not need them. If there is only one VIC-compliant CSS selector, it can be supported all.

The benefits of VIC are as follows.

  • DRY
  • Highly common CSS
  • Simplify CSS
  • CSS file size reduction
  • CSS code reduction
  • HTML class name reduction

In addition, it works well with CSS scoped libraries like React and Vue.
The disadvantages are as follows.

However, I don't think the last it is not a big problem.
With traditional CSS design, styles are divided by adding class names and structuring.
On the other hand, in VIC, it is divided by a few class name and style attribute. VIC takes more time and amount of description, but if the standard value (second argument of var ()) is set appropriately, the style attribute to be written will decrease, and it will not be a big task to that extent.

Above all, the benefits of simplified and highly shared CSS are greater.

Although this VIC has great benefits, I think now that VIC should not be applied in addition to the layout.
VIC significantly increases the style attribute at the cost of reducing class names and CSS.
If all styles are done with VIC, there is no doubt that HTML becomes spaghetti due to the enlarged style attribute.

In order to balance the enlargement of the class name and CSS and the enlargement of the style attribute, I think that VIC should be used only layout.

VIC compliant CSS design

The following describes how to write CSS suitable for VIC.

Basic

.grid {
 display: var (-grid-display, grid)
}
Enter fullscreen mode Exit fullscreen mode
  • Custom property in the first argument of var ()
  • The standard value for the second argument of var ()
  • Enter the most frequent value for the standard value

The setting of the standard value is particularly important. If you set a value that is not used frequently, you will need to correct it with the style attribute each time.

Use CSS selector

.grid {
 display: grid;
}

.grid > * {
 grid-column: var (-col, auto);
 grid-row: var (-row, auto);
}
Enter fullscreen mode Exit fullscreen mode

> * is a selector that points to all the child elements directly below.

By setting the class name only for the parent element (wrapper) of CSS grid and Flexbox and specifying the child element with the selector. It makes us not necessary to describe the class name of the child element.

Supplement

Supplement: What is inline description?

This is a way to define CSS with HTML style tags and style attributes.

MDN Web docs - style

This way HTML and CSS cannot be separated, it was considered bad for CSS design.
Even when the design is changed, the style tags and style attributes are rewritten. It was a bad task.

<body>
 <div style = "color: red;"> <!-Using style attribute->
  Hello World
 </ div>
 <div class = "blue-text">
  Hello World
 </ div>
 <style> / * Using style tag * /
  .blue-text {
    color: blue;
  }
 </ style>
</ body>
Enter fullscreen mode Exit fullscreen mode

Within the inline description, the scope of the style attribute is within the described HTML tag.
VIC uses this scope to separate styling.

<body>
  <p style = "-font-size: 10px;">
    small
  </ p>
  <p>
    Medium
  </ p>
  <p style = "-font-size: 50px;">
    LARGE
  </ p>
</ body>
Enter fullscreen mode Exit fullscreen mode
p {
 font-size: var (-font-size, 20px);
}
Enter fullscreen mode Exit fullscreen mode

Display example
Alt Text

In this way, multiple styling is possible with a single CSS.

Supplement: What are custom properties?

This function allows you to declare variables with CSS.

MDN Web docs - CSS Variables

Code example: When-is added to the beginning of a sentence, it is defined as a variable and can be called with var().

: root {
 --sample-val: 10px; / * Declare variable * /
}

div {
 font-size: var (-sample-val); / * treated as font-size: 10px; * /
}
Enter fullscreen mode Exit fullscreen mode

Code example: It is also possible to write inline from HTML through the style attribute.

<body>
 <div style = "-sample-val: 100px;"> <!-variable declaration->
  Hello World
 </ div>
</ body>
Enter fullscreen mode Exit fullscreen mode
div {
 font-size: var (-sample-val); / * treated as font-size: 100px; * /
}
Enter fullscreen mode Exit fullscreen mode

Supplement: About var()

var() is a function that calls a custom property and can specify up to the second argument.

MDN Web docs - var()

p {
 color: (--some-color, black); / * If there is no --some-color, it will be color: black; * /
}
Enter fullscreen mode Exit fullscreen mode

If the first argument (--some-color) is not defined, this second argument (black) is used as the value.

For usage, set the custom property in the first argument and set the reference value in the second argument.
Basically, the reference value of the second argument is referenced, and the custom property is passed in-line in the special display part.
This makes it possible to display different items while sharing CSS.

Supplement: How to try

iota is recommended as a library to try out VIC.

iota

This is a library using CSS grid, and it is possible to create a rich layout with only 584 bytes. It has the same design as the VIC (or rather the original material) and I think it is perfect for trying it out.

I also created a VIC library that supports flex and position, etc. (under development).

lonely-css - ttakatech

Currently it supports Flexbox,CSS grid,position,align/gap.
The document is still in production, but if you check the linked MDN and the comments in the _variable.scss file, you can understand to some extent. The configuration is very close to iota.

Please give me your opinion!

Discussion (0)

pic
Editor guide