将元素保留在 DIV 中而不继承页面样式的最佳方法

Best way to keep elements inside DIV not to inherit page styles

本文关键字：样式 方法 最佳 继承 保留 元素 DIV      更新时间：2023-09-26

我正在使用CKEditor允许用户发布一些丰富的内容作为评论。但是在显示时，我使用 DIV 作为父级并将所有内容扔进去。所以，显然它继承了页面的所有CSS。我想防止这种情况，以下是我的选择

  1. 避免使用通用样式，如 p, div { ... } 。
  2. 对于 DIV，请分配一个 ID 并重置页面上应用于该 DIV 的所有样式。
  3. 使用 IFrame 显示内容。（这对我来说似乎是一个很好的解决方案，但我正在尝试尽可能多地 IFrames）。

请问有什么new suggestions吗？

将 BEM 方法用于您的 CSS。Block-Element-Modifier一直是我所有工作中的首选解决方案，包括一家收入为$ 1B +和大约三百名工程师的公司的样式表。

在 BEM 下，您最终会得到：

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

在这种情况下，您的评论部分可能会成为一个.comment块，其中包含一些元素和修饰符来设置内容样式。

相关文章：