1、定义全局CSS类如.text-center实现样式复用；2、利用CSS自定义属性设置--primary-color等变量增强灵活性；3、采用BEM命名法创建.btn--primary等类避免冲突；4、通过Sass混入@include flex-center复用代码，提升维护性。
如果您在使用CSS时希望某些样式能够全局生效，同时又想通过类名灵活控制元素的外观，则可以通过定义全局CSS类来实现统一的样式管理。以下是实现CSS全局类名应用的具体方法。
本文运行环境：MacBook Pro，macOS Sonoma
一、定义全局CSS类
全局CSS类是指在样式表中定义后，可在HTML文档的任意元素上通过class属性调用的样式规则。这类样式不会局限于某个组件或模块，而是作用于整个项目。
1、打开项目的主CSS文件，例如 styles.css。
立即学习“前端免费学习笔记（深入）”；
2、定义一个通用类名，如 .text-center，用于将文本居中显示。
3、编写如下CSS规则：
.text-center {
text-align: center;
}
4、保存文件并在HTML中任意元素上添加 class="text-center" 即可应用该样式。
使用 ImageMagick 的 convert 和 mogrify 命令进行批量图像处理，支持调整大小、裁剪、水印和格式转换。与 libvips 集成以实现高性能缩略图生成。
二、使用CSS自定义属性增强全局类灵活性
CSS自定义属性（CSS Variables）允许在根选择器中定义可复用的变量，使全局类更易于维护和扩展。
1、在 :root 选择器中定义颜色或尺寸变量：
:root {
--primary-color: #007BFF;
--font-size-large: 18px;
}
2、创建一个全局类 .highlight，利用上述变量：
.highlight {
color: var(--primary-color);
font-size: var(--font-size-large);
}
3、在任意需要高亮的文本元素上添加 class="highlight"。
三、结合BEM命名法组织全局类
BEM（Block Element Modifier）是一种CSS命名规范，有助于避免类名冲突并提升样式的可读性，特别适合大型项目中的全局类管理。
1、定义一个块（Block），如 .btn 表示按钮组件。
2、为不同状态创建修饰符类，如：
.btn--primary {
background-color: #007BFF;
}
.btn--large {
padding: 12px 24px;
}
3、在HTML中组合使用：
四、通过CSS预处理器实现全局类复用
使用Sass或Less等CSS预处理器可以利用混入（Mixin）和继承（Extend）机制提高全局类的复用性。
1、安装并配置Sass环境，创建 _mixins.scss 文件。
2、定义一个混入：
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
3、在全局类中调用该混入：
.container-center {
@include flex-center;
}
4、编译Sass文件生成最终CSS，并在HTML中使用 container-center 类。
