如何用相同的html结构样式块？

编程问答 2022-07-22

问题描述

假设我们有一些目标网页。在此目标页面上，我们很少有带有纸牌网格的部分。

  1. 新闻；
  2. 产品；
  3. 合作伙伴。 它们都具有几乎相同的html结构。但是样式不同，徘徊，覆盖等。 https://codepen.io/SOlid_Michael/pen/WNwKENZ 如何分别设置样式？我没什么主意。
  4. 通过向该部分的每个元素添加特定的类，例如partners__card-title （我不认为这是个好主意。这使得制作mixins变得困难，然后将这种布局应用于cms cos，您总是必须将额外的类传递给此块）
  5. 通过向元素添加修饰符。再次，我认为这将使创建mixins和应用布局变得困难。
  6. 只需从父级进行样式设置：.partners .card {} .products .card {}等 我认为这是最好的方法 但这在bem中有效还是我遗漏了一些东西？

解决方法

根据BEM方法论，第四点是You提出的唯一有效方法。但是，BEM通常被用作命名约定，因此，如果您不让它影响使用 CSS 预处理器编写 CSS 的方式，那么不会伤害您（用于mixin等）。方法论是给程序员的，而不是方法论的程序员：P

bem