html - 可扩展的 CSS 命名和子类化

Question

如果你有一个 div其中包含各种元素，在为此 HTML 编写 CSS 规则时，什么是显示关系和层次结构的好方法:

<div class="tweet-general-item">
<p>Some summary text in here</p>
</div>

我想知道如何为 <p> 编写和应用样式元素。这可以通过两种方式完成:

.tweet-general-item-summary {
  ...  
  font-size: 12px;
}

With HTML like this <p class="tweet-general-item-summary">Some summary text here</p>

OR

.tweet-general-item .summary {
  ...  
  font-size: 12px;
}

With HTML like this <p class="tweet-general-item summary">Some summary text here</p>

哪种方式更好/可扩展/良好实践，为什么？我必须能够在 CSS 中显示某种层次结构/关系。我不能简单地拥有 .summary 的风格本身是因为它对任何人都没有语义意义——设计者/开发者需要通过阅读 CSS 来了解它是什么样的摘要。

Answer 1

看看 BEM 方法论:

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

https://bem.info/method/

您的示例如下所示:

<div class="tweet">
  <p class="tweet__summary"></p>
</div>