css背景介绍

CSS(Cascading Style Sheets), 前端DSL语言，是当下多元化时代的必不可缺的产物，早在CSS未出现之前，只有html元素标签，每个html元素都会有自己独立的样式，比如table标签，但是随着时间推移，对于页面展示样式要求越来越高，规范只能通过不断的插入新的标签去做多元化样式处理，但是依然解决不了实质问题，此时CSS被提出并且受到了开发者的广泛欢迎，它能够精确的描述元素样式，并且提供了强大的功能，例如GPU加速，动画过渡等，下面介绍下CSS的用法

递进CSS

常规的写法

  .head {
    color: red;
    width: 100px;
    height: 100px;
  }

以上写法是一个比较常规的写法,但是有几个缺陷:

无法适配响应式布局，需要写媒体查询以及rem等样式
无法动态修改head样式

内联样式

  const head = document.getElementsByClassName('head')[0]
  head.style.width = '200px'

优势:

解决了上述常规写法的动态修改问题
样式优先级仅低于!important

劣势:

需要通过javascript来操控html元素，性能上有损耗
内联样式只是针对于单个元素, 若是想要设置多个, 需要重复操作, 复用性不强

css变量

  :root {
    --height: 2rem;
  }
  
  .head {
    --width: 200px;
    width: var(--width);
    height: var(--height)
  }

css变量写法:

变量必须以--开头定义，调用时必须使用var函数
变量具有作用域，会在对应元素及子元素才能访问到, 以上例子中--width只能在.head下访问
全局作用域需要在:root下定义
var可以携带默认值 var(变量, 默认值), 当变量是非法时就会启用默认值
javascript可以通过node.style.setProperty(变量名, 值)

优势:

可以复用变量，做类似于主题的处理
通过javascript设置的变量可以直接使用css像素单位，不需要做dpr转换

劣势:

兼容性较差
控制台可以控制样式的增删改查

兼容性

CSSStyleSheet

CSSStyleSheet 接口代表一个 CSS 样式表，并允许检查和编辑样式表中的规则列表，我们每个样式表都可以在document.styleSheets里找到，也就是说我们只需要动态插入CSSStyleSheet对象就可以生成新的样式表

使用方式:

微信图片_20210401162421.png

控制台里显示

直接使用构造函数创建实例

insertRule: 添加新的cssRules，一个CSSStyleSheet具有多个CSSRule

replace: 允许cssText中包括@import，返回promise

replaceSync: 不允许cssText中包括@import

deleteRule: 删除某个cssRule

最后要将CSSStyleSheet合并到document或者是shadowdom下的adoptedStyleSheets，由于adopteStyledSheets是被冻结过的，所以我们要使用浅克隆或者是concat方法重新创建一个新的数组

然后我们可以看到控制台里显示的是contructed stylesheet，代表的可构造的样式

优势:

可以不用写style标签，减少head里的标签引入
具有css变量的优势
可以适配shadowdom, shadowdom下同样具备adoptedStyleSheets属性

劣势:

兼容性差

结束语

留个思考题 CSS还有什么写法呢，期待您的留言

有收获的希望能给个关注和点个赞哦

wx号: IAmFineThanksMartin

公众号: 前端马丁

什么？CSS还有这种写法？