【前端学习——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
相关推荐
某公司摸鱼前端11 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~12 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程18 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏19 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
sealaugh322 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
水木兰亭2 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
鱼摆摆拜拜2 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习