【前端学习——css模块化】

https://segmentfault.com/a/1190000039772466#item-2


CSS 命名方法论

为选择器增加冗长的前缀或后缀,手写命名前缀后缀的方式 来生成全局唯一的命名

很麻烦不方便

CSS Modules

在外部管理 CSS,然后将类名映射到组件内部,他会为每个 class 都分配一个全局唯一 hash。

在 React 中编写 CSS

  • 使用 styled-components
javascript 复制代码
// styles.js
import styled, { css } from 'styled-components'

// 创建一个名为 Wrapper 的样式组件 (一个 section 标签, 并带有一些样式)
export const Wrapper = styled.section`
  padding: 10px;
  background: deepskyblue;
`
  • 使用 CSS Modules
相关推荐
JamesGosling6668 分钟前
深入理解内容安全策略(CSP):原理、作用与实践指南
前端·浏览器
2***s6729 分钟前
【Go】Go语言基础学习(Go安装配置、基础语法)
服务器·学习·golang
不要想太多9 分钟前
前端进阶系列之《浏览器渲染原理》
前端
七喜小伙儿20 分钟前
第2节:趣谈FreeRTOS--打工人的日常
前端
我叫张小白。24 分钟前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
laocooon52385788624 分钟前
vue3 本文实现了一个Vue3折叠面板组件
开发语言·前端·javascript
IT_陈寒1 小时前
React 18并发渲染实战:5个核心API让你的应用性能飙升50%
前端·人工智能·后端
韩曙亮1 小时前
【人工智能】AI 人工智能 技术 学习路径分析 ① ( Python语言 -> 微积分 / 概率论 / 线性代数 -> 机器学习 )
人工智能·python·学习·数学·机器学习·ai·微积分
辞旧 lekkk1 小时前
【c++】封装红黑树实现mymap和myset
c++·学习·算法·萌新
科普瑞传感仪器1 小时前
从轴孔装配到屏幕贴合:六维力感知的机器人柔性对位应用详解
前端·javascript·数据库·人工智能·机器人·自动化·无人机