【前端学习——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
相关推荐
旖旎夜光7 小时前
多态(11)(下)
c++·学习
曼巴UE57 小时前
UE FString, FName ,FText 三者转换,再次学习,官方文档理解
服务器·前端·javascript
行走的陀螺仪8 小时前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)
前端·javascript·typescript·vue·组件设计方案
全栈陈序员8 小时前
【Python】基础语法入门(十七)——文件操作与数据持久化:安全读写本地数据
开发语言·人工智能·python·学习
一颗不甘坠落的流星8 小时前
【Antd】基于 Upload 组件,导入Json文件并转换为Json数据
前端·javascript·json
啄缘之间8 小时前
11. UVM Test [uvm_test]
经验分享·笔记·学习·uvm·总结
LYFlied8 小时前
Vue2 与 Vue3 虚拟DOM更新原理深度解析
前端·javascript·vue.js·虚拟dom
Lucky_Turtle8 小时前
【Node】npm install报错npm error Cannot read properties of null (reading ‘matches‘)
前端·npm·node.js
RisunJan8 小时前
【行测】类比推理-自称他称全同
学习