CSS模块化方案

最新推荐文章于 2024-09-09 20:02:14 发布
最新推荐文章于 2024-09-09 20:02:14 发布
阅读量3.2k 收藏 4
点赞数 2
分类专栏： 前端工程化 文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39206750/article/details/123940103
版权

CSS模块化

模块化概念

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。 ---- 就是把一个大的功能拆解成小功能

为什么需要模块化

  • 相对独立性 – 避免作用域污染
  • 通用性 – 可复用
  • 互换性 – 可按需加载，从而优化性能
  • 关注分离概念、不同的技术做不同的事情

现有的 CSS 方案

// app.css
.button {
  width: 100px;
  height: 20px;
  background: 'red';
}

// app.js
import('app.css');
function App() {
  return <Header><button className="button">红色按钮</button></Header>
}

直接使用 CSS 有什么问题

  1. CSS 全局作用域问题
// app.css
.button {
  width: 100px;
  height: 20px;
  background: 'red';
}

// app.js
import('app.css');
function App() {
  return <Header><button className="button">红色按钮</button></Header>
}

// app2.css
.button {
  width: 100px;
  height: 20px;
  background: 'green';
}

// app2.js
import('app2.css');
function App2() {
   return <Body><button className="button">绿色按钮</button></Body>
}

// bundle.css
.button {
  width: 100px;
  height: 20px;
  background: 'red';
}

.button {
  width: 100px;
  height: 20px;
  background: 'green';
}
  1. JS 与 CSS 之间无法共享变量
// app.scss
$color: 'red';

.button {
  width: 100px;
  height: 20px;
  background: $color;
}

// config.js
export default {
  ButtonColor: 'red'
}

// app.js
import('app.scss');
import config from './config';
function App(props) {
  return (
  	<Header>
    	{ config.ButtonColor === 'red' ? <button className="button">红色按钮</button> : null }
    </Header>
  )
}
  1. 现代框架可以将 UI 进行组件化，但是并没有一个 CSS 模块化方案能够匹配上

CSS 模块化的解决方案：

CSS Modules 既不是官方标准，也不是浏览器的特性，
而是在构建阶段对 CSS 类名选择器限定作用域的一种方式。

1. CSS Modules 方案

  • 所有样式都是局部作用域的，解决了全局污染问题
  • class 名生成规则配置灵活，可以此来压缩 class 名
  • 依然是 CSS，几乎 0 学习成本
使用 CSS Module

create-react-app 中内置了使用 CSS Modules 的配置，
当前方式就是使用 create-react-app 内置的用法

方式: 将所有的 .css/.lee/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等。
即可使用 CSS Modules 的方式进行引入使用了。

JS 和 CSS 之间共享变量
$bg-color: yellow;
//导出变量、实现js与css的变量共享
:export{
 bgColor:$bg-color,
}
全局与局部的写法
/* 定义全局样式 */
:global{
    .hr {
        height: 10px;
        background-color: red; 
  }
}
注意：global作用域的样式 cssmodules 会自动忽略、并且不会导出(不会通过对象拿到)
依赖关系管理
 @mixin important_text{
        margin: 40px 0;
        height: 10px;
        border: 0;
        background-color: aliceblue
       }
.HRSS{
    @include important_text;
    background-color: pink;
}
总结

CSS Modules 是很好的 CSS 模块化解决方案，优势很明显，几乎没有学习成本，也不依赖任何的第三方库，并且对代码的侵入性也非常的小。

2. CSS-In-JS 方案

CSS-In-JS 是一种把 CSS 直接写在 JS 里的一种模式，

安装 npm install --save styled-components
基本使用
import styled from 'styled-components'
const Button=styled.button`
 display: inline-block;
  border: 1px solid transparent;
  height: 32px;
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  `

 <Button>提交</Button>
高级用法
定义变量 & 逻辑推算
const color = '#1890ff';

export const Button = styled.button`
  display: inline-block;
  border: 1px solid transparent;
  height: 32px;
  color: #fff;
  background-color: ${props => props.red ? 'red' : color};
  border-color: ${color};
`;
继承

//获取button后通过模版字符串扩展其他样式
export const GreenButton = styled(Button)`
  background-color: green;
  border-color: green;
`;
总结

背后的思想：分离逻辑组件和展示组件

使用 Styled components，可将组件分为逻辑组件和展示组件**，逻辑组件只关注逻辑相关的部分，展示组件只关注样式**。

Styled-components 最基本的理念就是通过移除样式与组件之间的对应关系来强制执行最佳实践。

good法乐
关注
专栏目录
css模块化方案
12-30
css的模块化方案可能和js的一样多，下面简单介绍几种主要的模块方案。 oocss 面对对象的规则，主要的原则是两种：分离结构和外观，分离容器和内容。 名词解释 分离结构和外观：增加可重复的设计单元，同时去推进产品和ui对这方面的思考，比如下面的css使用时对象模式的命名和模块化规则。 分离容器和内容：指的是样式的使用不以元素位置唯一匹配，在任何位置你都可以使用这个样式，如果你不适用这个样式，会保持默认的样式。 实例 // dom结构 <div class=toogle> <div class=toogle-control> <di
CSS Modules - CSS模块化
weixin_43924896的博客
06-06 2429
介绍CSS Module的原理和语法，以及实际的应用范围
从CSS3到CSS模块化：带你深入了解CSS你不知道的前沿特性
最新发布
m0_61118741的博客
09-09 1668
尽管我们通常将CSS3作为终点，但CSS实际进入了一个新的阶段——**模块化的持续进化**。以下是一些你可能还不知道的前沿CSS新特性，它们正逐渐改变我们的Web开发方式。
CSS-模块化
natsu-cc的博客
05-06 1420
前言：
css模块化的方案
zz130428的博客
12-28 1509
目前主流的 css 模块化分为 css modules 和 css in js 两种方案。CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性, 编译时会将 css 类名 加上唯一 hash。CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件，这
模块化CSS
qq_51130780的博客
09-30 1261
模块化CSS保证页面中的CSS只受本页面控制
CSS模块化思想的优势
12-07
综上所述，CSS模块化思想是现代Web开发中不可或缺的一部分，它为开发者提供了高效、可维护和灵活的样式解决方案，促进了项目的长期成功。通过采用模块化CSS，开发者可以更好地管理复杂项目，同时保持代码的清晰性和...
css/js文件模块化组件
11-12
CSS模块化主要是通过CSS预处理器（如Sass、Less）或CSS后处理器（如PostCSS）来实现的。这些工具允许我们创建具有局部作用域的CSS规则，避免了样式冲突和全局污染。例如，我们可以创建独立的CSS模块（如`.module-...
CSS模块化的理解
He_9a9的博客
12-04 1527
随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。为了解决这个问题，产生出了 CSS 模块化的概念。
前端框架的CSS模块化（CSS Modules）
官方推荐
02-26 5848
前端框架的CSS模块化（CSS Modules）
CSS 模块化
weixin_47667133的博客
01-14 492
CSS 模块化的三种解决方案： CSS 命名约定 BEM规范（很早以前） BEM — Block Element Modifier 依旧使用 CSS，使用 JS 编译原生的 CSS 文件，使其具备模块化的能力 CSS-Modules 彻底抛弃 CSS，使用 JS 写 CSS 规则，并内联样式 CSS-IN-JS 1. CSS Modules 方案 CSS Modules 既不是官方标准，也不是浏览器的特性，而是在构建阶段对 CSS 类名选择器限定作用域的一种方式。 1.1 CSS Modu.
CSS模块化
sanjun_done的博客
04-16 1554
CSS模块化 CSS发展 手写原生CSS：行内样式、内嵌样式、link引入外部样式、@import导入样式 使用预处理器Sass/Less：支持变量、支持嵌套 使用后处理器PostCSS：使用PostCss可以接受CSS文件并校验css语法或自动添加浏览器前缀 使用 css modules 使用css in js 什么是CSS模块化？ 在系统结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。那么css模块化的思想，就是在css 编写的环境中，用上模块化的思想
前端开发——模块化（css模块化开发）
打杂人
04-17 892
掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成： 1.css模块化 2.html模块化 3.js模块化 模块化开发的优势 1.更好的组织和维护代码 2.按需加载 3.避免命名冲突 css模块化 css模块化编程语言 说到css的编程语言我们就需要了解一下css预处理器，它用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成...
Css模块化
Raccon_的博客
03-22 942
Css Modules css modules 通过对css类名的重命名，保证每一个类名的唯一性，从而避免样式冲突问题 实现方式：webpack的css-loader插件 在react脚手架中演化成：文件名，类名，hash（随机）三部分，只需要指定类名即可。 1.在index.module,css中我们写一个类名 .red{ } 2.通过css modules就会给我们转化成类名 .Button_error_axy4s Css Modules 在项目中的使用 1.首先创建一个名为index.m
css模块化
ass_ace
08-05 742
CSS 发展 我们在书写 css 的时候其实经历了以下几个阶段： 手写源生 CSS 使用预处理器 Sass/Less 使用后处理器 PostCSS 使用 css modules 使用 css in js 手写源生 CSS 在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况： 行内样式，即直接在 html 中的 style 属性里编写 css 代码。 内嵌样式，即在 html h 中的 style 标签内编写 class，提供给当前页面使用。 导入样式，即在内联样式
CSS 模块化开发
weixin_30384217的博客
07-14 141
CSS 模块化 一、文件结构 常见文件结构 一个项目的CSS最基本结构通常是下面这样的： - base.css - common.css - pages.css 复杂一点的项目可能是这样分： - base.css - header.css - footer.css - sidebar.css - forms.css - icons.css - buttons.css - dropdown...
CSS模块化性能优化：scoped选择器、CSS模块、SCSS变量及其应用
xiehewe的博客
03-03 414
在处理样式的作用域、全局样式、JavaScript变量、CSS模块、SCSS变量以及@include和@extend等方面，我们需要综合考虑样式的可维护性、可复用性和性能开销，以确保前端应用的样式表现和性能表现都能达到最佳状态。但需要注意的是，过多的JavaScript变量可能会导致样式计算的性能开销，因此在使用JavaScript变量生成样式时，需要注意控制变量的数量和作用域，以避免影响页面的渲染性能。使用变量可以使得样式的修改更加方便和集中，减少样式的重复定义，提高样式的复用性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值