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

编写模块化CSS：命名空间

上周，我分享了如何使用BEM创建一个合理的CSS架构。 虽然BEM很棒，但它只是解决方案的一部分。 还有另一部分我还没有提到 —— 命名空间。...这就是之所以引入命名空间。它可以帮助你创建一个结构来控制CSS属性的写入。 如果您遵循惯例，您将能够无惧副作用地编写CSS。 这里是一个示例。 假设我把上面的代码转换成一个带有命名空间的代码。...在继续之前，如果您对命名空间不了解，我强烈建议您查看Harry Robert的具有命名空间的更透明的ui代码。（有趣的事实：Harry启发我使用命名空间）。...因此，我很高兴地从SMACSS中窃取.l-作为布局命名空间。 既然你已经了解了命名空间的起源了，它可能会帮助你了解它的使用方式。...通过包含命名空间，我终于实现了一个好的架构中寻找的所有四个标准： 类必须尽量少地添加避免HTML膨胀。 我必须立即知道组件是否使用JavaScript。

2.6K70

React 进阶 - 模块化 CSS

# 模块化 CSS 的作用 随着 React 项目日益复杂化、繁重化，React 中 css 面临很多问题，比如样式类名全局污染、命名混乱、样式覆盖等。这时， css 模块化就显得格外重要。...css 模块化的几个重要作用: 防止全局污染，样式被覆盖 如果不规范 css 的话，这种情况在实际开发中会变得更加棘手，有时候甚至不得不用 !...js 模块一样加载 css ，本质上通过一定自定义的命名规则生成唯一性的 css 类名，从根本上解决 css 全局污染，样式覆盖的问题。...Modules 的类名都有自己的私有域的，可以避免类名重复/覆盖，全局污染问题 引入 css 更加灵活，css 模块之间可以互相组合 class 类名生成规则配置灵活，方便压缩 class 名 注意事项...IN JS 特点及注意事项 特点 CSS IN JS 本质上放弃了 css ，变成了 css in line 形式，所以根本上解决了全局污染，样式混乱等问题 运用起来灵活，可以运用 js 特性，更灵活地实现样式继承

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

如何在 React 中优雅的写 CSS

随着 SPA 的流行，JS 可以组件化，按需加载（路由按需加载、组件的 CSS 和 JS 都按需加载），这种情况下 CSS 作用域污染的问题被放大，CSS 被按需加载后由于 CSS 全局污染的问题，在加载出其他一部分代码后...小编我从写 Vue 到写 React ， Vue 的 scoped 完美的解决了 CSS 的作用域问题，那么 React 如何解决 CSS 的作用域问题呢？...解决 React 的 CSS 作用域污染方案： 方案一：namespaces 方案二：CSS in JS 方案三：CSS Modules 方案一：namespaces “利用约定好的命名来隔离 CSS...: 14px; } .comB .……{ …… } 嗯，用 CSS 写命名空间写起来貌似有点累。...没关系，还有解，所有的 class 名以命名空间为前缀。

4K20

css模块化及CSS Modules使用详解

那么css模块化思想，也就是在css编写环境中，用上模块化的思想，把一个大的项目，分解成独立的组件，不同的组件负责不同的功能，最后把模块组装，就成了我们要完成的项目了。 css模块化有什么好处？...CSS 模块化遇到了哪些问题？ CSS 模块化重要的是要解决好两个问题：CSS 样式的导入和导出。灵活按需导入以便复用代码；导出时要能够隐藏内部作用域，以免造成全局污染。...Facebook 工程师 Vjeux 首先抛出了 React 开发中遇到的一系列 CSS 相关问题。加上我个人的看法，总结如下： 全局污染 CSS 使用全局选择器机制来设置样式，优点是方便重写样式。...命名混乱 由于全局污染的问题，多人协同开发时为了避免样式冲突，选择器越来越复杂，容易形成不同的命名风格，很难统一。样式变多后，命名将更加混乱。...通过这些简单的处理，CSS Modules 实现了以下几点： 所有样式都是 local 的，解决了命名冲突和全局污染问题 class 名生成规则配置灵活，可以此来压缩 class 名 只需引用组件的 JS

6.6K100

CSS-in-JS，向Web组件化再迈一大步 | 洞见

（图片来自：http://t.cn/R6njCiV） 在介绍这个概念之前，先来回顾一下在日常编写CSS代码时都有哪些痛点： 全局污染 - CSS的选择器是全局生效的，所以在class名称比较简单时，容易引起全局选择器冲突...命名混乱 - 因为怕全局污染，所以日常起class名称时会尽量加长，这样不容易重复，但当项目由多人维护时，很容易导致命名风格不统一。...BEM (.block__element--modifier) - 比较流行的class命名规则，部分解决了命名混乱和全局污染的问题，但class定义起来还是不太方便，比较冗长，而且和第三方库的命名还是有可能冲突...CSS Modules - 模块化CSS，将CSS文件以模块的形式引入到JavaScript里，基本上解决了全局污染、命名混乱、样式重用和冗余的问题，但CSS有嵌套结构的限制（只能一层），也无法方便的在...优劣势总结 看了这些框架后，可以发现CSS-in-JS的优势还是挺多的： 因为有了生成的唯一class名称，避免了全局污染的问题 唯一的class名称也解决了命名规则混乱的问题 JavaScript和CSS

99080

如何在 React TypeScript 中将 CSS 样式作为道具传递？

: React.CSSProperties;}该接口描述了 Button 组件将使用的道具。其中，className 用于传递 CSS 类名，而 style 则用于传递 CSS 样式对象。...CSS 模块化使得每个 CSS 类都有一个唯一的名称，从而避免了全局污染和命名冲突问题。...在 React 应用程序中，我们可以使用 css-modules 或者 styled-components 来实现 CSS 模块化。...使用 CSS 模块化技术，可以更加安全、简便地管理和维护 CSS 样式。总结本文介绍了如何在 React TypeScript 中将 CSS 样式作为道具（Props）传递给组件。...接着，我们介绍了 CSS 模块化技术，它可以帮助我们更好地管理和维护 CSS 样式。React 和 TypeScript 的结合为开发者提供了更加可维护、可扩展的应用程序。

2.1K30

指尖前端重构（React）技术分析报告

另外关于css，因为是单页应用，所以如果不加处理，直接import css文件的话最终打包生成一个css文件会导致样式应用到全局，造成同类名样式相互污染影响。解决这个问题有很多种方案。...但当想要使用全局样式时要再配置，稍显繁杂，且它类名编写的方式为对象的方式，需要整体修改，另外在使用它时，发现不支持-横线的类命名方式，支持下划线方式，推荐驼峰式，而我们之前html中的样式类名大多是横线命名...另外有基于css-modules使用高阶组件的react-css-modules使用人数也比较多，允许横线命名方式且全局本地样式区分简单，但有benchmark测试表明其会较大程度拖累性能，所以也舍弃。...这样原先文件中引入css的方式，全局css引入的方式都不需要变化，做到最小代价。...注意该类全局变量的唯一性，可以添加plugin前缀或使用命名空间等方式保证），并将值传给src目录下的代码中，这样即可绕过控制台build以及调试时的报错。

5.4K30

CSS进阶 - CSS Modules与预处理器简介

在前端开发领域，随着项目规模的扩大，CSS管理变得日益复杂。为了提高代码的可维护性、可重用性及避免全局命名冲突，CSS Modules与预处理器（如Sass、Less）应运而生。...一、CSS Modules简介 CSS Modules是一种CSS的打包方式，它允许你在JavaScript中以模块化的方式引用CSS，从而实现局部作用域的CSS类名，避免了全局污染的问题。...每个模块内的类名都是唯一的，提高了代码的安全性和可维护性。 常见问题与避免方法 问题1：命名冲突 避免方法：CSS Modules自动为类名添加哈希值，确保唯一性。...代码示例（React + CSS Modules）: // MyComponent.js import styles from '....，它们扩展了CSS的功能，提供了变量、嵌套规则、混合（Mixins）、函数等特性，使得CSS更像一种编程语言，提高了开发效率和代码的可维护性。

7110

在React项目中使用CSS Module

在React中，CSS模块(CSS Module)只是一个.css文件,「类似于JavaScript中的局部变量」。它减少了React样式的全局作用域。...此外，它是一种通过生成一个随机字符串作为className名称并添加一个唯一的哈希来使每个className都唯一的工具，从而防止和全局作用域冲突。我们可以使用CSS模块来防止CSS类的命名冲突。...最后，在应用中使用这个按钮组件，就像使用普通的 React 组件一样。 ---- 2. CSS模块的红与黑 优点： 通过使用CSS模块，可以避免CSS类的「命名空间冲突」。...moreStyles: string; 这个文件定义了一些CSS模块中的样式类，可以在组件中使用。...需要注意的是，:global 是一种「逃逸机制」，用于在CSS模块中定义全局样式。通常情况下，CSS Modules的目标是将样式局部化，以避免全局污染和冲突。

77150

CSS Modules使用详解

CSS Modules CSS 模块化 不管是用jquery还是react开发，都会遇到的一系列 CSS 的问题： 全局污染 命名混乱 依赖引入复杂 无法共享变量 代码冗余 通过 JS 来管理 CSS...CSS 模块化的解决方案有很多，但主要有两类。 一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。Radium， jsxstyle ，react-style 属于这一类。...另一类是依旧使用 CSS，但使用 JS 来管理样式依赖，代表是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力。...发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React，只要你使用 Webpack，可以在 Vue/Angular/jQuery 中使用。...前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。使用 Webpack 可以让全局样式和 CSS Modules 的局部样式和谐共存。

1.6K50

番外篇：入门React

当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual...在 React 组件中要包含其他组件作为子组件，只需要把组件当作一个 DOM 元素引入就可以了。...3px":"15px" 注意好好理解这里的state引起样式的即时变化 3.CSS模块化 原因：避免全局污染、命名混乱、依赖管理不彻底、无法共享变量、代码压缩不彻底 npm install --save-dev...style-loader css-loader npm install --save-dev babel-plugin-react-html-attrs //为了使用原生的html属性名 全局样式和局部样式...:local(.normal){color:green;} //局部样式 :global(.btn){color:red;} //全局样式 CSS模块化的优点 所有样式都是local的，解决了命名冲突和全局污染问题

1.4K30

CSS Modules使用详解

CSS Modules CSS 模块化 不管是用jquery还是react开发，都会遇到的一系列 CSS 的问题： 全局污染 命名混乱 依赖引入复杂 无法共享变量 代码冗余 通过 JS 来管理 CSS...CSS 模块化的解决方案有很多，但主要有两类。 一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。Radium， jsxstyle ，react-style 属于这一类。...另一类是依旧使用 CSS，但使用 JS 来管理样式依赖，代表是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力。...发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React，只要你使用 Webpack，可以在 Vue/Angular/jQuery 中使用。...前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。使用 Webpack 可以让全局样式和 CSS Modules 的局部样式和谐共存。

1.8K10

精读《请停止 css-in-js 的行为》

css-modules 顾名思义，css-modules 将 css 代码模块化，可以很方面的避免本模块样式被污染。并且可以很方便的复用 css 代码。...// 全局变量 :global(.className) { background-color: blue; } // 本地变量，其它模块无法污染 .className { background-color...引入了 styleName，将本地变量和全局变量很清晰的分开。...css-modules 优缺点 优点 1、CSS Modules 可以有效避免全局污染和样式冲突，能最大化地结合现有 CSS 生态和 JS 模块化能力 2、与 SCSS 对比，可以避免 className...我们团队在使用过 scss 和 css modules 后，仍然又重新选择了使用 scss。css modules 虽然有效解决了样式冲突的问题，但是带来的使用成本也很大。

1.9K50

JS框架设计之命名空间设计一种子模块

命名空间 1、种子模块作为一个框架的最开始,除了负责初始化框架的最基础部分。 2、种子模块作为框架的最开始,那么什么是种子框架的最开始呢?...3、众所周知,大多数框架在windows中立足是通过命名空间,基本上我们可以把命名空间看成是框架的名字,当然也有一些框架没有命名空间向Prototype.js,mootools等都有污染的问题,他的意义存在与整个执行环境的每个角落...Test.Array={}; Test.JSONP=new Test.Class(); Test.XHR=new Test.Array(); } 5、众观各大类库的实现,一开始都是以一个全局变量作为命名空间...6、全局变量的污染 全局变量的污染主要分两类 (1)对js原生对象的污染、Prototype,mootools和Base2归为一类,Prototype的原理是对Javascript对象进行扩展,但是他没有考虑到和其他库的兼容性问题... (2)对原生对象几乎没有污染、向jQuery、YUI、EXT这些框架,YUI和EXT就是想上面给出代码那样,一叠罗汉的方式构建的,jQuery则另辟蹊径,他以选择器为向导,所以他的命名空间是一个函数

985100

如何优雅地覆盖组件库样式？

全局CSS文件 之前提到，把自己写的的CSS文件放在组件库的样式后面，可以保障自定义有更高优先级。只要重写同名的样式，理论上就能实现覆盖组了。...因为在实际工作中，项目Owner通常不允许使用全局CSS，这会造成样式污染：你定义了一个样式my_button，团队其他人恰巧也命名为my_button，这就造成样式冲突。...我们需要给每个文件做样式隔离，就好像是给它一个命名空间。通常使React项目使用的是用的是CSS Module，Vue项目使用Scoped标记。...; } 被编译后，插入的样式表和元素的class属性都会加上一个哈希值作为命名空间。...，只在当前这个文件下生效，彻底避免造成全局污染。

2.4K10

React全栈：Redux+Flux+webpack+Babel整合开发

UI部件（并不绝对） 2.JS模块化方案： 全局变量+命名空间(namespace)：一般通过简单的自执行函数实现局部作用域，避免污染全局作用域（jQuery） AMD&CommonJS：AMD仅需要在全局环境下定义...require与define，通过文件路径或文件名定位模块，模块实现中声明依赖，加载与执行均由加载器操作，提供了打包工具自动分析依赖并合并；CommonJS不适合浏览器环境，相比AMD更简洁，可以方便的实现前后端代码共用...ES6模块 3.前端组件化方案： 基于命名空间的多入口文件组件：基于全局变量+命名空间的模块化方案，不同资源分别手动引入，类似于jQuery的插件 基于模块的多入口文件组件：使用AMD规范，把自己暴露为一个模块...即可 B.基于webpack进行开发 1.webpack主要做了两部分工作： 分析得到所有必需模块并合并 提供了让这些模块有序、正常执行的环境 2.loader是作用于应用中资源文件的转换行为。...开发环境 *webpack2，没有preLoaders了，使用rules，另外eslint的airbnb报错 D.组件 1.组件是React的基石，所有的React应用程序都是基于组件的 2.state

96720

QQ音乐商业化Web团队前端工程化实践总结

一个文件就是一个模块，有自己的作用域，没有export的变量和方法都是私有的，不会污染全局作用域，模块的加载是运行时同步加载的。...每个文件一个模块，有自己的作用域，不会污染全局； 使用require同步加载依赖的其他模块，通过module.exports导出需要暴露的接口； 多次require的同一模块只会在第一次加载时运行，并将运行结果缓存....type-block__element_modifier {} 从上面BEM的命名要求可以看到，类名都很长，这就导致在对CSS文件进行压缩的时候，我们无法得到更大的优化空间。...解决全局命名污染的问题； 更贴近Web组件化的思想； 可以在一些无法解析CSS的运行环境下执行，比如React Native等； JS赋予CSS更多的编程能力，实现了CSS和JS间的变量共享； 支持CSS...解决全局命名污染的问题； 默认是局部的，可以用:global声明全局样式； 受CSS的限制，只能一层嵌套，和JS无法共享变量； 能支持现在所有的CSS技术。

4.2K112

CSS Modules VS. styled-components，哪个才是解决 CSS 不足之处的更好方案？

CSS 是一门标记语言，用于元素布局及样式定义。它存在很多问题，例如书写效率和维护性低；缺乏模块机制、变量、函数等概念；容易出现全局样式污染和样式冲突等。...虽然可以通过差异化类命名的方式来避免全局冲突，但这又会导致类命名的复杂度上升。 为了解决 CSS 存在的这些不足之处，前端社区出现了很多种解决方案。例如，Saas 或者 Less。...styld-components 是一种 CSS-in-JS 的优秀实践，通过 JS 来声明、抽象样式来提高组件的可维护性，在组件加载时动态地加载样式，并且动态地生成类名避免命名冲突和全局污染。...，避免全局污染。...styled-components 的反对派们的主要观点包括 虽然 styled-components 解决了全局命名空间和样式冲突， 但是 CSS Modules、Shadow DOM 和命名约定很久以前在社区中就解决了这个问题

7.3K72
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券