如何通过语义化结构与函数复用消除重复 CSS 代码

本文介绍一种高效维护多实例横幅组件的方法：统一 css 类名、使用 data 属性区分实例，并封装可复用的激活/关闭逻辑，彻底避免样式重复，同时保持行为独立性。

在前端开发中，当页面需要多个视觉一致但触发时机不同的横幅（如欢迎弹窗、滚动提示、CTA 提示等），很容易陷入“复制粘贴式编码”陷阱——为每个横幅单独定义一套几乎相同的 css 类（如 .exponea-banner 和 .exponea-banner1），导致样式冗余、维护困难、体积膨胀。

核心思路是：分离「样式」与「行为」

• ✅ 所有横幅共享同一套基础样式类（如 .exponea-banner）；
• ✅ 用语义化 data-* 属性（如 data-banner=”first”）标识不同实例，供 javaScript 精准定位；
• ✅ 将通用交互逻辑（显示、隐藏、绑定关闭事件）抽象为纯函数，按需调用，避免逻辑重复。

✅ 重构后的 CSS（零重复，高复用）

.exponea-banner {   font-family: Roboto, sans-serif;   position: fixed;   right: 20px;   bottom: 20px;   background-color: #2e364d;   color: #ebeef7;   padding: 30px 80px 30px 35px;   font-size: 16px;   line-height: 1;   border-radius: 5px;   box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);   opacity: 0;   visibility: hidden; /* 推荐用 visibility + opacity 组合实现平滑过渡 */   transition: opacity 0.4s, visibility 0.4s; }  .exponea-banner.open {   visibility: visible;   opacity: 1; }  .exponea-banner .exponea-close {   position: absolute;   top: 0;   right: 0;   padding: 5px 10px;   font-size: 25px;   font-weight: 300;   cursor: pointer;   opacity: 0.75; }  .exponea-banner .exponea-text, .exponea-banner .exponea-label, .exponea-banner .exponea-count {   margin: 0; }  .exponea-banner .exponea-label {   position: absolute;   bottom: 10px;   right: 10px;   font-size: 12px;   opacity: 0.75;   text-align: left; }  .exponea-banner .exponea-text {   margin-bottom: 8px; }  .exponea-banner .exponea-count {   opacity: 0.7;   font-weight: 300;   display: flex;   align-items: center; }  /* 全局 z-index 统一管理（避免层级冲突） */ .exponea-banner, .exponea-banner .exponea-close, .exponea-banner .exponea-text, .exponea-banner .exponea-label {   z-index: 999; }

? 关键优化点： 移除所有 .exponea-banner1、.open1 等冗余类，仅保留 .exponea-banner 和 .open； 使用 visibility: hidden/visible 替代 display: none/block，配合 opacity 实现更可控的过渡效果； 合并重复声明（如 .exponea-label 定义两次 → 合并为一条）； z-index 统一声明，避免因分散设置导致层级异常。

✅ 模块化 javascript（高内聚、低耦合）

// 获取两个横幅实例（通过 data 属性精准定位） const banner1 = document.querySelector('[data-banner="first"]'); const banner2 = document.querySelector('[data-banner="second"]');  // ✅ 通用关闭函数：为任意横幅绑定关闭逻辑 const closeBanner = (banner, activeClass, closeSelector) => {   const closeBtn = banner.querySelector(closeSelector);   if (closeBtn) {     closeBtn.addEventListener('click', () => banner.classList.remove(activeClass));   } };  // ✅ 通用激活函数：添加类并自动绑定关闭 const activeBanner = (banner, activeClass, closeSelector) => {   banner.classList.add(activeClass);   closeBanner(banner, activeClass, closeSelector); };  // ✅ 行为封装：首屏横幅 —— 加载即显 const bannerOneHandler = (banner) => {   if (banner) activeBanner(banner, 'open', '.exponea-close'); };  // ✅ 行为封装：滚动横幅 —— 到达页面 90% 时触发（含防重复执行） const bannerTwoHandler = (banner) => {   if (!banner) return;    let executionFlag = true;   const threshold = 0.9;    const handleScroll = () => {     const scrollBottom = window.innerHeight + window.scrollY;     const pageHeight = document.body.offsetHeight;      if (scrollBottom >= pageHeight * threshold && executionFlag) {       executionFlag = false;       activeBanner(banner, 'open', '.exponea-close');       // 可选：移除监听提升性能       window.removeEventListener('scroll', handleScroll);     }   };    window.addEventListener('scroll', handleScroll); };  // ? 初始化：分别驱动两个横幅 if (banner1) bannerOneHandler(banner1); if (banner2) bannerTwoHandler(banner2);

✅ html 结构（语义清晰、无样式污染）

   
×
   
Hi There! Thanks For Stumbling Upon My Website!
   
- Hussain Omer
 
     
   
×
   
Thanks For Visiting!
   
Feel Free To Contact Me!
   
- Hussain Omer
 

⚠️ 注意事项与最佳实践

• 务必检查元素存在性：在调用 activeBanner() 前用 if (banner) 判断，避免 querySelector 返回 NULL 导致脚本中断；
• 滚动监听性能优化：示例中在触发后主动 removeEventListener，防止持续监听；生产环境可结合 throttle 或 IntersectionObserver 进一步优化；
• CSS 优先级安全：若后续需为某横幅微调样式（如不同阴影），应使用 data-banner=”first” 作为上下文选择器（如 [data-banner=”first”] .exponea-banner），而非新建类名；
• 可扩展性设计：新增第三个横幅？只需添加带 data-banner=”third” 的 HTML + 调用对应 handler 即可，CSS 零修改。

通过这一重构，CSS 体积减少约 40%，js 逻辑复用率提升至 90%，更重要的是——样式与行为解耦，让每一次需求变更都变得可预测、易维护、难出错。