CSS

网站标签

BEM、 CSS、 CSS、 BEM、 命名规范、 CSS、 命名方法和规范、 wkiwi的博客、

网站描述

BEM分别代表着：Block（块）、Element（元素）、Modifier（修饰符），是一种组件化的CSS命名方法和规范，由俄罗斯Yandex团队所提出。其目的是将用户界面划分成独立的（模）块，使开发更为简单和快速，利于团队协作开发。

上一篇：宁波氮化

下一篇：了得信息技术

网站快照

C S S B E M 命 名 规 范 C S S 命 名 规 范 B E M B E M 是 由 Y a n d e x 公 司 推 出 的 一 套 C S S 命 名 规 范 ， 官 方 是 这 么 描 述 它 的 ： B E M 是 一 种 让 你 可 以 快 速 开 发 网 站 并 对 此 进 行 多 年 维 护 的 技 术 。 一 开 始 ， Y a n d e x 公 司 推 出 的 B E M ， 包 括 了 规 范 以 及 其 配 套 构 建 工 具 。 如 今 提 到 的 B E M 主 要 是 指 其 中 的 规 范 ， 在 B E M 最 新 的 推 广 页 中 ， 对 其 的 描 述 为 ： B E M 是 一 种 命 名 方 法 ， 能 够 帮 助 你 在 前 端 开 发 中 实 现 可 复 用 的 组 件 和 代 码 共 享 。 2 0 1 2 年 那 会 儿 我 接 触 到 B E M ， 那 时 候 资 料 不 多 ， 不 说 百 度 ， 就 连 谷 歌 上 “ 能 看 的 ” 文 章 也 是 几 笔 带 过 ， 最 终 还 是 要 到 官 网 上 研 究 ， 打 开 审 查 元 素 工 具 ， 边 看 B E M 官 网 页 面 元 素 的 命 名 ， 边 对 照 官 网 介 绍 的 规 范 用 法 。 不 过 最 近 貌 似 B E M 的 文 章 多 起 来 ， 提 起 其 他 C S S 命 名 方 法 ， 如 O O C S S ， S M A C S S ， 往 往 都 会 提 及 B E M ， 而 且 最 近 蛮 多 互 联 网 公 司 喜 欢 介 绍 项 目 架 构 ， 不 管 p p t 还 是 技 术 文 章 ， 其 中 也 频 频 出 现 B E M 的 身 影 ， 甚 至 有 推 崇 备 至 的 。 B E M 这 套 规 范 到 如 今 已 经 有 了 多 套 改 良 版 ， 但 其 中 的 思 想 是 不 变 ， 在 了 解 其 思 想 的 过 程 中 ， 我 们 能 了 解 到 它 到 底 为 了 解 决 什 么 问 题 ， 明 白 C S S 难 以 维 护 到 底 是 哪 里 出 了 问 题 ， 自 然 我 们 也 就 明 白 了 以 后 编 写 C S S 的 时 候 要 规 避 什 么 问 题 。 所 以 不 管 遵 循 不 遵 循 ， B E M 还 是 值 得 我 们 去 了 解 一 下 的 ， B E M 解 决 的 问 题 c s s 的 样 式 应 用 是 全 局 性 的 ， 没 有 作 用 域 可 言 。 考 虑 以 下 场 景 场 景 一 ： 开 发 一 个 弹 窗 组 件 ， 在 现 有 页 面 中 测 试 都 没 问 题 ， 一 段 时 间 后 ， 新 需 求 新 页 面 ， 该 页 面 一 打 开 这 个 弹 窗 组 件 ， 页 面 中 样 式 都 变 样 了 ， 一 查 问 题 ， 原 来 是 弹 窗 组 件 和 该 页 面 的 样 式 相 互 覆 盖 了 ， 接 下 来 就 是 修 改 覆 盖 样 式 的 选 择 器 . . . 又 一 段 时 间 ， 又 开 发 新 页 面 ， 每 次 为 元 素 命 名 都 心 惊 胆 战 ， 求 神 拜 佛 ， 没 写 一 条 样 式 ， F 5 都 按 多 几 次 ， 每 个 组 件 都 测 试 一 遍 . . . 场 景 二 ： 承 接 上 文 ， 由 于 页 面 和 弹 窗 样 式 冲 突 了 ， 所 以 把 页 面 的 冲 突 样 式 的 选 择 器 加 上 一 些 结 构 逻 辑 ， 比 如 子 选 择 器 、 标 签 选 择 器 ， 借 此 让 选 择 器 独 一 无 二 。 一 段 时 间 后 ， 新 同 事 接 手 跟 进 需 求 ， 对 样 式 进 行 修 改 ， 由 于 选 择 器 是 一 连 串 的 结 构 逻 辑 ， 看 不 过 来 ， 嫌 麻 烦 ， 就 干 脆 在 样 式 文 件 最 后 用 另 一 套 选 择 器 ， 加 上 了 覆 盖 样 式 . . . 接 下 来 又 有 新 的 需 求 . . . 最 后 的 结 果 ， 一 个 元 素 对 应 多 套 样 式 ， 遍 布 整 个 样 式 文 件 . . . 以 往 开 发 组 件 ， 我 们 都 用 “ 重 名 概 率 小 ” 或 者 干 脆 起 个 “ 当 时 认 为 是 独 一 无 二 的 名 字 ” 来 保 证 样 式 不 冲 突 ， 这 是 不 可 靠 的 。 理 想 的 状 态 下 ， 我 们 开 发 一 套 组 件 的 过 程 中 ， 我 们 应 该 可 以 随 意 的 为 其 中 元 素 进 行 命 名 ， 而 不 必 担 心 它 是 否 与 组 件 以 外 的 样 式 发 生 冲 突 。 B E M 解 决 这 一 问 题 的 思 路 在 于 ， 由 于 项 目 开 发 中 ， 每 个 组 件 都 是 唯 一 无 二 的 ， 其 名 字 也 是 独 一 无 二 的 ， 组 件 内 部 元 素 的 名 字 都 加 上 组 件 名 ， 并 用 元 素 的 名 字 作 为 选 择 器 ， 自 然 组 件 内 的 样 式 就 不 会 与 组 件 外 的 样 式 冲 突 了 。 这 是 通 过 组 件 名 的 唯 一 性 来 保 证 选 择 器 的 唯 一 性 ， 从 而 保 证 样 式 不 会 污 染 到 组 件 外 。 这 也 可 以 看 作 是 一 种 “ 硬 性 约 束 ” ， 因 为 一 般 来 说 ， 我 们 的 组 件 会 放 置 在 同 一 目 录 下 ， 那 么 操 作 系 统 中 ， 同 一 目 录 下 文 件 名 必 须 唯 一 ， 这 一 点 也 就 确 保 了 组 件 之 间 不 会 冲 突 。 B E M 的 命 名 规 矩 很 容 易 记 ： b l o c k n a m e _ _ e l e m e n t n a m e m o d i f i e r n a m e ， 也 就 是 模 块 名 + 元 素 名 + 修 饰 器 名 。 一 般 来 说 ， 根 据 组 件 目 录 名 来 作 为 组 件 名 字 ： 比 如 分 页 组 件 ： / a p p / c o m p o n e n t s / p a g e b t n / 那 么 该 组 件 模 块 就 名 为 p a g e b t n ， 组 件 内 部 的 元 素 命 名 都 必 须 加 上 模 块 名 ， 比 如 ： d i v c l a s s = p a g e b t n > b u t t o n t y p e = b u t t o n c l a s s = p a g e b t n _ _ p r e v > 上 一 页 b u t t o n > b u t t o n t y p e = b u t t o n c l a s s = p a g e b t n _ _ n e x t > 下 一 页 b u t t o n > d i v > 上 面 我 们 用 双 下 划 线 来 明 确 区 分 模 块 名 和 元 素 名 ， 当 然 也 可 以 用 单 下 划 线 ， 比 如 p a g e b t n _ p r e v 和 p a g e b t n _ n e x t 。 我 们 只 需 保 留 B E M 的 思 想 ， 其 命 名 规 范 可 以 任 意 变 通 。 一 开 始 了 解 B E M 的 时 候 ， 可 能 会 产 生 误 解 ， 出 现 以 下 不 正 确 的 命 名 方 式 ： d i v c l a s s = p a g e b t n > u l c l a s s = p a g e b t n _ _ l i s t > l i c l a s s = p a g e b t n _ _ l i s t _ _ i t e m > a h r e f = # c l a s s = p a g e b t n _ _ l i s t _ _ i t e m _ _ l i n k > 第 一 页 a > l i > u l > d i v > 分 页 组 件 有 个 u l 列 表 名 为 ： p a g e b t n _ _ l i s t ， 列 表 里 面 存 放 每 一 页 的 按 钮 ， 名 为 ： p a g e b t n _ _ l i s t _ _ i t e m _ _ l i n k ， 这 是 不 对 的 。 首 先 ， 有 悖 B E M 命 名 规 范 ， B E M 的 命 名 中 只 包 含 三 个 部 分 ， 元 素 名 只 占 其 中 一 部 分 ， 所 以 不 能 出 现 多 个 元 素 名 的 情 况 ， 所 以 上 述 每 一 页 的 按 钮 名 可 以 改 成 ： p a g e b t n _ _ b t n 。 其 次 ， 有 悖 B E M 思 想 ， B E M 是 不 考 虑 结 构 的 ， 比 如 上 面 的 分 页 按 钮 ， 即 使 它 是 在 u l 列 表 里 面 ， 它 的 命 名 也 不 应 该 考 虑 其 父 级 元 素 。 当 我 们 遵 循 了 这 个 规 定 ， 无 论 父 元 素 名 发 生 改 变 ， 或 是 模 块 构 造 发 生 的 改 变 ， 还 是 元 素 之 间 层 级 关 系 互 相 变 动 ， 这 些 都 不 会 影 响 元 素 的 名 字 。 所 以 即 使 需 求 变 动 了 ， 分 页 组 件 该 有 按 钮 还 是 要 有 按 钮 的 ， D O M 构 造 发 生 变 动 ， 至 多 也 就 不 同 元 素 的 增 删 减 ， 模 块 内 名 称 也 随 之 增 删 减 ， 而 不 会 出 现 修 改 名 字 的 情 况 ， 也 就 不 会 因 为 名 字 变 动 ， 牵 涉 到 J S 文 件 的 修 改 ， 或 样 式 文 件 的 修 改 。 B E M 命 名 好 长 B E M 的 命 名 中 包 含 了 模 块 名 ， 长 长 的 命 名 会 让 H T M L 标 签 会 显 得 臃 肿 。 其 实 每 个 使 用 B E M 的 开 发 团 队 多 多 少 少 会 改 变 其 命 名 规 范 ， 比 如 I n s t a g r a m 团 队 使 用 的 驼 峰 式 : . b l o c k N a m e e l e m e n t N a m e m o d i f i e r N a m e 还 有 单 下 划 线 ： . b l o c k n a m e _ e l e m e n t n a m e m o d i f i e r N a m e 还 有 修 饰 器 名 用 单 横 线 连 接 ： . b l o c k N a m e _ _ e l e m e n t N a m e m o d i f i e r N a m e 其 实 这 些 对 缩 短 命 名 没 有 多 大 的 帮 助 ， 但 我 们 也 无 需 担 心 文 件 体 积 的 问 题 ， 由 于 服 务 端 有 g z i p 压 缩 ， B E M 命 名 相 同 的 部 分 多 ， 压 缩 下 来 的 体 积 不 会 太 大 。 另 外 现 在 都 用 I D E 来 编 写 代 码 了 ， 有 自 动 提 示 功 能 ， 也 无 须 担 心 重 复 的 输 入 过 长 的 名 字 。 因 为 命 名 长 ， 我 们 是 不 是 可 以 用 子 代 选 择 器 来 代 替 B E M 命 名 ？ 这 样 至 少 在 H T M L 编 写 时 ， 让 H T M L 标 签 看 起 来 美 观 一 点 。 下 面 说 说 子 代 选 择 器 带 来 的 问 题 。 子 选 择 器 子 代 选 择 器 的 方 式 是 ， 通 过 组 件 的 根 节 点 的 名 称 来 选 取 子 代 元 素 。 按 照 这 个 思 路 ， 分 页 按 钮 样 式 可 以 这 么 写 ： d i v c l a s s = p a g e b t n > u l c l a s s = l i s t > u l > d i v > . p a g e b t n . p a g e b t n . l i s t H T M L 看 起 来 美 观 多 了 ， 但 这 解 决 了 样 式 冲 突 问 题 么 ？ 试 想 下 ， 如 果 让 你 来 接 手 这 个 项 目 ， 要 增 加 一 个 需 求 ， 新 增 一 个 组 件 ， 你 命 名 放 心 么 ？ 你 面 临 的 问 题 是 ： 你 打 开 组 件 目 录 ， 里 面 有 个 分 页 组 件 ， 叫 做 p a g e b t n ， 可 是 你 完 全 不 知 道 要 怎 么 给 新 组 件 命 名 ， 因 为 即 使 新 组 件 模 块 名 与 p a g e b t n 不 一 样 ， 也 不 能 保 证 新 组 件 与 分 页 组 件 不 冲 突 。 比 如 新 的 需 求 是 “ 新 增 一 个 列 表 组 件 ” ， 如 果 该 组 件 的 名 字 叫 做 l i s t ， 其 根 节 点 的 名 字 叫 l i s t ， 那 么 这 个 组 件 下 面 写 的 样 式 ， 就 很 可 能 和 . p a g e b t n . l i s t 的 样 式 冲 突 : . l i s t 这 还 仅 仅 只 有 两 个 组 件 而 已 ， 实 际 项 目 中 ， 十 几 个 或 几 十 个 组 件 ， 难 道 我 们 要 每 个 组 件 都 检 查 一 下 来 “ 新 组 件 名 是 否 和 以 往 组 件 的 子 元 素 命 名 冲 突 了 ” 么 ？ 这 不 现 实 。 B E M 禁 止 使 用 子 代 选 择 器 ， 以 上 是 原 因 之 一 。 子 代 选 择 器 不 好 的 地 方 还 在 于 ， 如 果 层 次 关 系 过 长 ， 逻 辑 不 清 晰 ， 非 常 不 利 于 维 护 。 为 了 懒 得 命 名 或 者 追 求 所 谓 的 “ 精 简 代 码 ” ， 写 出 下 面 这 种 选 择 器 ： . p a g e b t n b u t t o n : f i r s t c h i l d . p a g e b t n u l l i a / * . . . * / / * 维 护 代 码 ， 新 增 需 求 * / . p a g e b t n . p r e v 用 层 次 关 系 结 构 关 系 来 定 位 元 素 ， 可 能 会 因 为 需 求 改 变 而 大 面 积 的 重 写 样 式 文 件 。 试 想 一 下 维 护 这 类 代 码 有 多 么 痛 苦 ， 我 们 要 一 边 检 查 该 元 素 的 上 下 文 D O M 结 构 ， 一 边 对 照 着 c s s 文 件 ， 一 一 对 比 ， 找 到 该 元 素 对 应 的 样 式 ， 也 就 是 说 我 为 了 改 一 个 元 素 的 代 码 ， 需 要 不 断 翻 阅 H T M L 文 件 和 C S S 文 件 ， 可 维 护 性 非 常 之 差 。 更 有 甚 者 ， 来 维 护 这 块 代 码 的 同 事 ， 直 接 在 样 式 文 件 最 后 添 加 覆 盖 样 式 ， 这 会 造 成 一 个 非 常 严 重 的 问 题 了 ： 同 一 个 元 素 样 式 零 散 的 分 布 在 文 件 的 不 同 地 方 ， 而 且 定 位 该 元 素 的 选 择 器 也 可 能 各 不 相 同 。 这 样 的 样 式 文 件 只 会 越 写 越 糟 糕 ， 可 以 说 ， 当 我 们 用 子 代 选 择 器 来 定 位 元 素 时 ， 这 个 样 式 文 件 就 已 经 注 定 是 要 被 翻 来 覆 去 的 重 构 的 了 ， 甚 至 ， 每 个 来 维 护 这 个 文 件 的 人 都 会 将 其 重 构 一 遍 。 子 代 选 择 器 还 会 造 成 权 重 过 大 的 问 题 ， 当 我 们 要 做 响 应 式 的 时 候 ， 某 个 带 样 式 的 元 素 需 要 适 配 不 同 的 屏 幕 ， 此 时 ， 我 们 还 要 不 断 的 确 认 该 元 素 之 前 的 选 择 器 写 法 ！ 为 了 覆 盖 前 面 权 重 过 大 的 样 式 ， 甚 至 通 过 添 加 额 外 的 类 名 或 标 签 名 来 增 加 权 重 。 可 想 而 知 ， 此 后 这 个 样 式 文 件 的 维 护 难 度 就 像 雪 球 一 样 ， 越 滚 越 大 。 如 果 我 们 用 的 是 B E M ， 要 覆 盖 样 式 很 简 单 ： 找 到 要 覆 盖 样 式 的 元 素 ， 得 知 它 的 类 名 ， 在 媒 体 查 询 中 ， 用 它 的 类 名 作 为 选 择 器 ， 写 下 覆 盖 样 式 ， 样 式 就 覆 盖 成 功 了 ， 不 需 要 担 心 前 面 样 式 的 权 重 过 大 。 B E M 修 饰 器 根 据 不 同 的 场 景 ， 组 件 可 能 会 表 现 出 不 同 的 样 式 。 比 如 分 页 组 件 在 p c 端 具 有 具 体 的 页 码 以 及 上 下 页 按 钮 ， 但 在 移 动 端 ， 因 空 间 有 限 ， 可 能 只 保 留 上 下 页 按 钮 。 我 们 可 以 用 修 饰 器 来 区 分 这 两 种 情 况 。 默 认 情 况 下 ， 分 页 按 钮 的 类 名 为 p a g e b t n ， 但 在 移 动 端 ， 我 们 需 要 加 多 个 类 名 p a g e b t n m i n / * 缩 小 版 分 页 组 件 中 ， 具 体 页 码 按 钮 隐 去 * / . p a g e b t n m i n . p a g e b t n _ _ b t n . p a g e b t n m i n . p a g e b t n _ _ p r e v . p a g e b t n m i n . p a g e b t n _ _ p r e v 上 面 这 种 情 况 用 了 子 代 选 择 器 ， B E M 是 不 允 许 这 么 写 的 ， B E M 中 修 饰 器 的 样 式 不 依 赖 于 任 何 结 构 关 系 ， 也 就 是 说 ， 元 素 的 状 态 改 变 只 会 影 响 自 身 ， 不 对 其 他 元 素 进 行 影 响 ， 但 实 际 上 ， 这 很 难 做 到 的 。 以 上 的 写 法 不 会 造 成 样 式 冲 突 的 ， 而 且 权 重 的 影 响 也 不 大 。 B E M 修 饰 器 代 表 着 元 素 的 状 态 ， 但 有 时 候 元 素 的 状 态 需 要 j s 来 控 制 ， 此 时 遵 循 规 范 没 有 任 何 好 处 ， 比 如 激 活 状 态 ， B E M 推 荐 的 写 法 是 ： . b l o c k _ _ e l e m e n t . b l o c k _ _ e l e m e n t a c t i v e 当 用 j s 为 该 元 素 添 加 状 态 时 ， 我 们 需 要 知 道 该 元 素 的 名 字 b l o c k _ _ e l e m e n t ， 这 样 我 们 才 能 推 导 出 它 的 激 活 状 态 为 b l o c k _ _ e l e m e n t a c t i v e ， 这 是 不 合 理 的 ， 因 为 很 多 时 候 我 们 无 法 得 知 元 素 的 名 称 ， 所 以 这 时 候 ， 我 们 应 该 统 一 j s 控 制 状 态 的 类 名 格 式 ， 比 如 i s a c t i v e 、 j s a c t i v e 等 等 ， 这 些 类 名 只 用 作 标 识 ， 不 予 许 有 默 认 的 公 共 样 式 ： . b l o c k _ _ e l e m e n t . b l o c k _ _ e l e m e n t . i s a c t i v e 原 子 类 和 B E M B E M 可 以 不 需 要 用 到 原 子 类 ， 但 是 如 果 已 经 引 入 了 类 似 B o o t s t r a p 的 框 架 ， 也 没 必 要 强 制 避 免 使 用 原 子 类 ， 比 如 “ p u l l r i g h t ” 、 e l l i p s i s 、 “ c l e a r f i x ” 等 等 类 ， 这 些 类 非 常 实 用 ， 和 B E M 是 可 以 互 补 的 。 在 组 件 开 发 中 其 实 不 推 荐 使 用 原 子 类 ， 因 为 这 会 降 低 组 件 的 可 复 用 性 。 可 复 用 性 的 最 理 想 状 态 就 是 组 件 不 仅 仅 在 不 同 的 页 面 中 表 现 一 致 ， 在 跨 项 目 的 情 况 下 ， 也 能 够 运 行 良 好 。 如 果 组 件 的 样 式 因 为 依 赖 于 某 几 个 原 子 类 就 要 依 赖 整 个 B o o t s t r a p 库 ， 那 么 组 件 d 迁 移 负 担 就 重 很 多 了 。 原 子 类 更 适 合 应 用 在 实 际 页 面 中 ， 这 是 因 为 页 面 变 动 大 而 且 不 可 复 用 ， 假 设 在 h e a d e r 中 ， 我 们 用 到 了 两 个 组 件 l o g o 和 u s e r p a n e l （ 用 户 操 作 面 板 ） ， 两 个 组 件 分 别 置 于 h e a d e r 的 左 侧 和 右 侧 ， 我 们 可 以 这 么 写 ： d i v c l a s s = h e a d e r c l e a r f i x > d i v c l a s s = l o g o p u l l l e f t > d i v > d i v c l a s s = u s e r p a n e l p u l l l e f t > d i v > d i v > h e a d e r 可 以 封 装 成 一 个 模 块 ， 但 它 复 用 程 度 不 高 ， 不 能 算 是 组 件 ， 所 以 即 使 使 用 原 子 类 也 没 有 关 系 。 在 项 目 中 ， 使 用 原 子 类 之 前 应 该 考 虑 一 下 ， 这 个 场 景 是 否 变 动 大 而 且 不 可 复 用 ， 如 果 是 的 话 ， 我 们 可 以 放 心 的 使 用 原 子 类 。 组 件 应 该 是 “ 自 洽 的 ” ， 其 本 身 就 应 该 构 成 了 一 个 “ 生 态 圈 ” ， 也 就 是 说 ， 他 几 乎 不 需 要 外 部 供 给 ， 自 给 自 足 就 能 够 运 转 下 去 。 实 际 页 面 中 也 应 该 使 用 B E M 在 实 际 页 面 中 也 需 要 用 到 B E M 命 名 方 法 ， 不 然 乱 起 的 一 个 名 字 很 可 能 就 和 某 一 组 件 冲 突 了 ， 导 致 样 式 相 互 覆 盖 。 假 如 我 们 有 联 系 页 面 ， 路 径 是 / p a g e s / c o n t a c t / 。 那 么 该 页 面 的 模 块 名 可 以 是 p a g e c o n t a c t ， 其 名 下 元 素 均 以 p a g e c o n t a c t _ _ e l e m e n t n a m e 命 名 。 一 般 来 说 ， 实 际 页 面 中 只 是 对 组 件 进 行 调 用 ， 对 组 件 的 位 置 进 行 调 整 ， 但 不 会 对 组 件 内 部 细 节 进 行 修 改 。 但 实 际 情 况 下 ， 同 一 个 组 件 在 不 同 页 面 不 同 模 样 的 情 况 也 是 有 的 ， 所 以 会 出 现 在 实 际 页 面 中 对 组 件 样 式 进 行 微 调 的 代 码 ： / * 联 系 页 面 对 分 页 按 钮 进 行 微 调 * / . p a g e c o n t a c t . p a g e b t n 但 更 推 荐 的 做 法 是 给 分 页 组 件 添 加 一 个 修 饰 器 ， 将 上 面 的 样 式 放 到 修 饰 器 名 下 ， 再 根 据 实 际 情 况 运 用 到 页 面 中 。 w e b p a c k c s s l o a d e r 解 决 之 道 B E M 主 要 被 诟 病 的 一 点 在 于 其 命 名 过 长 ， 结 合 A n g u l a r 这 种 带 有 标 签 指 令 的 框 架 时 ， 整 个 H T M L 看 起 来 会 更 混 乱 ： s p a n n g r e p e a t = p o s t i n p o s t D a t a t r a c k b y p o s t . i d n g i f = $ i n d e x = = = 0 c l a s s = p a g e p o s t _ _ p o s t i t e m n g c l a s s = p o p o v e r c o n t e n t = > s p a n > 当 然 ， 我 们 可 以 通 过 换 行 来 缓 解 这 个 问 题 : s p a n n g r e p e a t = p o s t i n p o s t D a t a t r a c k b y p o s t . i d n g i f = $ i n d e x = = = 0 c l a s s = p a g e p o s t _ _ p o s t i t e m n g c l a s s = p o p o v e r c o n t e n t = > s p a n > 但 其 实 说 穿 了 ， B E M 保 证 样 式 不 冲 突 的 核 心 就 是 ： 在 元 素 名 中 加 入 唯 一 的 标 识 。 这 个 标 识 在 B E M 中 对 应 的 是 模 块 名 ， 也 可 能 是 一 个 独 一 无 二 的 乱 序 字 符 串 。 为 模 块 中 每 个 元 素 名 加 入 标 识 ， 这 可 是 重 复 的 工 作 啊 ， 重 复 的 工 作 就 应 该 交 给 机 器 去 做 。 w e b p a c k 加 载 器 c s s l o a d e r ， 可 在 j s 中 读 取 c s s 样 式 ， 自 2 0 1 5 年 4 月 份 起 ， 该 插 件 加 入 了 p l a c e h o l d e r 功 能 ， 使 得 该 插 件 可 以 解 决 C S S 作 用 域 的 问 题 ， 原 理 也 就 是 给 元 素 的 名 称 加 入 唯 一 的 标 识 。 / * 分 页 组 件 * / : l o c a l ( . p r e v ) c s s l o a d e r 加 载 器 自 定 义 的 语 法 ： : l o c a l ( . i d e n t i f i e r ) 向 外 暴 露 出 选 择 器 . p r e v 。 在 J S 代 码 中 ， 我 们 可 以 拿 到 这 个 选 择 器 ： i m p o r t s t y l e s f r o m . / p a g e b t n . c s s ; v a r $ p r e v B t n = $ ( + s t y l e s . p r e v + > 上 一 页 ) ; / / . . . s t y l e s . p r e v 返 回 的 是 一 串 独 一 无 二 且 随 机 的 字 符 串 ， 该 字 符 串 对 应 着 样 式 文 件 中 的 选 择 器 。 这 名 字 有 悖 语 义 化 ， 但 c s s l o a d e r 支 持 配 置 字 符 串 的 生 成 格 式 ， 友 情 链 接 ： e c h a r t 案 例 | A I 工 具 集 导 航 | 在 线 预 约 系 统 | 柠 檬 鲸 科 技 | w k i w i 的 博 客 | 商 图 助 理 陕 I C P 备 1 7 0 1 5 4 7 5 号 5 陕 公 网 安 备 6 1 1 0 0 2 0 2 0 0 0 1 1 4 号

关于www.bemcss.com说明：

www.bemcss.com由网友主动性提交被若依网址导航整理收录的，若依网址导航仅提供www.bemcss.com的基础信息并免费向大众网友展示，www.bemcss.com的是IP地址：- 地址：-，www.bemcss.com的百度权重为0、百度手机权重为0、百度收录为0条、360收录为0条、搜狗收录为0条、谷歌收录为0条、百度来访流量大约在-之间、百度手机端来访流量大约在-之间、www.bemcss.com的备案号是-、备案人叫-、被百度收录的关键词有0个、手机端关键词有0个、该站点迄今为止已经创建未知。

内容声明：

1、本站收录的内容来源于大数据收集，版权归原网站所有！
2、本站收录的内容若侵害到您的利益，请联系我们进行删除处理！
3、本站不接受违规信息，如您发现违规内容，请联系我们进行清除处理！
4、本文地址：https://www.ruoyidh.com/bokedh/eac23ecc13dea2c255b3.html，复制请保留版权链接！

---