css in js

最新推荐文章于 2024-08-20 16:10:43 发布

张小桌

最新推荐文章于 2024-08-20 16:10:43 发布

阅读量389

点赞数

分类专栏： webpack js 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_43324909/article/details/105543555

版权

js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

webpack

5 篇文章 0 订阅

订阅专栏

css in js

css in js 的核心思想是：用一个js对象来描述样式，而不是css样式表
例如下面的对象就是一个用于描述样式的对象：

const styles = {
    backgroundColor: "#f40",
    color: "#fff",
    width: "400px",
    height: "500px",
    margin: "0 auto"
}

由于这种描述样式的方式根本就不存在类名，自然不会有类名冲突
至于如何把样式应用到界面上，不是它所关心的事情，你可以用任何技术、任何框架、任何方式将它应用到界面。

后续学习的vue、react都支持css in js，可以非常轻松的应用到界面

css in js 的特点：

绝对冲突的可能：由于他根本就不存在类名，所以绝对不可能出现类名冲突
更加灵活：可以充分利用js语言的灵活特点，用各种招式处理样式
应用更加广泛：只要支持js语言，就可以支持css in js，因此，在一些用JS语言开发移动端应用的时候非常好用，因为移动端应用很有可能并不支持css
书写不便：书写样式，特别是公共样式的时候，处理起来不是很方便
在页面中增加了大量冗余内容：在页面中处理css in js时，往往是将样式加入到元素的style属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码
例

common.js代码
export const redBg = {
    backgroundColor : "#008c8c",
    color : "#f40"
}
export function border (width = 2, color = "#f20"){
    return {
        border:`${width}px solid ${color}` 
    }
}
util.js代码
/**
* 给某个dom元素应用一个样式
* @param {*} dom dom元素
* @param {*} styles 样式对象
*/
export function applyStyles(dom, ...styles) {
    let targetStyles = {}; //最终合并的样式对象
    for (const style of styles) {
        targetStyles = {
            ...targetStyles,
            ...style
        }
    }

    for (const key in targetStyles) {
        const value = targetStyles[key];
        dom.style[key] = value;
    }
}

index.js代码
import {applyStyles} from "./css/util.js"
import { border ,redBg} from "./css/common.js"
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");

const styles = {
    width: "400px",
    height: "500px",
    margin: "0 auto"
}

applyStyles(div1, styles, border(), redBg)
applyStyles(div2, styles, border(5, "green"))
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script src="./scripts/index.js" type="module"></script>
</body>
</html>