文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【React】：CSS 模块化

为什么 CSS 要模块化？ 1.1. 难以理解 1.2. 难以维护 2. 什么是CSS模块化？ 3. CSS模块化方案——BEM 4. CSS模块化方案——CSS In JS 4.1....模块化 CSS 使用的主要场景是棘手的大规模 CSS。 写代码并不难，难的是在不让你的代码随着时间的推移成为拖累你的“技术债”。 1.1....难以理解 以下是 CSS Guidelines 中的一个示例，这个示例展示了一个问题：除了写这段代码的人，没有人知道这段代码是干什么的。...image 和 profile 写在同一部分 CSS 吗？ 可以在其他地方使用 avatar 吗？ 光看代码无法回答这些问题，你必须在 CSS 代码中推理他们的作用。 1.2....什么是 CSS 模块化？ 模块化 CSS 需要你换一个角度看问题，不从页面级别考虑，而是关注组成页面的小块。 这不是一个页面而是一个组件的集合。

1.2K20

React 进阶 - 模块化 CSS

# 模块化 CSS 的作用 随着 React 项目日益复杂化、繁重化，React 中 css 面临很多问题，比如样式类名全局污染、命名混乱、样式覆盖等。这时， css 模块化就显得格外重要。...没有 css 模块化和统一的规范，会使得多人开发，没有一个规范 减少 css 代码冗余，体积庞大 React 中各个组件是独立的，所以导致引入的 css 文件也是相互独立的，比如在两个 css 中...，有很多相似的样式代码，如果没有用到 css 模块化，构建打包上线的时候全部打包在一起，那么无疑会增加项目的体积 React 使用 css 模块化的思路： css module ，依赖于 webpack...less 等做 CSS Module，也就是 css 全局样式 + less / scss CSS Modules 方案 这样就会让 React 项目更加灵活的处理 CSS 模块化。...，动态添加样式等场景 由于编译器对 js 模块化支持度更高，使得可以在项目中更快地找到 style.js 样式文件，以及快捷引入文件中的样式常量 无须 webpack 额外配置 css，less 等文件类型

1.7K10
您找到你想要的搜索结果了吗？
是的
没有找到

如何在 React 中优雅的写 CSS

本文首发于政采云前端团队博客：如何在 React 中优雅的写 CSS https://www.zoo.team/article/react-css ? 引言 问题：CSS 文件分离 !...小编我从写 Vue 到写 React ， Vue 的 scoped 完美的解决了 CSS 的作用域问题，那么 React 如何解决 CSS 的作用域问题呢？...但是问题确实也解决了，但约定毕竟是约定，靠约定和自觉来解决问题毕竟不是好方法，在多人维护的业务代码中这种约定来解决 CSS 污染问题也变得很难。...所选择的唯一标识符以模块形式暴露出去。...，可通过约定规范来解决不同组件 CSS 相互影响问题 由于 ui 组件库会应用于整个公司的产品，在真正的业务场景中，虽然不建议，但是可能无法避免需要覆盖组件样式的特殊场景，如使用其他两种方式，不能支持组件样式覆盖

4K20

react中css modules的介绍与使用

React 中 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。...也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。...那么这个时候就推荐使用CSS Modules 了CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。...在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS...可见create-react-app对webpack零配置的追求本文主要讲解create-react-app2.0以上版本的CSS Modules的用法： 全局样式 （默认） 命名规则: xxx.css

90410

CSS模块的注释——页面重构中的模块化设计（六）

CSS模块的注释——页面重构中的模块化设计（六） 由 Ghostzhang 发表于 2010-07-20 14:07 从前面的内容我们已经知道，样式是可以分成各个模块去写的，如何表示各个模块的作用及它们之间的关系呢...CSS的注释是不二的选择。 与普通的注释不同，模块的注释需要一些更详细的内容，比如：功能说明、模块版本、关联信息等等。...像 《基类、扩展类──页面重构中的模块化设计（五）》 中例子的注释，显然是比较简单的。为了减少不必要的沟通，我们可以使用较为固定的格式去完成这个注释。...主要的关键字有： @name标明模块的名称@author标明模块的作者@version标明该模块的版本@explain功能说明@relating标明该关联的模块@dependent标明该所依赖的模块@type...标明该模块的类型：公共、基类、扩展类 需要注意的规则： 以“/**”标记模块的开始 从“/*”到第一个“/”作为模块相关信息的说明，包含关键字 关键字以 @ 开头，“:”后开始到“*”的内容为相关的值，

52520

React基础(10)-React中编写样式CSS(styled-components)

而编写React应用,就是在编写React组件,组件中最重要的数据就是props和state,有了数据,怎么让其以什么样的显示,那就是CSS做的事情了 在React中,一切皆可以是Js,也就是说在js里面可以写...,那么把js和css放在一起,也是一种细粒度的组合,css也可以和Js一样,通过模块化的形式嵌入到js里面去 CSS modules很好的解决了样式冲突,利用了分而治之的理念,在如今组件化开发大行其道上...,同样css也在不断的进化,如同js一样,也有变量,函数等具备Js一样的活力,那么在React中是怎么实现样式的模块化的?...在React中有css-in-js,它是一种模式,这个css由js生成而不是在外部文件中定义,是CSS Modules,主要是借助第三方库生成随机类名称的方式来建立一种局部类名的方式 这种css-in-js...,然后通过Es6中模块化的export的方式对外暴露出去,只要哪个组件模块需要,直接通过import引入即可 import styled from "styled-components"; // 引入styled-components

4.3K00

React学习(十)-React中编写样式CSS(styled-components)

而编写React应用,就是在编写React组件,组件中最重要的数据就是props和state,有了数据,怎么让其以什么样的显示,那就是CSS做的事情了 在React中,一切皆可以是Js,也就是说在js里面可以写...,那么把js和css放在一起,也是一种细粒度的组合,css也可以和Js一样,通过模块化的形式嵌入到js里面去 CSS modules很好的解决了样式冲突,利用了分而治之的理念,在如今组件化开发大行其道上...,同样css也在不断的进化,如同js一样,也有变量,函数等具备Js一样的活力,那么在React中是怎么实现样式的模块化的?...在React中有css-in-js,它是一种模式,这个css由js生成而不是在外部文件中定义,是CSS Modules,主要是借助第三方库生成随机类名称的方式来建立一种局部类名的方式 这种css-in-js...,然后通过Es6中模块化的export的方式对外暴露出去,只要哪个组件模块需要,直接通过import引入即可 import styled from "styled-components"; // 引入styled-components

2.4K21

在React中引用CSS方式及写法大全

引用方式 第一种：内联方式 可以使用变量或者传统的内联方式 优点: 只生效于当前组件 缺点: 可能产生大量重复代码 import react, { Component } from "react";...文件 优点: 复用性强 缺点: 存在样式覆盖问题，不是只生效于当前组件 import React, { Component } from "react"; import TestChidren from.../TestChidren"; import "@/assets/css/index.scss"; // styName写在 "/assets/css/index.scss" 中即可 class Test... ); } } export default Test; 第三种：在组件中引用[name] .scss文件 安装node-sass就可以...[name].module.css文件 优点: 可实现CSS的局部作用域，并且可复用 重点： 1、选择器驼峰命名 2、样式文件后缀名为.module.css 3、在js文件中导入并使用 注： 1、css

13010

React 中使用CSS

第一种: 在组件中直接使用style 不需要组件从外部引入css文件，直接在组件中书写。...在正常的css中，css的值不需要用双引号("")，如 .App-header { background-color: #282c34; min-height: 100vh; display...这种方式的react样式，只作用于当前组件。 第二种: 在组件中引入[name].css文件 需要在当前组件开头使用import引入css文件。...第三种: 在组件中引入[name].scss文件 引入react内部已经支持了后缀为scss的文件，所以只需要安装node-sass即可，因为有个node-sass，scss文件才能在node环境上编译成...第四种: 在组件中引入[name].module.css文件 将css文件作为一个模块引入，这个模块中的所有css，只作用于当前组件。不会影响当前组件的后代组件。

1.4K30

CSS模块化的演进

一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题： 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器 没有变量和合理的样式复用机制...模块 可复用的单元。在模块中需要注意的是选择器一律选择 class selector，避免嵌套子选择器，减少权重，方便外部覆盖。...CSS IN JS 这个理念是由 Facebook 工程师 vjeux 在一次分享中提出的，用来解决在 React 中使用 CSS 的问题。...因为 React 的组件结构，强制要求把 HTML、CSS、JavaScript 写在一起。...在 CSS 模块化演进的过程中，出现了很多优秀的设计思想和实践，这些值得我们借鉴和学习。

1.7K20

react脚手架（create-react-app）配置antd中css按需加载的坑

前不久写了一篇关于react脚手架（create-react-app）配置antd中css按需加载的踩坑记录，文章内容有误，原文如下react脚手架（create-react-app）配置antd中css...react的基本结构搭建 接下来我们就可以在项目中配置antd 1、下载antd cnpm i antd -S 2、配置antd按需加载css 首先下载babel-plugin-import cnpm...因为creat-react-app有一些默认的babel配置放到了package.json中） ?...11、此时将package.json中的babel下面的 "presets": [ "react-app" ] 配置到 .babelrc中，并将package.json中的babel删除掉,如图： ?...总结一下，create-react-app的脚手架使用anted的css按需加载，由于此脚手架默认不支持使用.babelrc文件，所以需要将其配置暴露出来，需要用到npm run eject 命令，暴露配置文件后需要在

3.5K21
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券