会员专栏

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《React中CSS Modules的使用》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上,使用CSS Modules还是存有一定的缺陷。这篇文章将会和大家一起聊聊React中编写CSS的姿势,然后再会花一些篇幅来讨论CSS Modules编写CSS的最佳姿势。

提示框组件的实现给我带来的思考和探索

Tooltips大家很多时候也将其称为提示框,另外还有一个视觉上长得和Tooltips的组件,常常称为Popovers(又名弹窗)。很多时候他们在视觉上长得非常类似,但是共交互上却有明显性的差异,特别是在PC端上:Tooltips一般是通过鼠标的悬浮来触发;Popovers一般是通过点击来触,但在移动端上两者都是通过点击来触发,因为移动端上悬浮的交互行为基本是不存在的。不过我们今天要聊的不是他们的交互行为,而是来看看如何以最好的方式来还原他们的视觉效果,并且能适用各种不同的UI风格。

学一点Webpack配置:Webpack的优化

上一篇中花了14小节主要和大家一起探讨了Webpack 4.x的一些基本配置,比如初始化项目,添加各种Loader、React、Typescript、Sass、PostCSS、CSS Modules等配置、图片加载、字体加载以及各种代码检测的能力,比如ESLint的配置、Prettier的配置和StyleLint的配置。在接下来这个部分,主要和大家一起来探讨Webpack 4.x中的一些优化方面的配置。比如开发环境的优化、Webpack自身的优化、文件压缩和依赖监控以及应用分析相关的配置。如果感兴趣的话,欢迎继续往下阅读。

聊聊CSS的::marker

CSS的::marker是一个伪元素,最早接触时间应该是在四年前。四年前在《试探列表中的::marker》一文中就提到过CSS的::marker伪元素,只不过在当时,该伪元素只是大家探索性的在聊该属性,而时至今日却不同,Firefox 68已经追随Safari11.1对该伪元素支持了。也就是说,该伪元素离我们越来越近了,以后我们可以使用::marker帮我们做更多的处理。简而言之,使用::marker伪元素,可以对列表做一些有趣的事情,在本文中,我们将深入的聊聊该伪元素。

学一点Webpack配置:基本配置

作为现代Web开发者就需要对Webpack有所了解,哪怕掌握的不够深入,略知皮毛也对我们自己的工作或学习都是有所帮助的。比如说吧,前段时间折腾React环境下的CSS Modules,就是因为自己对Webpack不了解,有些坑踩了无法立刻解决,就算借助互联网,解的也是知半解(而且现在技术更新太快,网上有些教程根本走不通,不踩不知道,一踩只有泪)。正因为这个原因,促使自己去了解Webpack更多的知识。接下来的内容是一些基础,主要会介绍怎么用Webpack来构建自己的开发环境,感兴趣的请继续往下阅读。

React是什么?

React是什么呢?从React的官网我们可以获知:React是用于构建用户界面的JavaScript库。React使创建交互UI变得轻而易举,为Web应用的每个状态设计简洁的视图,当数据改变时React能有效地更新并正确地渲染组件。这仅是对React的总结性的描述,对于想学习React的同学(或初次接触React的同学)还是希望能更深层的了解React是什么?React中包含了些什么?又是什么使得React变得那么特别?那么这篇文章将会简单的介绍一些React中的一些术语,并探索React的一些特色。最后希望这篇文章能帮助你能先熟悉一些概念,从而不至于在后面的学习过程中感到绝望。而且会慢慢喜欢上并掌握好React。

深入了解JSX

最近开始学着使用React写东西。在写代码时会使用JSX,不了解JSX的相关知识写起代码的效率还是蛮低的。为了能更好的进入状态,打算先把JSX相关的知识和细节了解一下。在这篇文章中我们主要就是来学习一下JSX的相关知识。希望对于像我这样的初学React(或初次接触JSX)的同学有所帮助。

React中CSS Modules的使用

最近项目开始换React的工程,感觉好多东西都得重新开始,特别在撸CSS的时候。说实话和Vue的工程相比,体感差完了。在Vue的工程中除了Modules之外还可以使用CSS的作用域scoped的概念。用久了Vue的同学,在这方面的感觉爽死了,但是突然切到React的工程体系之下,这方面的感觉突然不要不要。拿个实例来说吧(可能我做得不到位),组件的CSS是全局的,有时覆盖起来,除了蛋疼之外,而费时,费成本。

从9102年的CSS状态报告中看CSS特性的使用

在9102年终于有了一份属于CSS状态的报告。对,这是CSS发展20多年以来第一份属于自己的状态报告。大家的印象中可能只有JavaScript相关的状态报告,对于CSS的状态报告并无了解(那是以前没有)。正如报告开篇所说,在Web开发家族中,JavaScript更似一位愤怒、叛逆的少年,每年都会经历一个新阶段。而CSS却一直以来更似一位勤奋好学,举止得体的少年,他总是保持礼貌,从不草率的做出任何决定。不过有迹象表明,CSS可能正经历着与JavaScript刚刚经历的同样动荡的青少年时期。Flexbox,Grid,CSS-in-JS在9102年都来了。可以说,CSS终于把头发染成粉红色,并像它一直想要的纹身了。在这份有史以来第一份关于CSS状态调查中,调查了一万多名开发人员。在这份详尽的报告中我们可以看到哪些CSS特性使用得最多,哪些工具正在被采用等等。

如何使用CSS实现黑暗模式和高亮模式的切换

Web技巧第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值darklight来进行切换,这是从最底层也是最原生的解决方案,除此之外还可以通过CSS的混合模式属性来模拟。当然,除了期刊中提到的技术方案之外,还有其他的一些解决方案。今天我们就来一起学习一下,如何实现黑暗模式和高亮模式之间的切换。

页面

返回顶部