CSS模块化的理解

本文介绍: 随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。为了解决这个问题，产生出了 CSS 模块化的概念。

说起css 模块化，那么先来看看它的发展吧！

发展 历程

从We b 技术来讲

We b 1.0：We b 起源于上世纪 90 年代，当时主要是静态页面，内容呈现形式单一，浏览器技术也比较简单。We b 1.0 的网站主要提供信息传递和查找功能，用户只能被动浏览。
We b 2.0：We b 2.0 的出现标志着 Web 技术从单向传递信息向多向交互转变。用户可以自由发布信息和进行交互，网站呈现方式更为多样化，例如社交网络、在线协作工具等。Web 2.0 的技术特点包括 Aja x、富媒体应用程序、RESTf ul API 等。
Web 3.0：Web 3.0 是指下一代 Web 技术，也称为“语义 Web”。它的主要目标是为机器人和人类用户提供更加智能化的 Web 体验，实现 Web 内容的智能化组织和查询。Web 3.0 的技术特点包括语义 Web 技术、人工智能、区块链等。
Web 4.0：Web 4.0 是指未来 Web 技术的发展方向，目前还处于探索阶段。它的主要特点是将 Web 技术与真实世界相结合，实现一种更加深入的融合。Web 4.0 的技术特点包括增强现实、虚拟现实、智能物联网等。

总的来说，Web 技术经历了从静态页面到多向交互再到智能化 Web 的发展过程，不断提升着用户体验和应用场景。未来，随着技术的不断进步，Web 技术还将继续推动着数字世界的发展。

从书写 css来讲

初始阶段：在 Web 发展的早期阶段，CSS 的应用比较有限，主要用于简单的样式设置，例如基本的文本样式、背景颜色等。这个阶段的 CSS 书写比较简单，主要是针对页面元素进行基本的样式设计。
表现与内容分离：随着 Web 标准的推广和浏览器的发展，人们开始意识到将内容与表现分离的重要性，这一概念也被称为“Web 2.0 时代”，CSS 的角色变得更加重要。开发者开始更注重语义化的 HTML 结构，将样式与内容分离，这样不仅提高了网站的可维护性，也使得页面结构更加清晰。
响应式设计与移动优先：随着移动设备的普及，响应式设计成为了一个重要的方向。开发者需要通过媒体查询等技术来实现不同屏幕尺寸下的布局和样式调整。同时，移动优先的理念也逐渐被提出，即首先针对移动设备进行设计和开发，然后再逐步扩展到桌面端。
模块化与预处理器：随着前端项目变得越来越复杂，CSS 的模块化成为了一个重要的趋势。开发者开始使用 CSS 预处理器（如 Sa ss、Less）来实现变量、混合、嵌套等功能，以便更好地组织和管理样式代码。同时，CSS 模块化的思想也逐渐被引入，例如 BEM（Block-Elemen t-Mod i f ie r）命名规范等。
组件化与 CSS-in-JS：随着前端框架的发展，组件化成为了开发的主流模式。在这种情况下，CSS 也需要与组件一起进行模块化和组合。因此，出现了一些 CSS-i n-JS 的解决方案（如 styled–components），将 CSS 与组件直接关联起来，实现更加灵活和独立的样式管理。

CSS 的书写经历了从简单的样式设置到内容与表现分离，再到响应式设计、模块化、组件化的发展过程。未来随着前端技术的不断演进，CSS 的书写方式可能会继续发生变化。

概念理解

CSS 模块化是一种将 CSS 代码划分为独立、可复用的模块的方法。它的目标是提高代码的可维护性、可扩展性和重用性。以下是对 CSS 模块化的理解：

分离关注点：CSS 模块化通过将样式规则分解为独立的模块，每个模块都专注于自己的样式。这有助于降低代码的复杂度，提高代码的可读性和可维护性。
组件化开发：CSS 模块化可以与组件化开发相结合，每个组件拥有自己的 CSS 模块，样式只应用于该组件内部，避免样式之间的冲突。这样可以更轻松地构建和管理大型应用程序，并促进团队合作。
命名约定：CSS 模块化通常使用命名约定来避免全局样式的冲突。常用的命名约定包括 BEM（Block-Elemen t-Mod i f ie r）、OOCSS（Object-Or ie n ted CSS）和 SMACSS（Scala ble and Mo dula r Arc hi t ec ture f or CSS）等。这些约定使得每个模块的样式具有唯一性，减少了样式冲突的可能性。
可重用性：CSS 模块化鼓励编写可重用的样式模块。这些模块可以在不同的组件或页面中重复使用，从而减少代码的重复编写，并提高开发效率。
构建工具支持：有许多构建工具可以帮助实现 CSS 模块化，例如使用 CSS 预处理器（如 Sa ss、Less）或 CSS-i n-JS 解决方案（如 styled–components）。这些工具提供了模块化组织样式的功能，例如变量、混合、嵌套选择器等，以及自动化的构建和优化过程。

综上所述，CSS 模块化通过分离关注点、组件化开发、命名约定、可重用性和构建工具支持等方式，提高了 CSS 代码的可维护性和可扩展性。它是一种有助于管理和组织大型项目中复杂样式的有效方法。

实现方式

命名约定：使用一定的命名约定来实现 CSS 的模块化。例如，BEM（Block-Elemen t-Mod i f ier）命名规范将样式类名划分为块、元素和修饰符，通过命名的方式来表示各个组件或模块之间的关系。

//使用 BEM 命名规范
&lt;div class="block"&gt;
  <div class="block__element"&gt;
    <span class="block__element--modifier"&gt;Hello, CSS Modules!</span&gt;
  </div&gt;
</div&gt;

.block {
  /* 块级样式 */
}

.block__element {
  /* 元素级样式 */
}

.block__element--modifier {
  /* 修饰符样式 */
}

命名空间：使用命名空间来区分不同模块的样式。可以在样式类名前添加一个特定的前缀，以确保样式只应用于特定模块。这样可以避免样式冲突，并提供更好的可维护性。

<div class="moduleA"&gt;
  <span class="moduleA__text"&gt;Module A</span>
</div>

<div class="moduleB">
  <span class="moduleB__text">Module B</span>
</div>


.moduleA {
  /* Module A 样式 */
}

.moduleA__text {
  /* Module A 文本样式 */
}

.moduleB {
  /* Module B 样式 */
}

.moduleB__text {
  /* Module B 文本样式 */
}

CSS 预处理器：使用 CSS 预处理器（如 Sass、Less）来实现 CSS 的模块化。预处理器提供了变量、混合、嵌套等功能，可以更好地组织和管理样式代码。通过将样式代码拆分为多个文件，并使用导入机制，可以实现模块化的样式管理。

//使用Sass
// _module.scss

.module {
  /* 模块样式 */
}

.module__item {
  /* 模块子元素样式 */
}

.module--highlight {
  /* 模块高亮样式 */
}


// main.scss

@import 'module';

.container {
  /* 容器样式 */
  
  .module {
    /* 使用模块样式 */
  }
}

CSS-in-JS：使用 CSS-in-JS 解决方案（如 styled–components、Emotion）来实现 CSS 的模块化。这种方式将样式直接与组件关联起来，通过 JavaScri pt 的方式动态生成样式，从而实现更加灵活和独立的样式管理。

//使用 styled-components
import styled from 'styled-components';

const Module = styled.div`
  /* 模块样式 */
`;

const Item = styled.span`
  /* 子元素样式 */
`;

const HighlightedModule = styled(Module)`
  /* 高亮模块样式 */
`;

CSS Modules：CSS Modules 是一种将 CSS 文件作为模块导入并进行隔离的方式。通过在 CSS 类名上添加哈希值，可以确保样式的唯一性，避免样式冲突。CSS Modules 还支持局部作用域和类似于变量的功能，使得样式的模块化更加直观。

import styles from './module.css';

function Component() {
  return (
    <div className={styles.module}>
      <span className={styles.item}>Module</span>
    </div>
  );
}

不同模块化的实现利弊也有所不同

命名约定：

优点：

简单易懂，无需引入额外工具或语法。
可读性好，通过类名可以直观地了解组件结构和关系。

缺点：

类名较长，可能导致样式代码冗余。
无法确保样式的唯一性，可能会出现命名冲突。

命名空间：

优点：

可以避免样式冲突，更好地隔离模块之间的样式。
提高了样式代码的可维护性和可读性。

缺点：

需要手动管理命名空间，增加了工作量。
类名仍可能存在冲突，需要谨慎选择命名。

CSS 预处理器：

优点：

提供了变量、混合、嵌套等功能，提高了代码的复用性和可维护性。
通过拆分样式文件，可以更好地组织和管理样式代码。

缺点：

引入了预处理器，需要学习和配置相应的工具。
预处理器语法可能与原生 CSS 有所不同，需要注意语法转换。

CSS-in-JS：

优点：

样式与组件直接关联，提高了代码的可维护性和可读性。
可以在样式中使用 JavaScri pt 的能力，使样式更加动态和灵活。

缺点：

引入了额外的运行时成本，可能影响页面加载性能。
某些开发者可能对在 JavaScri pt 中编写样式持保留态度。

CSS Modules：

优点：

提供了局部作用域，避免了全局样式的冲突问题。
通过哈希值确保样式的唯一性，避免了命名冲突。
支持类似变量的功能，增加了样式代码的灵活性。

缺点：

需要使用构建工具进行编译或转换，增加了开发环境的复杂性。
对于初学者来说，可能需要学习新的概念和语法。

根据具体的项目需求和团队情况，可以选择最适合的 CSS 模块化实现方式。有些项目可能更适合简单的命名约定，而对于大型项目或团队协作，采用 CSS 预处理器或 CSS Modules 可能更合适。CSS-in-JS 则适用于那些更喜欢将样式与组件紧密耦合的开发者。

当然，不同模块化的实现使用场景也有所不同

需要根据项目的规模、团队的需求以及开发者个人偏好来选择合适的 css 模块化实现方式，有的情况下，也可以结合不同的方式来组合使用，来满足具体的需求。

命名约定：

适用于小型项目或个人项目，无需引入额外工具或语法。
对于简单的组件结构和样式需求，命名约定可以提供一种简洁明了的方式来管理样式。

命名空间：

适用于中小型项目，需要更好地隔离模块之间的样式。
当项目中存在多个模块或团队协作时，使用命名空间可以避免样式冲突，提高代码的可维护性和可读性。

CSS 预处理器：

适用于中大型项目或对样式复用和维护性要求较高的项目。
当需要使用变量、混合、嵌套等功能来提高样式代码的复用性和可维护性时，可以选择使用预处理器。

CSS-in-JS：

适用于以组件为中心的开发模式，样式与组件紧密耦合。
对于喜欢将样式与组件一起编写，并希望通过 JavaScri pt 来管理和操作样式的开发者来说，CSS-in-JS 是一个不错的选择。
尤其在使用 React 或类似的组件化框架时，CSS-in-JS 可以更好地实现组件的封装和复用。

CSS Modules：

适用于中大型项目或需要更好地管理样式作用域的项目。
当项目需要避免全局样式冲突、确保样式唯一性，并且需要灵活地使用类似变量的功能时，可以选择使用 CSS Modules。
CSS Modules 还能提供局部作用域，使样式与组件紧密关联，提高代码的可维护性和可读性。

总结

在这里插入图片描述

原文地址:https://blog.csdn.net/He_9a9/ar ti cle/de tails/134777860

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_42766.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：su wngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

从Web技术来讲

从书写css来讲