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 VIC（Var(), 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>
.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);
}
Display example
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.
- IE not supported - 2019/9 (Can I use - CSS variables)
- The style attribute is enlarged
- HTML and CSS cannot be separated
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)
}
- 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);
}
> * 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.
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>
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>
p {
font-size: var (-font-size, 20px);
}
Display example
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.
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; * /
}
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>
div {
font-size: var (-sample-val); / * treated as font-size: 100px; * /
}
Supplement: About var()
var() is a function that calls a custom property and can specify up to the second argument.
p {
color: (--some-color, black); / * If there is no --some-color, it will be color: black; * /
}
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.
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).
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)