全息解读CSS定义

开课吧开课吧锤锤2021-06-03 16:37

点赞
有用
分享分享

     随着前端突飞猛进的编进,诸如element,antdesign等优秀的ui库出现,在对比中感到审美疲劳。言归正传,css近年来了也催生了很多新的解决方案,比如CSSModules、styled-components(cssinjs)、FunctionalCSS、CSS原子类、CSS沙盒等等

web

    1.CSSModule

    CSSModule顾名思义就是CSS模块化,为什么需要模块化?我们知道随着基于vue、react开发SPA的web应用,本质上是由多组件搭建而成,就好比用积木来搭房子,如果这个时候两个组件的样式类名重复了,那岂不是就冲突了?为了解决冲突就需要进行模块化区分,没有了命名冲突,更好的让组件间沙箱化,而CSSModule就是css模块化的实现方式之一

2、图片CSS in JS

CSS in JS,顾名思义就是将应用的CSS样式写在JavaScript文件里面,使用JS语言来写CSS,包括替代原先写后缀为.css、.less、.scss等文件

    2.1styled-components

    styled-components是CSSinJS实现方案中比较知名的,大多用于React,通过使用es6语法的标签模板字符串语法为component定义css属性,我们不用在设置className类名啦~我们看看那下面这个demo

    其实这个概念已经很老了,本质上也是一种编写CSS的思想,简而言之就是通过用原子类构造选择器,比如我们定义一个base.css文件,里面定义了公共复用高的选择器,诸如mgt20(来表示margin-top:20px)等等,好处在于便于抽出复用代码,提高代码复用程度,但是过度的抽象也会带来了维护上的巨大成本。

 3.CSS 原子类

其实这个概念已经很老了,本质上也是一种编写 CSS 的思想,简而言之就是通过用原子类构造选择器,比如我们定义一个base.css 文件,里面定义了公共复用高的选择器,诸如mgt20(来表示 margin-top: 20px )等等,好处在于便于抽出复用代码,提高代码复用程度,但是过度的抽象也会带来了维护上的巨大成本。

    3.1tailwind

    webtailwind官网链接其实本质上也是一种原子类思维,一个class代表一种CSS属性。优点在于它把class拆分到足够细,粒度很小,很好很「原子」。在国外很吃香,因为自定义属性强且类名语义话强,你再也不用为取class的名字很犯愁(毕竟单独一个组件开发我们就可能需要n个类),自定义就像搭积木一样,但国内争议比较大,早期原子类在国内基本被喷,到2020年后却态度有所改观。我们看下下面这段demo,官方事例如何实现一个卡片

web

    4、CSSSandbox(沙盒)

    css沙盒简而言之就是起到样式隔离的作用,互不干扰,前端接触比较多的就是微前端了,毕竟要保证每个集成进来的应用样式互不干扰。因为应用可能是不同团队成员开发,正常是会有类名冲突的情况出现。

    最早期的实现方式应该就是iframe了,iframe自带天然隔离,但是这种方式局限性也很多,还有就像上文我们提及的几个点,比如

    scopedCSS:通过定义属性scoped来就能结合DOM树限制CSS作用范围

    CSSinjs及CSSModule是通过工具把样式编译成脚本

    移除head内标签:这也是qiankun(微前端框架)的css沙箱的原理,通过记录子项目运行时新增的style/link标签,卸载子项目时移除这些标签。重新添加新载入子项目的标签来实现

    shadowDOM:你可以理解为dom中的dom,是Webcomponents一个重要属性,它允许将隐藏的DOM树附加到常规的DOM树中,弊端就是兼容性较差,你可以看下兼容情况

    当你的语法学会之后,就像是常打开了一个宝盒,之后做什么事情都会异常的容易。以上就是小编为大家整理的“全息解读CSS定义”一文,更多Web教程尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享