foreword
In the modern front-end field, the skinning function has gradually become the standard for almost all applications, especially after the dark night mode is promoted, the skin function has officially entered the public's field of vision. Similarly, in the web field, especially in the background management system, the skin As a result, the function has almost become standard, and it happens that the things that are being done recently also include such a set of mechanisms~
So today, I will actually talk about the advantages and disadvantages of multiple skin function implementation schemes in the web. The schemes in this article are almost from the blog posts of the big guys. The following content is only analyzed from a personal perspective and shared after practice. Each scheme itself is not There are no advantages and disadvantages, only various advantages and disadvantages are brought out according to the use environment ;
principle
First of all, let's talk about the principle of skin peeling. After I understand it, there are nothing more than two types:
- Style override, in simple terms, is to use the priority of CSS weights, and high-weight styles override low-weight styles, making the position, color, etc. changed;
- Variable substitution, which is to make full use of the variable mechanism of SCSS, LESS, or CSS, and use the difference in the value of the variable to make a substitution, so that the function of the skin changes;
In fact, I personally feel that there is no essential difference between the two;
skinning program
The first: CSS style override
In this solution, the function of CSS itself can be used, and SCSS, LESS, etc. are not used (of course, SCSS and LESS can definitely be done, and the function of CSS preprocessor is indeed based on CSS. It has evolved a lot, just say that this way can be achieved with CSS)
Example
The rough sample code is as follows, taking Vue as an example:
<!-- 这是一个登陆界面的代码 -->
<template>
<div class="page-account" :class="theme">
<Login @on-submit="handleSubmit" class="login-conatiner">
<UserName name="username" value="admin" class="login-username" />
<Password name="password" class="login-password" value="admin" enter-to-submit />
<div class="page-account-auto-login login-conatiner-light">
<Checkbox v-model="autoLogin" size="large">{
{
$t("page.login.remember")
}}</Checkbox>
<a href="">{
{
$t("page.login.forgot") }}</a>
</div>
<Submit>{
{
$t("page.login.submit") }}</Submit>
</Login>
</div>
</template>
As shown in the code, a class is bound to the code. The value of the class is the style name , which comes from vuex or the calculated value of the current interface, which is the main style name of the skin, and then the CSS code corresponding to the class name is written. , roughly as follows
<style scoped>
/** 白天模式 */
.light .login-conatiner {
background: #ffffff;
color: #333333;
font-size: 1rem;
}
.light .login-username {
background: #ffffff;
color: #333333;
font-size: 1rem;
}
.light .login-password {
background: #ffffff;
color: #333333;
font-size: 1rem;
}
/** 夜晚模式 */
.dark .login-conatiner {
background: #333333;
color: #ffffff;
font-size: 1rem;
}
.dark .login-username {
background: #333333;
color: #ffffff;
font-size: 1rem;
}
.dark .login-password {
background: #333333;
color: #ffffff;
font-size: 1rem;
}
</style>
When the skin name in Vuex changes, the value of the corresponding class name under the skin name will change accordingly, and its style will overwrite the original style, thus achieving the effect of skinning;
advantage
The advantages of this skin scheme are very obvious to me, that is, the modification is convenient and the structure is very clear. Wherever you want to modify, you can modify it directly. After all, excellent code should not only consider various factors such as code amount, principle, maintainability, etc., but also Considering the difficulty of getting started, its simple implementation, even a new person who takes over the project, can start adding and modifying directly after being a little familiar with it;
shortcoming
Multiple sets of skins will have multiple sets of style sheets, the amount of code is large, and the development efficiency is relatively low, and if it is developed by multiple people, it may be agreed at the beginning. The most suitable project for this scheme is actually small and medium-sized projects. , One or two front-end development communication costs are low;
optimization
It can definitely be optimized in the actual project. For example, uniformly define the color as a variable. In fact, not only LESS and SASS, but also variable functions in CSS3:
:root {
--theme-light-bg: #ffffff; // 背景色
--theme-light-color: #333333; // 字体色
--theme-light-border: #e1e1e1; // 边框色
}
In this way, the colors can be managed in a unified way. To add a set of skins in the future, you only need to add a set of colors corresponding to the skins , which is more convenient. It is also more convenient to manage in LESS or SASS . These preprocessors not only It only provides variable functions, but also provides functions of mixing, nesting, and even functions... Once these are used, in fact, I personally think this solution is a very feasible function in actual projects;
The second: variable substitution
In fact, this method feels similar to the first one to a certain extent. The biggest difference is that the first one uses the weight to cover, while the second one is more direct to set . There is actually only one core function:
// 设置CSS变量值
document.body.style.setProperty(变量名，变量值);
This function can set the value of the corresponding CSS variable on the root node. As long as we change this value, all places that reference this value will change, so as to achieve the effect of skinning;
Example
For example, we set a set of CSS variables
// 默认值
:root {
--theme-bg: #fff;
--theme-color: rgb(51, 50, 50);
--theme-size: 1rem;
}
In subsequent projects, we all use this set of variables
<style scoped>
.login-conatiner {
background: var(--theme-bg);
color: var(--theme-bg);
font-size: var(--theme-size);
}
.login-username {
background: var(--theme-bg);
color: var(--theme-bg);
font-size: var(--theme-size);
}
.login-password {
background: var(--theme-bg);
color: var(--theme-bg);
font-size: var(--theme-size);
}
</style>
It's almost like this. Variables are used uniformly when actually writing styles. After that, there is a js file for processing styles.
const light = 'rgb(51, 50, 50)'
const dark = '#d6d6d6'
/**
* 获取一组皮肤变量
* @param {Boolean} state 样式判断条件
*/
function getTheme(state) {
return {
"theme-bg": state ? light : dark,
"theme-color": state ? light : dark,
"theme-size": state ? light : dark,
};
}
/**
* 设置变量值
* @param {Boolean} state 样式判断条件
*/
function setTheme(state = true) {
const theme = getTheme(state);
Object.keys(theme).forEach((key) => {
document.body.style.setProperty(`--${
key}`, themeMap[key]);
});
}
In this js file, we can define get and set functions. The get function mainly obtains the value of the skin according to the parameters, and the set function is mainly responsible for setting the value of the variable on the root node;
once the skin switching function is triggered, it can be directly passed through The setTheme function sets the variable value of the root node to achieve the effect of skinning;
advantage
Clear adjustment, no need to write a lot of styles, only need to write a few colors, the rest are automatically filled according to the color value;
shortcoming
Since it is a new property after CSS3, the compatibility is still relatively poor, and IE does not directly support it, as follows:
optimization
The optimization of this scheme is mainly in two directions. The first is to access LESS or SASS, and use the characteristics of these preprocessors to better realize the reusability, readability, maintainability, etc. of CSS code;
The other is to solve the compatibility problem. Here is a tool: css-vars-ponyfill , npm address: https://www.npmjs.com/package/css-vars-ponyfill , you can search for the specific usage, one Lots of tutorials;
refer to
Teacher Ruan Yifeng: " CSS Variables Tutorial ";
MDN: " Using CSS Custom Properties (Variables) ";
summary
Generally speaking, the direction of skinning is basically based on these two schemes, but some of the implementation methods use the CSS preprocessor to further improve its encapsulation and practicability, and the excellent extension In fact, there are still many landing schemes. For example, the skin implementation in ElementUI is very, very powerful, and it is worth learning;